/* ════════════════════════════════════════════════════════════
   CONTACT — /contact/, gescoped onder #pmContact.

   Zelfde tokens en dezelfde bouw als veelgestelde-vragen.css, zodat de
   servicepagina's één familie blijven: lichte hero met de radiale verloop,
   het lichtblauwe --veld als paginakleur zodat de witte kaarten eruit springen,
   de accordeon met de plus die 45 graden draait, het hulpblok met de foto's en
   de donkere eind-CTA met de teal-blauwe pil.

   ⚠ ELKE REGEL BEGINT MET #pmContact. De reset op regel 2 hieronder is
   ID-specifiek (1,0,0) en wint dus van elke losse klasse-regel (0,1,0). Vergeet
   je het voorvoegsel bij één regel, dan wordt daar stilletjes alle padding en
   marge weggedrukt en plakt dat blok tegen de linkerrand. Precies dat ging op
   2 september 2026 mis bij de eerste opzet.
   ════════════════════════════════════════════════════════════ */
#pmContact {
  --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;
  --veld: #f7fbff;
  --radius: 22px;
  --schaduw: 0 12px 30px rgba(15,23,42,.07);
  --kop-ruimte: 112px;
  font-family: 'Albert Sans', -apple-system, sans-serif;
  background: var(--veld); color: var(--inkt-zacht); line-height: 1.5;
  box-shadow: 0 0 0 100vmax var(--veld);
  clip-path: inset(0 -100vmax);
  display: block;
}
#pmContact, #pmContact *, #pmContact *::before, #pmContact *::after { margin: 0; padding: 0; box-sizing: border-box; }
#pmContact h1, #pmContact h2, #pmContact h3, #pmContact p, #pmContact li, #pmContact label { color: inherit; }
#pmContact a { color: var(--blauw-donker); }
#pmContact ul { list-style: none; }
#pmContact [hidden] { display: none !important; }
#pmContact .wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }

/* ══ HERO ══ */
#pmContact .heroLicht { text-align: center; padding: 46px 0 38px;
  background: radial-gradient(120% 150% at 50% -20%, #ecfbf4 0%, #e6f7fd 45%, var(--veld) 100%); }
#pmContact .heroEyebrow { font: 800 11.5px 'Inter', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--blauw); }
#pmContact .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); }
#pmContact .heroToel { font-size: 14.5px; color: var(--grijs); line-height: 1.65; margin: 13px auto 0; max-width: 560px; }

#pmContact .snel { margin-top: 22px; }
#pmContact .snelKop { display: block; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .8px;
  text-transform: uppercase; color: var(--grijs-licht); margin-bottom: 10px; }
#pmContact .snel ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#pmContact .snel 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; }
#pmContact .snel a:hover { border-color: var(--blauw); color: var(--blauw-donker); }

/* ══ INHOUD ══ */
#pmContact .inhoud { padding: 30px 0 10px; }
#pmContact .blok { margin-bottom: 34px; scroll-margin-top: var(--kop-ruimte); }
#pmContact .sectieKop { margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #dbe4ec; }
#pmContact .sectieKop h2 { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 900;
  letter-spacing: -.4px; line-height: 1.25; color: var(--inkt); }
#pmContact .sectieKop p { font-size: 13.5px; color: var(--grijs); line-height: 1.55; margin-top: 3px; }

/* ══ ACCORDEON — exact de bouw van #pmFaq .faqItem ══ */
#pmContact .faqLijst { display: flex; flex-direction: column; gap: 10px; }
#pmContact .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; }
#pmContact .faqItem:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15,23,42,.08); }
#pmContact .faqItem[open] { border-color: #cbd5e1; box-shadow: var(--schaduw); }
#pmContact .faqItem > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 16px 0; }
#pmContact .faqItem > summary::-webkit-details-marker { display: none; }
#pmContact .faqItem summary h3.faqVraag { font: 700 14.5px 'Inter', sans-serif; line-height: 1.4; color: var(--inkt); }
#pmContact .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; }
#pmContact .faqItem[open] summary .plus { transform: rotate(45deg); background: #eef2f7; }
#pmContact .antw { padding: 0 0 18px; }
#pmContact .antw > p { font-size: 14px; color: var(--grijs); line-height: 1.7; }
/* Een antwoord mag een noot hebben (bv. "je adres is pas zichtbaar na acceptatie").
   Geen van de zes huidige vragen gebruikt hem, maar de blueprint rendert hem wel
   zodra hij in het FAQ-bestand gezet wordt. Zelfde maat als op /veel-gestelde-vragen/. */
