/* Contact, gebouwd naar de keuze van Luuk (keuzebord 20 oktober 2026): optie 7A "Eerst je vestiging kiezen".
   Kies Meppel of Almelo, dan foto, belknop, WhatsApp, mail, route en bemande uren; daaronder een eigen formulier
   (geen Formester, geen reCAPTCHA). Alles hangt onder eigen klassen (apxct-...), zodat de Webflow-opmaak er niet tussen komt. */

.apxct { --kaart: #131416; --lijn: #232323; --lijn2: #475467; --grijs: #98A2B3; --licht: #B7BECC; --blauw: #4E71FF;
  --rand: 16px; display: block; background: #000; color: #fff; font: 400 16px/1.6 Poppins, system-ui, sans-serif; }
@media (min-width: 768px) { .apxct { --rand: 32px; } }
.apxct *, .apxct *::before, .apxct *::after { box-sizing: border-box; }
.apxct h1, .apxct h2, .apxct h3, .apxct p, .apxct dl, .apxct dt, .apxct dd { margin: 0; padding: 0; }
.apxct p { font-family: Poppins, system-ui, sans-serif; font-weight: 400; line-height: 1.6; font-size: 1rem; color: var(--licht); }
.apxct h1, .apxct h2, .apxct h3 { font-family: Montserrat, sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.apxct img { display: block; max-width: 100%; }
.apxct a { color: inherit; }
.apxct a:focus-visible, .apxct button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; }
.apxct section { scroll-margin-top: calc(var(--apx-kop, 56px) + 16px); }
.apxct-iconen, svg.apxct-iconen { position: absolute; width: 0; height: 0; overflow: hidden; }
.apxct-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

/* knoppen */
.apxct .apxct-knop { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 22px;
  border-radius: 8px; background: var(--blauw); border: 1px solid var(--blauw); color: #fff; cursor: pointer;
  font: 700 1.1875rem/1.2 Poppins, sans-serif; text-decoration: none; }
.apxct .apxct-knop:hover { background: #3F60E8; border-color: #3F60E8; }
.apxct .apxct-knop--lijn { background: transparent; border-color: var(--lijn2); font-weight: 600; font-size: 1.0625rem; }
.apxct .apxct-knop--lijn:hover { background: transparent; border-color: #fff; }
.apxct-knop svg { width: 20px; height: 20px; flex: none; }

/* ---------- kop en keuze ---------- */
.apxct-intro { padding: 36px 0 24px; }
.apxct-intro h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); }
.apxct-intro p { font-size: 1.0625rem; margin-top: 10px; max-width: 30em; }
.apxct-kies { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 24px; padding: 5px; max-width: 460px;
  border: 1px solid var(--lijn2); border-radius: 10px; }
.apxct .apxct-kies button { min-height: 52px; margin: 0; border: 0; border-radius: 7px; background: transparent; color: var(--licht);
  font: 700 1.0625rem Montserrat, sans-serif; cursor: pointer; }
.apxct .apxct-kies button:hover { color: #fff; }
.apxct .apxct-kies button[aria-selected="true"] { background: #fff; color: #000; }
@media (min-width: 900px) { .apxct-intro { padding: 56px 0 32px; } }

/* ---------- vestiging ---------- */
.apxct-vest { padding-bottom: 40px; }
.apxct-vest[hidden] { display: none; }
.apxct-raam { display: grid; gap: 22px; }
.apxct-beeld { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--kaart); }
.apxct-beeld img { width: 100%; height: 100%; object-fit: cover; }
.apxct-beeld--meppel { object-position: 50% 40%; }
.apxct-beeld--almelo { object-position: 50% 30%; }
.apxct-vest h2 { font-size: clamp(1.9rem, 7.4vw, 2.8rem); }
.apxct .apxct-adres { margin: 6px 0 20px; }
.apxct-acties { display: grid; gap: 10px; }
.apxct .apxct-acties .apxct-knop { justify-content: flex-start; }
.apxct-acties .apxct-knop span { margin-left: auto; font-weight: 500; font-size: .95rem; color: var(--licht); white-space: nowrap; }
.apxct-acties .apxct-knop:first-child span { color: #fff; font-weight: 600; }
.apxct-tijden { margin-top: 28px; border-top: 1px solid var(--lijn); }
.apxct .apxct-tijden h3 { font-size: 1.1rem; margin: 20px 0 8px; }
.apxct-tijden dl { display: grid; grid-template-columns: 1fr auto; }
.apxct-tijden dt, .apxct-tijden dd { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.apxct-tijden dt { color: var(--licht); }
.apxct-tijden dd { text-align: right; font-weight: 600; }
.apxct .apxct-tijden p { color: var(--grijs); font-size: .9rem; margin-top: 10px; }
@media (min-width: 560px) and (max-width: 899px) { .apxct-acties { grid-template-columns: 1fr 1fr; } .apxct-acties .apxct-knop:first-child { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .apxct-vest { padding-bottom: 64px; }
  .apxct-raam { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .apxct-beeld { aspect-ratio: 1 / 1; }
}

/* ---------- veelgestelde vragen ---------- */
.apxct-faq { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.apxct-faq a { display: grid; gap: 6px 24px; padding: 24px 0; text-decoration: none; }
.apxct-faq strong { font: 700 1.3rem/1.2 Montserrat, sans-serif; color: #fff; }
.apxct-faq__zin { color: var(--licht); font-size: .95rem; }
.apxct-faq__ga { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; margin-top: 8px; padding: 0 18px;
  border: 1px solid var(--lijn2); border-radius: 8px; font-weight: 600; }
.apxct-faq a:hover .apxct-faq__ga { border-color: #fff; }
@media (min-width: 700px) {
  .apxct-faq a { grid-template-columns: 1fr auto; align-items: center; padding: 32px 0; }
  .apxct-faq__zin { grid-column: 1; }
  .apxct-faq__ga { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- formulier ---------- */
.apxct-bericht { padding: 56px 0 64px; }
.apxct-bericht h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.apxct .apxct-uitleg { margin-top: 10px; max-width: 26em; }
@media (min-width: 900px) {
  .apxct-bericht { padding: 80px 0 88px; }
  .apxct-bericht .apxct-raam { grid-template-columns: 5fr 7fr; gap: 64px; }
}
.apxct-form { display: grid; gap: 18px; margin: 0; }
.apxct-form[hidden] { display: none; }
.apxct-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.apxct-twee { display: grid; gap: 18px; }
@media (min-width: 560px) { .apxct-twee { grid-template-columns: 1fr 1fr; } }
.apxct-veld { display: grid; gap: 6px; min-width: 0; }
.apxct-form label, .apxct-form legend { margin: 0; font: 500 .92rem/1.4 Poppins, sans-serif; color: #D0D5DD; }
.apxct-form legend { margin-bottom: 6px; padding: 0; }
.apxct-optie { color: var(--grijs); font-weight: 400; }
.apxct-form input[type=text], .apxct-form input[type=email], .apxct-form input[type=tel], .apxct-form textarea {
  width: 100%; min-height: 52px; margin: 0; padding: 12px 14px; background: var(--kaart); border: 1px solid var(--lijn2);
  border-radius: 8px; color: #fff; font: 400 1rem/1.4 Poppins, sans-serif; }
.apxct-form textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.apxct-form input:focus, .apxct-form textarea:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(78, 113, 255, .35); }
.apxct-form [aria-invalid="true"] { border-color: #fff; }
.apxct-form ::placeholder { color: #8C95A6; opacity: 1; }
.apxct-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.apxct-keuzes label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px;
  border: 1px solid var(--lijn2); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; color: #fff; }
.apxct-keuzes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.apxct-keuzes label:has(input:checked) { border-color: var(--blauw); background: #18213F; }
.apxct-keuzes label:has(input:focus-visible) { outline: 2px solid var(--blauw); outline-offset: 2px; }
.apxct-form .apxct-akkoord { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-top: 2px; color: var(--licht); font-size: .95rem; cursor: pointer; }
.apxct-akkoord input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blauw); color-scheme: dark; }
.apxct-akkoord a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.apxct .apxct-fout { color: #fff; font-size: .9rem; font-weight: 500; padding-left: 12px; border-left: 2px solid var(--blauw); }
.apxct-fout[hidden] { display: none; }
.apxct-form .apxct-knop { width: 100%; }
.apxct-form .apxct-knop[disabled] { opacity: .7; cursor: progress; }
@media (min-width: 560px) { .apxct-form .apxct-knop { width: auto; justify-self: start; padding: 0 36px; } }
.apxct-melding { padding: 24px 22px; border: 1px solid var(--blauw); border-radius: 8px; }
.apxct-melding[hidden] { display: none; }
.apxct-melding strong { display: block; margin-bottom: 6px; font: 700 1.3rem/1.3 Montserrat, sans-serif; color: #fff; }
.apxct-melding a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.apxct-melding:focus { outline: none; }

/* ---------- reviews (Elfsight, stond al op de pagina) ---------- */
.apxct-reviews { padding: 0 0 48px; }
.apxct-reviews:not(:has(.elfsight-app-ef1ba220-526e-4a43-ad38-43b3a352f4e5 *)) { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .apxct *, .apxct *::before, .apxct *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Deze pagina heeft eigen WhatsApp-knoppen: de zwevende knop viel er op de telefoon overheen (eindcontrole 21 okt 2026). */
.apx-wa { display: none !important; }