/* APEX: pagina /aanmelden (21 oktober 2026).
   Luuk koos ontwerp 11 optie A "Zoals XXL: alles op één pagina": vier stappen onder elkaar (vestiging, lidmaatschap,
   betalen, jouw keuze), bovenin vier rondjes die meelopen, onderin een vaste balk met Terug en Volgende.
   Alles staat onder .aan, zodat de Webflow-stijlen van de rest van de site er niet bij kunnen. */

.aan {
  --aan-kaart: #131416; --aan-lijn: #232323; --aan-lijn2: #475467; --aan-grijs: #98A2B3; --aan-licht: #B7BECC;
  --aan-blauw: #4E71FF; --aan-blauw2: #6A88FF;
  background: #000; color: #fff; font-family: Poppins, system-ui, sans-serif; font-size: 16px; line-height: 1.55;
}
.aan *, .aan *::before, .aan *::after { box-sizing: border-box; }
.aan [hidden] { display: none !important; }
/* :where houdt deze nulstelling zwak, zodat de eigen klassen hieronder altijd winnen */
.aan :where(h1, h2, p, ul, ol, li, dl, dt, dd, fieldset, legend, label) { margin: 0; padding: 0; }
.aan :where(fieldset) { border: 0; min-width: 0; }
.aan :where(label) { font-weight: inherit; }
.aan :where(ul, ol) { list-style: none; }
.aan :focus-visible { outline: 2px solid var(--aan-blauw); outline-offset: 3px; }
.aan-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ruimte onderin voor de vaste balk (hoogte meet het script) */
body { padding-bottom: var(--apx-balk, 132px); }
/* de WhatsApp-knop schuift boven de balk */
.apx-wa__knopvak, .apx-wa__toast { bottom: var(--apx-balk, 132px) !important; }

