/* /instructies/: een schakelaar klant/thuisbakker en per functie een kaart met clip (inc/instructies-functies.php).
   Zelfde opmaak binnen de beheerschil en op de losse pagina. Raster volgens CLAUDE.md: auto-fill, minimaal 280 px. */
.tb-ins{--ins-lijn:rgba(20,26,51,.09);--ins-rust:#FBF7F3}
.tb-instructies--los .tb-ins{max-width:1200px;margin:0 auto;padding:0 16px 72px}
.tb-ins-schakel{display:inline-flex;gap:4px;padding:4px;margin:0 0 24px;border:1px solid var(--ins-lijn);border-radius:14px;background:var(--ins-rust)}
.tb-ins-schakel button{display:inline-flex;align-items:center;gap:8px;height:42px;min-height:0;padding:0 16px;border:0;border-radius:10px;
  background:transparent;color:#2A2F45;font:600 14.5px/1 var(--tb-sans);cursor:pointer}
.tb-ins-schakel button span{font-weight:500;font-size:12.5px;color:#5A5F73}
.tb-ins-schakel button[aria-selected="true"]{background:#141A33;color:#fff}
.tb-ins-schakel button[aria-selected="true"] span{color:var(--tb-on-ink)}
.tb-ins-paneel[hidden]{display:none}
.tb-ins-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.tb-ins-kaart{display:flex;flex-direction:column;margin:0;border:1px solid var(--ins-lijn);border-radius:16px;background:#fff;overflow:hidden}
/* De hele clip, niet bijgesneden: onderin staat per stap de ondertitel (tools/instructies/opname.mjs). */
.tb-ins-clip{position:relative;aspect-ratio:390/844;background:var(--ins-rust);overflow:hidden;border-bottom:1px solid var(--ins-lijn)}
.tb-ins-clip video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.tb-ins-speel{position:absolute;left:50%;top:50%;width:60px;height:60px;min-height:0;margin:-30px 0 0 -30px;padding:0;border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:rgba(20,26,51,.82);color:#fff;cursor:pointer;transition:opacity .2s}
.tb-ins-speel svg{margin-left:3px}
.tb-ins-clip.speelt .tb-ins-speel{opacity:0}
.tb-ins-tekst{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.tb-ins-nr{margin:0;color:#6B7089;font:600 12px/1 var(--tb-sans);letter-spacing:.04em}
.tb-ins-tekst h2{margin:0;color:#141A33;font:600 17px/1.3 var(--tb-sans);letter-spacing:-.01em}
.tb-ins-tekst p{margin:0;color:#3C4157;font:400 14px/1.55 var(--tb-sans)}
.tb-ins-link{margin-top:auto;padding-top:8px;color:#BC5410;font:600 14px/1.3 var(--tb-sans);text-decoration:none}
.tb-ins-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  .tb-ins-schakel{display:flex}
  .tb-ins-schakel button{flex:1;justify-content:center;padding:0 10px}
}
/* De verwijzing naar het filmpje onder een antwoord op /veelgestelde-vragen/ (templates/tb-faq.php). */
.tb-faq-film{margin:12px 0 0}
.tb-faq-film a{display:inline-flex;align-items:center;gap:7px;color:#BC5410;font:600 14px/1.3 var(--tb-sans);text-decoration:none}
.tb-faq-film a:hover{text-decoration:underline;text-underline-offset:3px}