#pmContact .antwNoot { margin-top: 12px; font-size: 12.5px; color: var(--grijs-licht); line-height: 1.6; }
/* Prijstabel binnen een antwoord — zelfde opmaak als op /veel-gestelde-vragen/.
   .tabelScroll is geen luxe: in de linkerkolom van 536px past de tabel op een
   telefoon niet, en zonder eigen scrollvak zou de hele pagina zijwaarts schuiven. */
#pmContact .tabelScroll { margin-top: 14px; overflow-x: auto; }
#pmContact .vraagTabel { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
#pmContact .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); }
#pmContact .vraagTabel td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; line-height: 1.5; }
#pmContact .vraagTabel tr:last-child td { border-bottom: 0; }
#pmContact .vraagTabel td:last-child { font: 800 13.5px 'Inter', sans-serif; color: #5f8a0f; white-space: nowrap; }

#pmContact .antwLinks { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
#pmContact .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); }
#pmContact .antwLinks a:hover { border-color: var(--blauw); color: var(--blauw-donker); }
#pmContact .alleVragen { margin-top: 16px; 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); }
#pmContact .alleVragen:hover { border-color: var(--blauw); color: var(--blauw-donker); }

/* ══ FORMULIER ══ */
#pmContact .formKaart { background: #fff; border: 1px solid var(--lijn); border-radius: 20px; padding: 24px;
  box-shadow: 0 4px 14px rgba(15,23,42,.04); }
/* Eén ritme voor het hele formulier, zodat er geen twee verschillende gaten
   naast elkaar staan: 7px tussen een label en zijn veld, 18px tussen velden
   onderling, 22px voor de knoprij. De .duo is ALTIJD een grid; stond hij alleen
   in de tabletregel, dan raakten naam en e-mail op een telefoon elkaar zonder
   tussenruimte (Robbie, 02-09-2026). */
#pmContact .velden { display: grid; gap: 18px; }
#pmContact .duo { display: grid; grid-template-columns: 1fr; gap: 18px; }
#pmContact .veld { display: block; }
#pmContact .veld > span { display: block; font: 700 12.5px 'Inter', sans-serif; color: var(--inkt); margin-bottom: 7px; }
#pmContact .veld input, #pmContact .veld textarea {
  width: 100%; border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px;
  font-family: 'Albert Sans', -apple-system, sans-serif; font-size: 14.5px; color: var(--inkt);
  background: #fff; -webkit-appearance: none; appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#pmContact .veld textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
#pmContact .veld input:focus, #pmContact .veld textarea:focus {
  outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(0,175,239,.14); }
#pmContact .veld input::placeholder, #pmContact .veld textarea::placeholder { color: var(--grijs-licht); }
#pmContact .verstuurRij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
#pmContact .hulpKnop { display: inline-block; padding: 13px 26px; border-radius: 999px; border: 0;
  background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); color: #fff; text-decoration: none;
  font: 700 13.5px 'Inter', sans-serif; cursor: pointer; }
#pmContact .hulpKnop:hover { color: #fff; filter: brightness(1.05); }
#pmContact .hulpKnop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
/* Op een eigen regel onder de knop, over de volle breedte van de kaart. Naast de
   knop bleef er ~275px over en brak de zin midden in "je vraag / te beantwoorden"
   (Robbie, 02-09-2026). */
#pmContact .veldNoot { flex: 1 0 100%; font-size: 12.5px; color: var(--grijs-licht); line-height: 1.6; }

/* ══ HULP NODIG — exact het blok van de FAQ-pagina ══ */
#pmContact .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); margin-top: 18px; }
#pmContact .hulpFotos { flex: 0 0 auto; display: flex; }
#pmContact .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); display: block; }
#pmContact .hulpFotos img + img { margin-left: -16px; }
#pmContact .hulpTekst { flex: 1 1 280px; min-width: 0; }
#pmContact .hulpEyebrow { display: block; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .8px;
  text-transform: uppercase; color: var(--blauw); margin-bottom: 5px; }
#pmContact .hulpBlok h2 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 900;
  letter-spacing: -.4px; line-height: 1.25; color: var(--inkt); }
#pmContact .hulpBlok p { font-size: 13.5px; color: var(--grijs); line-height: 1.65; margin-top: 6px; }
#pmContact .hulpMail { display: inline-block; margin-top: 12px; font: 600 13.5px 'Inter', sans-serif;
  text-decoration: underline; text-underline-offset: 2px; }

