/* Bedrijfsfitness, gebouwd naar de keuze van Luuk (keuzebord 20 oktober 2026): optie 5C "Vragen en antwoorden".
   Foto met kop, drie cijfers, daarna de echte vragen. Op de computer wisselt de opbouw per vraag
   (de ontwerpcontrole vond bij elke sectie dezelfde opbouw en grote lege linkerkolommen).
   Alles hangt onder eigen klassen (apxbf-...), zodat de Webflow-opmaak er niet tussen komt. */

.apxbf { --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) { .apxbf { --rand: 32px; } }
.apxbf *, .apxbf *::before, .apxbf *::after { box-sizing: border-box; }
.apxbf h1, .apxbf h2, .apxbf h3, .apxbf p, .apxbf ul, .apxbf ol, .apxbf li { margin: 0; padding: 0; }
.apxbf ul, .apxbf ol { list-style: none; }
.apxbf p { font-family: Poppins, system-ui, sans-serif; font-weight: 400; line-height: 1.6; font-size: 1.0625rem; color: var(--licht); }
.apxbf strong { font-weight: 600; color: #fff; }
.apxbf h1, .apxbf h2, .apxbf h3 { font-family: Montserrat, sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.apxbf img { display: block; max-width: 100%; }
.apxbf a { color: inherit; }
.apxbf a:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 4px; }
.apxbf section { scroll-margin-top: calc(var(--apx-kop, 56px) + 16px); }
.apxbf-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

.apxbf .apxbf-label { display: block; font: 600 13px/1.2 Poppins, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.apxbf .apxbf-label--blauw { color: var(--blauw); margin-bottom: 12px; }
/* blauw haalt 5,1:1 op zwart en 4,5:1 op de kaartkleur, genoeg voor dit kleine label */

/* knoppen */
.apxbf-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.apxbf .apxbf-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px;
  border-radius: 8px; background: var(--blauw); border: 1px solid var(--blauw); color: #fff;
  font: 700 1.1875rem/1.2 Poppins, sans-serif; text-decoration: none; text-align: center; }
.apxbf .apxbf-knop:hover { background: #3F60E8; border-color: #3F60E8; }
.apxbf .apxbf-knop--lijn { background: transparent; border-color: var(--lijn2); font-weight: 600; font-size: 1.0625rem; }
.apxbf .apxbf-knop--lijn:hover { background: transparent; border-color: #fff; }
@media (max-width: 559px) { .apxbf-knoppen .apxbf-knop { width: 100%; } }

/* ---------- foto met kop ---------- */
.apxbf-held { position: relative; }
.apxbf-held__foto { position: relative; aspect-ratio: 4 / 5; max-height: 78svh; overflow: hidden; background: var(--kaart); }
.apxbf-held__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.apxbf-held__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, #000 8%, rgba(0,0,0,.75) 45%, rgba(0,0,0,0)); }
.apxbf-held__tekst { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 1; }
.apxbf-held h1 { font-size: clamp(2.5rem, 11vw, 5rem); margin: 10px 0; max-width: 11em; }
.apxbf-held .apxbf-held__zin { color: #D0D5DD; max-width: 30em; }
@media (min-width: 900px) {
  .apxbf-held__foto { aspect-ratio: 21 / 9; max-height: 640px; }
  .apxbf-held__foto img { object-position: 50% 78%; }
  .apxbf-held__foto::after { height: 75%; }
  .apxbf-held__tekst { bottom: 48px; }
}

/* ---------- drie cijfers ---------- */
.apxbf-balk { border-bottom: 1px solid var(--lijn); }
.apxbf-balk ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.apxbf-balk li { padding: 18px 10px 22px 0; }
.apxbf-balk li + li { border-left: 1px solid var(--lijn2); padding-left: 12px; }
.apxbf-balk li strong { display: block; font: 700 clamp(1.45rem, 6.8vw, 3.4rem)/1.05 Montserrat, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.apxbf-balk li span { display: block; margin-top: 6px; color: var(--licht); font-size: .82rem; line-height: 1.35; }
@media (min-width: 900px) {
  .apxbf-balk li { padding: 32px 24px 36px 0; }
  .apxbf-balk li + li { padding-left: 32px; }
  .apxbf-balk li span { font-size: 1rem; }
}

/* ---------- vragen: basis (telefoon) ---------- */
.apxbf-vraag { border-bottom: 1px solid var(--lijn); padding: 44px 0; }
.apxbf-vraag h2 { font-size: clamp(1.7rem, 6.6vw, 2.6rem); margin-bottom: 16px; }
.apxbf-antw p { max-width: 36em; }
.apxbf-antw p + p { margin-top: 12px; }

/* vraag 1: uitleg in twee kolommen op de computer */
@media (min-width: 900px) {
  .apxbf-vraag { padding: 72px 0; }
  .apxbf-vraag h2 { margin-bottom: 24px; }
  .apxbf-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 980px; }
  .apxbf-twee p + p { margin-top: 0; }
  .apxbf-vraag--uitleg h2 { max-width: 14em; }
}

/* vraag 2: de route, op de computer vier stappen naast elkaar */
.apxbf-kopregel__zin { margin-bottom: 8px; }
.apxbf-stappen { margin-top: 20px; }
.apxbf-stappen li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--lijn); }
.apxbf-stappen li:last-child { border-bottom: 1px solid var(--lijn); }
.apxbf-nr { grid-row: span 2; width: 44px; height: 44px; border-radius: 8px; background: var(--kaart); border: 1px solid var(--lijn2);
  display: grid; place-items: center; font: 700 1.05rem Montserrat, sans-serif; color: #fff; }
.apxbf .apxbf-stappen h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 2px; align-self: center; }
.apxbf .apxbf-stappen p { font-size: .97rem; }
.apxbf-stappen p a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 3px; }
@media (min-width: 900px) {
  .apxbf-kopregel { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: end; margin-bottom: 8px; }
  .apxbf-kopregel h2 { margin-bottom: 0; }
  .apxbf-kopregel__zin { margin-bottom: 4px; }
  .apxbf-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 36px; border-top: 1px solid var(--lijn2); }
  .apxbf-stappen li, .apxbf-stappen li:last-child { display: block; padding: 28px 28px 8px 0; border: 0; }
  .apxbf-stappen li + li { padding-left: 28px; border-left: 1px solid var(--lijn); }
  .apxbf-nr { margin-bottom: 20px; }
  .apxbf .apxbf-stappen h3 { font-size: 1.25rem; margin-bottom: 6px; }
}

