/* bedrijfstraining.html */

/* ---------- Hero met productkaart ---------- */
.bt-hero-in{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, 460px);gap:clamp(36px, 6vw, 96px);align-items:end}
.bt-hero .lead{max-width:48ch}
.bt-kaart{color:var(--ink)}
.bt-kaart .prijsblok{background:var(--paper);box-shadow:0 30px 60px -30px oklch(0.17 0.01 120 / .55)}
.bt-kaart .eyebrow{color:var(--olive)}
.bt-kaart .pb-top{margin-top:14px}
.bt-kaart .pb-prijs .pb-op{display:block;margin-bottom:6px}
.bt-kaart .pb-prijs small{font-size:1rem;font-weight:700;color:var(--ink-2)}
.bt-kaart .pb-regels{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink)}
.bt-kaart .pb-btns{margin-top:26px}
.js .bt-kaart{animation:fadeUp 1.1s var(--ease) .4s both}

/* ---------- Voor wie ---------- */
.bt-wie{padding-top:clamp(72px, 9vw, 140px)}
.bt-wie-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px;padding-bottom:28px;border-bottom:1px solid var(--ink);margin-bottom:clamp(36px, 5vw, 72px)}
.bt-soorten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:clamp(1.125rem, 1.8vw, 1.5rem);font-weight:700;letter-spacing:-.015em}
.bt-soorten li:not(:last-child)::after{content:"/";margin:0 .6em;color:var(--olive-line);font-weight:400}
.bt-wie-grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(36px, 6vw, 96px);align-items:start}
.bt-wie-foto{margin:0;aspect-ratio:4/5}
/* De lijst begint gelijk met de bovenkant van de foto ernaast. */
.bt-wie-grid .genummerd{border-top:0}
.bt-wie-grid .genummerd > li:first-child{padding-top:0}