/* ---------- stappen bovenin ---------- */
.aan-stappen { position: sticky; top: var(--apx-kop, 0px); z-index: 20; background: #000; border-bottom: 1px solid var(--aan-lijn); }
.aan-stappen ol { display: flex; max-width: 760px; margin: 0 auto; padding: 14px 16px 10px; }
.aan-stappen li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--aan-grijs); text-align: center; }
.aan-stappen li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--aan-lijn2); z-index: 0; }
.aan-stappen li:first-child::before { display: none; }
.aan-stappen li.is-klaar::before, .aan-stappen li.is-nu::before { background: var(--aan-blauw); }
.aan-bol { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--aan-lijn2); background: #000; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px; color: var(--aan-licht); }
.aan-stappen li.is-klaar .aan-bol { background: var(--aan-blauw); border-color: var(--aan-blauw); color: #000; }
.aan-stappen li.is-nu { color: #fff; }
.aan-stappen li.is-nu .aan-bol { border-color: var(--aan-blauw); color: #fff; box-shadow: 0 0 0 4px rgba(78, 113, 255, .25); }
.aan-stappen li.is-overgeslagen .aan-bol { border-style: dashed; }

/* ---------- inhoud ---------- */
.aan-main { display: block; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.aan-titel { padding: 26px 0 2px; }
.aan-titel h1 { margin: 0; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--aan-blauw); }

.aan-blok { padding: 22px 0 30px; border-bottom: 1px solid var(--aan-lijn); scroll-margin-top: calc(var(--apx-kop, 0px) + 84px); }
.aan-blok:last-of-type { border-bottom: 0; }
.aan-blok h2 { margin: 0; font-family: Montserrat, Poppins, sans-serif; font-weight: 700; font-size: 30px; line-height: 1.08;
  letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.aan-blok h2:focus { outline: none; }
.aan-blok h2:focus-visible { outline: 2px solid var(--aan-blauw); outline-offset: 4px; }
.aan-zin { color: var(--aan-licht); font-size: 15px; margin: 6px 0 20px; }

/* keuzekaart met rondje rechts */
.aan-lijst { display: grid; gap: 18px; }
.aan-keuze { position: relative; display: block; border: 1.5px solid var(--aan-lijn2); border-radius: 8px; background: var(--aan-kaart);
  padding: 18px 60px 18px 16px; cursor: pointer; transition: border-color .15s; color: #fff; }
.aan-keuze:has(.aan-etiket) { padding-top: 26px; }
.aan-keuze input, .aan-rij input, .aan-soort input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.aan-keuze:has(input:focus-visible), .aan-rij:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.aan-keuze.is-gekozen, .aan-rij.is-gekozen { border-color: var(--aan-blauw); box-shadow: inset 0 0 0 1px var(--aan-blauw); }
.aan-rond { position: absolute; right: 18px; top: 22px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--aan-lijn2); background: #000; }
.is-gekozen > .aan-rond { border-color: var(--aan-blauw); background: radial-gradient(circle, var(--aan-blauw) 0 6px, #000 7px); }
.aan-etiket { position: absolute; top: -12px; left: 14px; background: var(--aan-blauw); color: #000; font-size: 12px; font-weight: 600;
  line-height: 1; padding: 6px 10px; border-radius: 4px; letter-spacing: .02em; }
.aan-etiket--wit { background: #fff; }
.aan-naam { display: block; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.aan-sub { display: block; color: var(--aan-licht); font-size: 14px; margin-top: 3px; }
.aan-vink { margin-top: 12px; display: grid; gap: 5px; }
.aan-vink li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: #fff; }
.aan-vink li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px;
  border-left: 2px solid var(--aan-blauw); border-bottom: 2px solid var(--aan-blauw); transform: rotate(-45deg); }
.aan-prijs { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.aan-prijs b { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.aan-prijs span { color: var(--aan-licht); font-size: 14px; }
.aan-bij { display: block; font-size: 13px; color: var(--aan-grijs); margin-top: 2px; }

/* persoonlijk of family */
.aan-soort { display: inline-flex; border: 1.5px solid var(--aan-lijn2); border-radius: 8px; padding: 3px; margin-bottom: 22px; }
.aan-soort label { position: relative; min-height: 44px; min-width: 120px; display: grid; place-items: center; padding: 0 16px;
  border-radius: 6px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--aan-licht); }
.aan-soort label.is-gekozen { background: #fff; color: #000; }
.aan-soort label:has(input:focus-visible) { outline: 2px solid var(--aan-blauw); outline-offset: 2px; }
.aan-famlijn { font-size: 13px; color: var(--aan-grijs); margin-top: 14px; }

/* betalen als rijen */
.aan-rijen { display: grid; gap: 12px; }
.aan-rij { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; border: 1.5px solid var(--aan-lijn2);
  border-radius: 8px; background: var(--aan-kaart); padding: 12px 60px 12px 16px; cursor: pointer; color: #fff; transition: border-color .15s; }
.aan-rij .aan-rond { top: 50%; margin-top: -13px; }
.aan-wat { flex: 1; }
.aan-wat b { display: block; font-weight: 600; font-size: 16px; }
.aan-wat small { display: block; color: var(--aan-grijs); font-size: 13px; }
.aan-extra { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--aan-blauw2); }
.aan-bedrag { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 19px; text-align: right; line-height: 1.15; }
.aan-bedrag span { display: block; }
.aan-bedrag small { display: block; font-family: Poppins, sans-serif; font-size: 12px; color: var(--aan-grijs); font-weight: 400; }

/* overzicht */
.aan-overzicht { border: 1.5px solid var(--aan-lijn2); border-radius: 8px; overflow: hidden; }
.aan-overzicht dl { display: grid; grid-template-columns: auto 1fr; }
.aan-overzicht dt, .aan-overzicht dd { padding: 13px 16px; border-bottom: 1px solid var(--aan-lijn); font-size: 15px; }
.aan-overzicht dt { color: var(--aan-grijs); }
.aan-overzicht dd { text-align: right; font-weight: 600; }
.aan-overzicht dd small { display: block; font-weight: 400; color: var(--aan-grijs); font-size: 13px; }
.aan-tot { background: var(--aan-kaart); padding: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aan-tot > span { color: var(--aan-licht); font-size: 14px; }
.aan-tot b { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; white-space: nowrap; text-align: right; }
.aan-tot b small { display: block; font: 400 13px Poppins, sans-serif; color: var(--aan-licht); }
.aan-leeg { color: var(--aan-grijs); font-size: 15px; padding: 16px; border: 1.5px dashed var(--aan-lijn2); border-radius: 8px; }
.aan-uitleg { font-size: 13px; color: var(--aan-grijs); margin-top: 12px; }

/* ---------- vaste balk onderin ---------- */
.aan-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #000; border-top: 1px solid var(--aan-lijn);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.aan-balk-in { max-width: 728px; margin: 0 auto; }
.aan-samen { font-size: 13px; color: var(--aan-licht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; margin-bottom: 8px; }
.aan-samen b { color: #fff; font-weight: 600; }
.aan-knoppen { display: flex; gap: 10px; }
.aan-terug { flex: none; min-height: 54px; min-width: 54px; padding: 0 16px; border: 1.5px solid var(--aan-lijn2); border-radius: 8px;
  background: #000; color: #fff; font: 600 15px Poppins, sans-serif; cursor: pointer; }
.aan-volgende { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border: 0; border-radius: 8px;
  background: var(--aan-blauw); color: #fff !important; font: 700 19px Poppins, sans-serif; text-decoration: none !important; cursor: pointer;
  transition: background .15s; white-space: nowrap; padding: 0 12px; }
/* hover alleen met een muis (op een telefoon blijft hover anders hangen na het tikken); donkerder blauw houdt witte tekst leesbaar */
@media (hover: hover) {
  .aan-keuze:not(.is-gekozen):hover, .aan-rij:not(.is-gekozen):hover, .aan-terug:hover { border-color: var(--aan-licht); }
  .aan-volgende:hover { background: #3B5BE0; }
}
/* op een smalle telefoon past "Verder met inschrijven" niet naast Terug: dan staat er alleen "Inschrijven" */
.aan-kort { display: none; }
@media (max-width: 479px) { .aan-lang { display: none; } .aan-kort { display: inline; } }
.aan-balk :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.aan-melding { font-size: 13px; color: #fff; }
.aan-melding:not(:empty) { margin-bottom: 8px; padding: 8px 12px; border-left: 3px solid var(--aan-blauw); background: var(--aan-kaart); }

@media (min-width: 900px) {
  .aan-stappen ol { max-width: 860px; }
  .aan-stappen li { font-size: 13px; }
  .aan-main { max-width: 860px; }
  .aan-blok h2 { font-size: 40px; }
  .aan-lijst.aan-twee { grid-template-columns: 1fr 1fr; }
  .aan-lijst.aan-drie { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .aan-lijst.aan-drie .aan-keuze, .aan-lijst.aan-drie .aan-keuze:has(.aan-etiket) { padding: 26px 18px 20px; }
  .aan-lijst.aan-drie .aan-rond { right: 16px; }
  .aan-balk-in { max-width: 828px; display: flex; align-items: center; gap: 20px; }
  .aan-samen { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; white-space: normal; }
  .aan-melding:not(:empty) { margin: 0; }
  .aan-knoppen { flex: none; width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .aan *, .aan *::before, .aan *::after { transition: none !important; }
}

/* De pagina heeft een eigen balk onderin; de zwevende WhatsApp-knop viel over de koppen (laatste audit 21 okt 2026). */
.apx-wa { display: none !important; }