/* vraag 3: kort antwoord, als smalle strook */
.apxbf-vraag--kort { background: var(--kaart); }
@media (min-width: 900px) {
  .apxbf-vraag--kort { padding: 44px 0; }
  .apxbf-vraag--kort .apxbf-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .apxbf-vraag--kort h2 { margin-bottom: 0; font-size: 2rem; }
}

/* vraag 4: werkgever, uitleg links en de nummers rechts */
.apxbf-punten { margin-top: 18px; }
.apxbf-punten li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--lijn); color: var(--licht); }
.apxbf-punten li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 10px; height: 2px; background: var(--blauw); }
.apxbf-nummers { display: grid; gap: 10px; margin-top: 32px; }
.apxbf .apxbf-nummers__kop { color: #fff; font-weight: 500; margin-bottom: 4px; }
.apxbf-nummers a { display: flex; flex-direction: column; justify-content: center; min-height: 76px; padding: 12px 18px;
  border: 1px solid var(--lijn2); border-radius: 8px; text-decoration: none; }
.apxbf-nummers a span { color: var(--licht); font-size: .85rem; }
.apxbf-nummers a strong { font: 700 1.3rem/1.25 Montserrat, sans-serif; overflow-wrap: anywhere; }
.apxbf-nummers a:hover { border-color: var(--blauw); }
@media (min-width: 600px) and (max-width: 899px) {
  .apxbf-nummers { grid-template-columns: 1fr 1fr; }
  .apxbf-nummers__kop, .apxbf-nummers a:last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .apxbf-vraag--werkgever h2 { max-width: 16em; }
  .apxbf-werkgever { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
  .apxbf-nummers { margin-top: 0; padding: 28px; background: var(--kaart); border-radius: 8px; }
}

/* vraag 5: beide vestigingen, met echte foto's */
.apxbf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.apxbf-duo a { display: block; text-decoration: none; }
.apxbf-duo__beeld { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--kaart); }
.apxbf-duo__beeld img { width: 100%; height: 100%; object-fit: cover; }
.apxbf .apxbf-duo h3 { font-size: 1.3rem; margin: 12px 0 2px; }
.apxbf .apxbf-duo p { font-size: .9rem; line-height: 1.45; }
.apxbf-meer { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--blauw); text-underline-offset: 4px; }
.apxbf-duo a:hover .apxbf-meer { color: var(--blauw); }
@media (min-width: 900px) {
  .apxbf-duo { gap: 24px; margin-top: 36px; }
  .apxbf-duo__beeld { aspect-ratio: 4 / 3; }
  .apxbf-duo a:first-child img { object-position: 50% 55%; }
  .apxbf-duo a:last-child img { object-position: 50% 30%; }
  .apxbf .apxbf-duo h3 { font-size: 1.6rem; margin-top: 18px; }
  .apxbf .apxbf-duo p { font-size: 1rem; }
}

/* slot: andere vraag, plus nog een keer de aanmeldknop */
.apxbf-slot { padding: 44px 0 56px; }
.apxbf-slot h2 { font-size: clamp(1.7rem, 6.6vw, 2.6rem); margin-bottom: 14px; }
.apxbf-slot p a { color: #fff; font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .apxbf-slot { padding: 72px 0 88px; }
  .apxbf-slot .apxbf-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
  .apxbf-slot .apxbf-knoppen { justify-content: flex-end; margin-top: 0; }
}

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