/* ══ BEVESTIGING — bouw van #pmFaq .geenTreffer ══ */
#pmContact .dank { text-align: center; background: #fff; border: 1px solid var(--lijn);
  border-radius: 18px; padding: 40px 22px; }
#pmContact .dankRing { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px;
  background: #ecfbf4; display: flex; align-items: center; justify-content: center; color: #12a06f; }
#pmContact .dankKop { font: 900 20px 'Inter', sans-serif; letter-spacing: -.5px; color: var(--inkt); }
#pmContact .dankToel { font-size: 13.5px; color: var(--grijs); line-height: 1.65; margin: 10px auto 0; max-width: 420px; }
#pmContact .dankTerug { display: inline-block; margin-top: 18px; border: 0; background: none; cursor: pointer;
  font: 600 13px 'Inter', sans-serif; color: var(--grijs); text-decoration: underline; text-underline-offset: 3px; }
#pmContact .dankTerug:hover { color: var(--inkt); }

/* ══ EIND-CTA ══ */
#pmContact .eindCta { margin-top: 30px; background: var(--inkt); color: #fff; padding: 46px 0 52px; text-align: center; }
#pmContact .eindCta h2 { font-family: 'Inter', sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -.6px; color: #fff; }
#pmContact .eindCta .toel { font-size: 14px; color: #b6c6d8; line-height: 1.65; margin: 12px auto 20px; max-width: 520px; }
#pmContact .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); }
#pmContact .eindKnop .hoofd { font: 800 15px 'Inter', sans-serif; }
#pmContact .eindKnop .sub { font-size: 11.5px; opacity: .92; font-weight: 600; }
#pmContact .eindKnop:hover { color: #fff; filter: brightness(1.05); }

/* ══ VANAF TABLET ══ */
@media (min-width: 700px) {
  #pmContact .heroLicht { padding: 60px 0 48px; }
  #pmContact .heroLicht h1 { font-size: 40px; }
  #pmContact .heroToel { font-size: 15.5px; }
  #pmContact .sectieKop h2 { font-size: 21px; }
  #pmContact .faqItem { padding: 0 22px; }
  #pmContact .faqItem summary h3.faqVraag { font-size: 15.5px; }
  #pmContact .antw > p { font-size: 14.5px; }
  #pmContact .formKaart { padding: 28px 30px; }
  #pmContact .duo { grid-template-columns: 1fr 1fr; }
  #pmContact .hulpBlok { padding: 28px 30px; }
  #pmContact .hulpBlok h2 { font-size: 20px; }
  #pmContact .dankKop { font-size: 23px; }
  #pmContact .eindCta h2 { font-size: 27px; }
}

/* ══ VANAF DESKTOP: vragen links, formulier rechts ══ */
@media (min-width: 1000px) {
  /* De vragen houden een kleine voorsprong, maar het berichtblok is een
     gelijkwaardige kolom en geen zijbalk: 420px voelde weggestopt naast een
     kolom van 580 (Robbie, 02-09-2026). De tussenruimte iets kleiner, zodat
     beide kolommen er breedte bij krijgen in plaats van de goot. */
  #pmContact .inhoud { display: grid; grid-template-columns: minmax(0,1fr) 470px; gap: 38px; align-items: start; padding-top: 36px; }
  #pmContact .kolomRechts { position: sticky; top: var(--kop-ruimte); }
  #pmContact .blok { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) { #pmContact *, .pmKop * { transition: none !important; } }

/* ══ HET VERBORGEN VELD ══
   Uit beeld, maar NIET met display:none: sommige bots slaan velden die zo verstopt
   zijn juist over, en dan vangen we niets. Zo staat hij er wel, alleen ziet en
   bereikt niemand hem (aria-hidden en tabindex=-1 staan in de blueprint). */
#pmContact .valstrik { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══ FOUTMELDING ══
   Alleen zichtbaar als de JS er tekst in zet. role="alert" staat in de markup, dus
   een schermlezer leest hem voor op het moment dat hij verschijnt. */
#pmContact .formFout {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fdf1ee; border: 1px solid #f4d5cd;
  font-size: 13.5px; line-height: 1.6; color: #8a3521;
}
#pmContact .formFout a { color: #8a3521; text-decoration: underline; text-underline-offset: 2px; }

/* ══ KNOP TIJDENS HET VERSTUREN ══ */
#pmContact .hulpKnop[disabled] { opacity: .65; cursor: default; filter: none; }