/* Afspraak in stappen — Brandscape
   Kleuren en maten komen uit de Elementor Style-tab en worden als
   custom properties op .spec-boek gezet. De !important-regels zijn
   nodig omdat themas hun knopstijl over elke <a> en <button> duwen. */

.spec-boek{
  --sb-vlak:#FFFFFF;
  --sb-kop:#1D423B;
  --sb-tekst:#2B3A36;
  --sb-accent:#1F6F6A;
  --sb-accent-diep:#1D423B;
  --sb-rand:#D9E2DE;
  --sb-tint:#EFF4F2;
  --sb-tekst-zacht:#5F6E6A;
  --sb-radius:14px;
  --sb-randdikte:1px;
  --sb-kolom:270px;
  --sb-gap:16px;
  --sb-kaart-padding:26px;
  --sb-avatar:58px;
  --sb-hover-shadow:none;

  display:block;width:100%;max-width:none;margin:0;
  font-family:inherit;font-size:16px;line-height:1.6;
  color:var(--sb-tekst);-webkit-font-smoothing:antialiased;
}
.spec-boek *,.spec-boek *::before,.spec-boek *::after{box-sizing:border-box}
.spec-boek p{margin:0}

/* voortgang */
.spec-boek .sb-rail{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 28px;padding:0}
.spec-boek .sb-stap{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--sb-tekst-zacht);white-space:nowrap}
.spec-boek .sb-bol{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;line-height:1;
  border:1px solid var(--sb-rand);background:var(--sb-vlak);color:var(--sb-tekst-zacht);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.spec-boek .sb-stap[data-actief="1"]{color:var(--sb-kop);font-weight:600}
.spec-boek .sb-stap[data-actief="1"] .sb-bol{background:var(--sb-accent);border-color:var(--sb-accent);color:#fff}
.spec-boek .sb-streep{width:44px;height:1px;background:var(--sb-rand);flex:none}
.spec-boek .sb-staplabel{transition:color .2s ease}
.spec-boek .sb-grid:focus{outline:none}

/* reset tegen themaknoppen */
.spec-boek .sb-kaart,
.spec-boek .sb-terug{
  -webkit-appearance:none!important;appearance:none!important;
  font-family:inherit!important;letter-spacing:normal!important;
  text-transform:none!important;text-decoration:none!important;
  background-image:none!important;box-shadow:none!important;
  min-height:0!important;min-width:0!important;height:auto!important;cursor:pointer;
}
.spec-boek .sb-terug{
  margin:0 0 0 auto!important;padding:6px 0!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  color:var(--sb-accent)!important;font-size:14px!important;font-weight:600!important;
  line-height:1.4!important;display:inline-flex!important;align-items:center;gap:7px;width:auto!important;
}
.spec-boek .sb-terug:hover{background:transparent!important;color:var(--sb-accent-diep)!important}
.spec-boek .sb-terug:focus-visible{outline:2px solid var(--sb-accent);outline-offset:3px}
.spec-boek .sb-terug[hidden]{display:none!important}

/* raster en kaarten */
.spec-boek .sb-grid{
  display:grid;width:100%;gap:var(--sb-gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--sb-kolom)),1fr));
}
.spec-boek .sb-kaart{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  text-align:left!important;width:100%!important;
  background:var(--sb-vlak)!important;color:var(--sb-tekst)!important;
  border:var(--sb-randdikte) solid var(--sb-rand)!important;
  border-radius:var(--sb-radius)!important;
  padding:var(--sb-kaart-padding)!important;margin:0!important;
  font-size:16px!important;font-weight:400!important;line-height:1.5!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  overflow-wrap:anywhere;
}
.spec-boek a.sb-kaart:hover,
.spec-boek button.sb-kaart:hover{
  background:var(--sb-vlak)!important;color:var(--sb-tekst)!important;
  border-color:var(--sb-accent)!important;
  box-shadow:var(--sb-hover-shadow)!important;transform:translateY(-3px);
}
.spec-boek .sb-kaart:focus-visible{outline:2px solid var(--sb-accent);outline-offset:3px}
.spec-boek span.sb-kaart{cursor:default}

.spec-boek .sb-avatar{
  width:var(--sb-avatar);height:var(--sb-avatar);border-radius:50%;flex:none;margin:0 0 16px;
  object-fit:cover;display:flex;align-items:center;justify-content:center;
  background:var(--sb-tint);color:var(--sb-kop);
  font-size:calc(var(--sb-avatar) * .28);font-weight:700;line-height:1;
}
.spec-boek .sb-rol{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sb-tekst-zacht);margin-bottom:6px;
}
.spec-boek .sb-naam{font-size:20px;line-height:1.25;font-weight:700;color:var(--sb-kop);margin:0 0 10px;display:block}
.spec-boek .sb-info{font-size:15px;line-height:1.55;color:var(--sb-tekst);margin:0 0 22px;display:block}
.spec-boek .sb-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.spec-boek .sb-tag{
  font-size:12px;line-height:1.2;padding:6px 11px;border-radius:100px;
  background:var(--sb-tint);color:var(--sb-kop);white-space:nowrap;
}
.spec-boek .sb-cta{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--sb-rand);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:15px;font-weight:700;color:var(--sb-accent);
}
.spec-boek .sb-kaart:hover .sb-cta{color:var(--sb-accent-diep)}
.spec-boek .sb-pijl{transition:transform .2s ease;font-size:17px;line-height:1;flex:none}
.spec-boek .sb-kaart:hover .sb-pijl{transform:translateX(4px)}

/* panels */
.spec-boek .sb-panel[hidden]{display:none}
.spec-boek .sb-panel{animation:sb-in .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes sb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:880px){
  .spec-boek .sb-rail{gap:10px}
  .spec-boek .sb-streep{width:24px}
}
@media (max-width:600px){
  .spec-boek .sb-grid{grid-template-columns:1fr}
  .spec-boek .sb-terug{margin:4px 0 0!important;width:100%!important}
}
@media (prefers-reduced-motion:reduce){
  .spec-boek .sb-panel{animation:none}
  .spec-boek .sb-kaart,.spec-boek .sb-pijl,.spec-boek .sb-bol{transition:none}
  .spec-boek .sb-kaart:hover{transform:none}
}