/* ---------- De dag ---------- */
.bt-dag{background:var(--panel);padding-top:clamp(72px, 9vw, 140px);margin-bottom:clamp(80px, 9vw, 140px)}
.bt-dag-grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(36px, 6vw, 96px);align-items:start}
.bt-dag-kop{position:sticky;top:calc(var(--header-h) + 80px)}
.bt-dag-lead{margin-top:20px;max-width:44ch;font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
.bt-dag-foto{margin:32px 0 0;aspect-ratio:5/4}
.bt-timeline .tijd{color:var(--olive)}
.bt-timeline li:not(.dag){grid-template-columns:104px 1fr}

/* ---------- Wat jij regelt ---------- */
.bt-regel-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:21px}
.bt-regel{padding:clamp(26px, 3.5vw, 52px)}
.bt-regel--jij{background:var(--sage-tint)}
.bt-regel--jij .checklist li::before{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.bt-regel--wij{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.bt-regel .checklist{gap:16px}
.bt-regel .checklist b{font-weight:700}
.bt-twijfel{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.bt-twijfel a{color:var(--ink);font-weight:700;text-underline-offset:3px}

/* ---------- Aanvraag ---------- */
.bt-aanvraag{background:var(--olive);color:var(--on-dark);padding-top:clamp(72px, 9vw, 130px);margin-bottom:clamp(80px, 9vw, 140px)}
.bt-av-grid{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);gap:clamp(36px, 6vw, 96px);align-items:start}
.bt-av-intro{position:sticky;top:calc(var(--header-h) + 80px)}
.bt-av-lead{margin-top:20px;max-width:40ch;font-size:clamp(1.0625rem, 1.4vw, 1.1875rem);line-height:1.65}
.bt-av-intro .genummerd{margin-top:36px;border-top-color:var(--olive-line)}
.bt-av-intro .genummerd > li{border-bottom-color:var(--olive-line)}
.bt-av-intro .genummerd > li > span{color:inherit;opacity:.85}
.bt-av-of{margin-top:36px;font-weight:700}
.bt-av-alt{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.bt-aanvraag :focus-visible{outline-color:var(--on-dark)}
.bt-av-paneel{background:var(--paper);color:var(--ink);padding:clamp(24px, 4vw, 56px);box-shadow:0 30px 60px -36px oklch(0.17 0.01 120 / .6)}
.bt-av-paneel :focus-visible{outline-color:var(--red)}
.bt-stap{border:0;margin:0;padding:0;min-width:0;display:grid;gap:22px}
.bt-stap-kop{font-size:clamp(1.5rem, 2.2vw, 1.875rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;outline-offset:6px}
.bt-velden{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:22px 18px}
.bt-breed{grid-column:1 / -1}
.bt-optie{font-weight:400;color:var(--ink-2)}
.bt-focus{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.bt-focus .keuze{align-items:center}
.bt-postcode{max-width:320px}
.bt-nav{display:flex;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.bt-nav #bt-volgende{margin-left:auto;min-width:200px}
.bt-klaar:empty{display:none}
.bt-samen{grid-template-columns:repeat(2, minmax(0, 1fr))}
.bt-samen dd{overflow-wrap:anywhere}

/* ---------- Losse plekken ---------- */
.bt-los-grid{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:clamp(36px, 6vw, 96px);align-items:start}
.bt-los-tekst p{margin-top:20px;max-width:44ch;line-height:1.65;color:var(--ink-2)}
.bt-los-tekst .btn{margin-top:30px}
.cards.bt-los-kaarten{grid-template-columns:repeat(2, minmax(0, 1fr))}

/* ---------- FAQ ---------- */
.bt-faq-grid{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:clamp(36px, 6vw, 96px);align-items:start}
.bt-faq .faq p{padding:0 0 24px;max-width:64ch;color:var(--ink-2);line-height:1.65}

/* ---------- B2B-bewijs (leeg) ---------- */
.bt-bewijs{display:grid;gap:14px}
.bt-bewijs-kader{display:grid;gap:22px;padding:clamp(22px, 3vw, 36px);background:var(--grey);border:1px dashed var(--field-line)}
.bt-bewijs-kop{font-size:clamp(1.125rem, 1.6vw, 1.375rem);font-weight:700;letter-spacing:-.015em}
.bt-bewijs-vakken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px}
.bt-bewijs-vakken li{display:grid;place-items:center;min-height:88px;background:var(--paper) repeating-linear-gradient(135deg, transparent 0 12px, oklch(0.95 0.003 120) 12px 13px);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .bt-hero-in{grid-template-columns:minmax(0, 1fr) minmax(0, 420px)}
}
@media (max-width: 900px){
  .bt-hero-in,.bt-wie-grid,.bt-dag-grid,.bt-av-grid,.bt-los-grid,.bt-faq-grid{grid-template-columns:minmax(0, 1fr)}
  .bt-dag-kop{position:static}
  /* Mobiel: het formulier direct onder de intro, overleggen pas eronder. De stappenlijst staat dan al in het formulier. */
  .bt-av-grid{gap:0}
  .bt-av-intro{display:contents}
  .bt-av-intro .genummerd{display:none}
  .bt-av-paneel{order:1;margin-top:32px}
  .bt-av-of,.bt-av-alt{order:2}
  .bt-av-of{margin-top:40px}
  .bt-wie-foto{aspect-ratio:16/10}
  .bt-dag-foto{aspect-ratio:16/9}
  .bt-regel-grid{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width: 760px){
  .bt-timeline li:not(.dag){grid-template-columns:84px 1fr}
  .bt-velden,.bt-samen{grid-template-columns:minmax(0, 1fr)}
  .bt-nav #bt-volgende{flex:1 1 auto;min-width:0}
  .cards.bt-los-kaarten{grid-template-columns:minmax(0, 1fr)}
  .bt-bewijs-vakken{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .bt-av-paneel{margin-inline:calc(-1 * var(--pad) + 8px)}
  .bt-kaart .pb-btns .btn{flex:1 1 100%}
}