/* Veelgestelde vragen — keuze bovenaan, daaronder uitklapbare antwoorden. */

.tb-faq .tb-redactie-kop p{color:var(--tb-muted);margin:6px 0 0;}

/* De radio's sturen alles aan en blijven bereikbaar voor het toetsenbord:
   verborgen met clip, niet met display:none — dat haalt ze uit de tabvolgorde. */
.tb-faq-radio{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.tb-faq-tabs{
  display:flex;gap:8px;margin:28px 0 24px;
  padding:6px;background:var(--tb-ground-alt);
  border-radius:999px;width:fit-content;max-width:100%;flex-wrap:wrap;
}
.tb-faq-tab{
  display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tb-h-ctrl);padding:0 22px;
  border-radius:999px;cursor:pointer;
  font-family:var(--tb-serif);font-size:15.5px;font-weight:600;
  color:var(--tb-muted);background:transparent;
  transition:background .16s ease, color .16s ease;
}
.tb-faq-tab:hover{color:var(--tb-ink);}
.tb-faq-aantal{
  font-family:var(--tb-sans, inherit);font-size:12.5px;font-weight:700;
  min-width:22px;padding:2px 7px;border-radius:999px;text-align:center;
  background:rgba(20,26,51,.07);color:var(--tb-muted);
}

/* Actief tabblad, en de bijbehorende zichtbaarheid. */
#tb-faq-bakkers:checked ~ .tb-faq-tabs label[for="tb-faq-bakkers"],
#tb-faq-klanten:checked ~ .tb-faq-tabs label[for="tb-faq-klanten"]{
  background:var(--tb-surface);color:var(--tb-ink);
  box-shadow:0 1px 2px rgba(20,26,51,.10);
}
#tb-faq-bakkers:checked ~ .tb-faq-tabs label[for="tb-faq-bakkers"] .tb-faq-aantal,
#tb-faq-klanten:checked ~ .tb-faq-tabs label[for="tb-faq-klanten"] .tb-faq-aantal{
  background:var(--tb-accent-text);color:#fff;
}
/* Zichtbare focus: de radio is verborgen, dus het label draagt hem. */
.tb-faq-radio:focus-visible ~ .tb-faq-tabs label[for="tb-faq-bakkers"],
.tb-faq-radio:focus-visible ~ .tb-faq-tabs label[for="tb-faq-klanten"]{
  outline:2px solid var(--tb-accent-text);outline-offset:2px;
}

.tb-faq-paneel{display:none;}
#tb-faq-bakkers:checked ~ .tb-faq-bakkers,
#tb-faq-klanten:checked ~ .tb-faq-klanten{display:block;}

.tb-faq-groep + .tb-faq-groep{margin-top:40px;}
.tb-faq-groep h2{
  font-family:var(--tb-serif);font-size:20px;font-weight:600;color:var(--tb-ink);
  margin:0 0 14px;
}

.tb-faq-item{
  border-top:1px solid var(--tb-line);
}
.tb-faq-groep .tb-faq-item:last-of-type{border-bottom:1px solid var(--tb-line);}
.tb-faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 2px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;color:var(--tb-ink);
}
.tb-faq-item summary::-webkit-details-marker{display:none;}
.tb-faq-item summary::after{
  content:"";flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid var(--tb-accent-line);
  border-bottom:2px solid var(--tb-accent-line);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.tb-faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px);}
.tb-faq-item summary:focus-visible{outline:2px solid var(--tb-accent-text);outline-offset:-2px;}
.tb-faq-antwoord{padding:0 2px 18px;max-width:68ch;}
.tb-faq-antwoord p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--tb-muted);}
.tb-faq-antwoord p:last-child{margin-bottom:0;}
.tb-faq-antwoord a{color:var(--tb-accent-text);}

@media (max-width:599px){
  .tb-faq-tabs{width:100%;}
  .tb-faq-tab{flex:1 1 auto;justify-content:center;padding:0 14px;font-size:14.5px;}
}

/* --- instructies: genummerde stappen ------------------------------------ */

.tb-stappen{
  list-style:none;margin:0;padding:0;counter-reset:stap;
  display:grid;gap:0;
}
.tb-stap{
  counter-increment:stap;
  position:relative;padding:22px 0 22px 62px;
  border-top:1px solid var(--tb-line);
}
.tb-stappen .tb-stap:last-child{border-bottom:1px solid var(--tb-line);}
/* Het nummer is de enige plek waar de accentkleur groot mag zijn: een cijfer
   in een cirkel, geen vlak. */
.tb-stap::before{
  content:counter(stap);
  position:absolute;left:0;top:20px;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--tb-serif);font-size:16px;font-weight:600;
  color:var(--tb-accent-text);background:var(--tb-ground-alt);
  border:1px solid var(--tb-accent-line);
}
.tb-stap-titel{
  font-family:var(--tb-serif);font-size:17px;font-weight:600;color:var(--tb-ink);
  margin:0 0 6px;line-height:1.3;
}
.tb-stap-tekst{max-width:68ch;}
.tb-stap-tekst p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--tb-muted);}
.tb-stap-tekst p:last-child{margin-bottom:0;}
.tb-stap-tekst a{color:var(--tb-accent-text);}

@media (max-width:599px){
  .tb-stap{padding-left:52px;}
  .tb-stap::before{width:32px;height:32px;font-size:14.5px;top:22px;}
}

/* De uitweg onderaan de veelgestelde vragen (Redactie-bord). */
.tb-faq-uitweg{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:var(--tb-container);margin:44px auto 0;
  padding:24px 28px;
  background:var(--tb-sand);border-radius:var(--tb-r-card);
}
.tb-faq-uitweg h2{
  margin:0 0 4px;font-family:var(--tb-serif);font-size:21px;font-weight:600;color:var(--tb-ink);
}
.tb-faq-uitweg p{margin:0;font-size:15px;color:var(--tb-muted);}
.tb-faq-uitweg .tb-btn{flex:none;}
@media (max-width:599px){
  .tb-faq-uitweg{padding:20px;}
  .tb-faq-uitweg .tb-btn{width:100%;}
}