/* Instructies-template (collectie Instructies), ontwerp A "tijdlijn" — Bet-Experts, 4-11-2026.
   Opbouw in Webflow: embed hero (.ins-hero) · sectie .ins-sec > .ins-grid > .ins-main (embed .ins-top, Rich Text .ins-stappen,
   Rich Text .ins-extra, embed CTA + kop, Collection List .ins-meer) + .ins-side (embed: inhoud, bookmakerkaart, Goed om te weten).
   instructies.js groepeert de stappen tot tijdlijnkaarten, zet de voortgangsbalk, de inhoudsopgave en de FAQ-kaarten.
   Vorige versie (ontwerp B van de inhoud-agent): ~/bet-experts/instructies/backup/instructies-2026-11-04-voor-ontwerp-A.css */
:root{--ins-g:#169A47;--ins-gh:#12833D;--ins-gl:#6CC08B;--ins-ink:#0F1621;--ins-tx:#4A5A52;--ins-mu:#7A8792;--ins-ln:#E3E8E5;--ins-bg:#F4F7F5;--ins-nav:69px}
@media (max-width:991px){:root{--ins-nav:59px}}

/* ---------- hero (zelfde opbouw als bx-hero op /live-kijken) ---------- */
.ins-hero,.ins-hero *{box-sizing:border-box}
.ins-hero{position:relative;display:block!important;width:100%;overflow:hidden;padding:92px 0 46px;background:#0A1017;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left!important}
.ins-hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 140% at 12% 0%,rgba(22,154,71,.16),transparent 55%)}
.ins-hero-in{position:relative;max-width:1320px;margin:0 auto;padding:0 50px}
.ins-hero-g{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:end}
.ins-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;font-size:13px;color:#6C7A86}
.ins-hero a.ins-crumb-a{color:#A9B7C2!important;font-size:13px!important;font-weight:400!important;text-decoration:none!important;transition:color .15s}
.ins-hero a.ins-crumb-a:hover{color:#6CC08B!important}
.ins-crumb-nu{color:#F2F6F4}
.ins-eb{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6CC08B}
.ins-eb::before{content:"";width:3px;height:13px;flex:none;background:#6CC08B}
.ins-hero h1.ins-h1{margin:0!important;font-family:Poppins,sans-serif!important;font-size:56px!important;font-weight:700!important;line-height:1.04!important;letter-spacing:-.03em!important;color:#F2F6F4!important;text-align:left!important;text-wrap:balance}
.ins-hero p.ins-sub{margin:18px 0 0!important;max-width:660px;font-size:18px!important;line-height:1.6!important;color:#A9B7C2!important;text-wrap:pretty}
.ins-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:600px;margin-top:28px}
.ins-tile{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.ins-tile small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6C7A86}
.ins-tile b{display:block;margin-top:6px;font:600 20px/1.2 Poppins,sans-serif;color:#F2F6F4;font-variant-numeric:tabular-nums}

/* bookmakerkaart (hero en zijbalk) */
.ins-bm{overflow:hidden;background:#fff;border:1px solid var(--ins-ln);border-radius:18px;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.ins-hero .ins-bm{border:0}
.ins-bm-logo{display:flex;align-items:center;justify-content:center;height:92px;padding:0 24px;background:#027B5B}
.ins-bm-logo img{display:block;max-width:150px;max-height:46px;width:auto;height:auto;object-fit:contain}
.ins-bm-b{padding:16px 18px}
.ins-bm-n{font:700 16px/1.3 Poppins,sans-serif;color:var(--ins-ink)}
.ins-bm-t{margin:4px 0 14px!important;font-size:14px!important;line-height:1.5!important;color:var(--ins-tx)!important}
.ins-side .ins-bm-logo{height:70px}.ins-side .ins-bm-logo img{max-height:36px;max-width:130px}
.ins-side .ins-bm-b{padding:14px 16px}
a.ins-btn{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:0!important;padding:0 18px!important;border-radius:12px;background:#169A47!important;color:#fff!important;font:600 15px/1 Poppins,sans-serif!important;text-decoration:none!important;transition:background-color .15s}
a.ins-btn:hover{background:#12833D!important}
a.ins-btn svg{width:16px;height:16px;flex:none}
.ins-k24{display:block;margin-top:8px;font-size:11.5px;line-height:1.4;color:var(--ins-mu);text-align:center}

@media (max-width:1100px){.ins-hero-g{grid-template-columns:minmax(0,1fr);gap:24px}.ins-hero .ins-bm{max-width:520px}}
@media (max-width:991px){.ins-hero{padding:84px 0 34px}.ins-hero-in{padding:0 24px}.ins-hero h1.ins-h1{font-size:40px!important}.ins-hero p.ins-sub{font-size:17px!important}}
@media (max-width:767px){.ins-hero{padding:80px 0 30px}.ins-hero-in{padding:0 16px}.ins-hero h1.ins-h1{font-size:32px!important}.ins-hero p.ins-sub{font-size:16px!important}
  .ins-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1.8fr);gap:8px;margin-top:22px}.ins-tile{padding:11px 10px}.ins-tile b{font-size:14px;white-space:nowrap}.ins-tile small{font-size:9.5px;letter-spacing:.05em}
  .ins-hero .ins-bm-logo{height:72px}}

/* ---------- contentsectie ---------- */
.ins-sec{display:block!important;background:var(--ins-bg);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ins-ink);text-align:left}
.ins-sec *{box-sizing:border-box}
.ins-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;max-width:1320px;margin:0 auto;padding:44px 50px 72px}
.ins-main{min-width:0}
.ins-side{position:sticky;top:calc(var(--ins-nav) + 24px);display:flex;flex-direction:column;gap:16px}
.ins-sec .w-embed{margin:0!important;padding:0!important}
@media (max-width:1100px){.ins-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding:28px 24px 64px}.ins-side{position:static}.ins-toc,.ins-side .ins-bm{display:none!important}}
@media (max-width:767px){.ins-grid{padding:22px 16px 56px;gap:32px}}

/* sectiekop (vbx) */
.ins-eb2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:#12833D}
.ins-eb2::before{content:"";width:3px;height:13px;flex:none;background:#169A47}
.ins-sec h2.ins-h2,.ins-extra h2{display:block;margin:0!important;padding:0!important;font-family:Poppins,sans-serif!important;font-size:26px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em!important;color:var(--ins-ink)!important;text-align:left!important;text-wrap:balance}
.ins-intro{margin:10px 0 0!important;font-size:15.5px!important;line-height:1.7!important;color:var(--ins-tx)!important}
@media (max-width:767px){.ins-sec h2.ins-h2,.ins-extra h2{font-size:22px!important}}

/* inhoudsopgave mobiel */
.ins-mtoc{display:none}
@media (max-width:1100px){
  .ins-mtoc{display:block;margin:0 0 26px;background:#fff;border:1px solid var(--ins-ln);border-radius:14px}
  .ins-mtoc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font:600 14px Poppins,sans-serif;color:var(--ins-ink)}
  .ins-mtoc summary::-webkit-details-marker{display:none}
  .ins-mtoc summary span{display:flex;align-items:center;gap:9px}.ins-mtoc summary span::before{content:"";width:3px;height:12px;background:#169A47}
  .ins-mtoc summary i{width:9px;height:9px;margin-top:-4px;border-right:2px solid #12833D;border-bottom:2px solid #12833D;transform:rotate(45deg);transition:transform .2s}
  .ins-mtoc[open] summary i{margin-top:4px;transform:rotate(-135deg)}
  .ins-mtoc ol{margin:0;padding:6px 16px 14px 36px;border-top:1px solid #EEF2EF}
  .ins-mtoc li{padding:7px 0;font-size:14px;line-height:1.4;color:var(--ins-tx)}
  .ins-mtoc a{color:var(--ins-ink)!important;text-decoration:none!important}}

/* ---------- voortgangsbalk (sticky, alleen tijdens de stappen) ---------- */
.ins-vg{position:sticky;top:var(--ins-nav);z-index:20;margin:0 0 24px;padding:12px 0;background:var(--ins-bg)}
.ins-vg-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px;color:var(--ins-mu)}
.ins-vg-t b{flex:none;font:600 13.5px Poppins,sans-serif;color:var(--ins-ink)}.ins-vg-t b em{font-style:normal;color:#12833D}
.ins-vg-t span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ins-vg-bar{display:flex;gap:5px}
.ins-vg-bar a{flex:1;height:5px;border-radius:9px;background:#DCE4DF;transition:background-color .25s}
.ins-vg-bar a.aan{background:#169A47}

/* ---------- tijdlijn (Rich Text Stappen) ---------- */
.ins-stappen{margin-top:20px}
.ins-st{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding-bottom:22px;scroll-margin-top:calc(var(--ins-nav) + 70px)}
.ins-st::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:#DCE4DF;transition:background-color .25s}
.ins-st:last-child{padding-bottom:0}.ins-st:last-child::before{display:none}
.ins-st.klaar::before{background:#169A47}
.ins-nr{position:relative;z-index:1;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:2px solid #DCE4DF;font:700 18px Poppins,sans-serif;color:var(--ins-mu);transition:background-color .25s,border-color .25s,color .25s}
.ins-st.klaar .ins-nr,.ins-st.nu .ins-nr{background:#169A47;border-color:#169A47;color:#fff}
.ins-st-c{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;padding:22px 22px 22px 24px;background:#fff;border:1px solid var(--ins-ln);border-radius:18px;transition:border-color .2s,box-shadow .2s}
.ins-st.nu .ins-st-c{border-color:rgba(22,154,71,.30);box-shadow:0 10px 26px rgba(15,22,33,.07)}
.ins-st-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#12833D}
.ins-stappen .ins-st h2{margin:6px 0 10px!important;padding:0!important;font:700 21px/1.25 Poppins,sans-serif!important;letter-spacing:-.01em!important;color:var(--ins-ink)!important;text-align:left!important}
.ins-stappen p{margin:0 0 12px!important;font-size:16px!important;line-height:1.7!important;color:var(--ins-tx)!important}
.ins-stappen p:last-child{margin-bottom:0!important}
.ins-stappen strong{color:var(--ins-ink)}
.ins-stappen figure{margin:0!important;padding:14px 14px 10px;align-self:start;background:#F1F6F3;border-radius:14px;max-width:none!important;width:auto!important}
.ins-stappen figure>div{width:100%!important}
.ins-stappen figure img{display:block;width:100%!important;max-width:200px!important;height:auto!important;margin:0 auto}
.ins-stappen figcaption{margin-top:8px!important;font-size:11.5px!important;line-height:1.45!important;color:var(--ins-mu)!important;text-align:center!important}
.ins-stappen blockquote{display:flex;gap:10px;margin:14px 0 0!important;padding:12px 14px!important;border:1px solid #D5EBDD!important;border-radius:12px;background:#F1F8F3;font-size:14.5px!important;line-height:1.6!important;color:#2E3B35!important}
.ins-stappen blockquote::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:#169A47 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6M10 14.5v.5' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ins-stappen blockquote strong{color:#12833D}
@media (max-width:767px){
  .ins-st{grid-template-columns:36px minmax(0,1fr);gap:12px}.ins-nr{width:36px;height:36px;font-size:15px}.ins-st::before{left:17px;top:36px}
  .ins-st-c{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px 16px}
  .ins-stappen .ins-st h2{font-size:19px!important}.ins-stappen p{font-size:15.5px!important}
  .ins-stappen figure img{max-width:220px!important}}

/* ---------- Extra info: in het kort, lukt het niet, FAQ ---------- */
.ins-extra{margin-top:8px}
.ins-blok{display:block!important;margin-top:56px;scroll-margin-top:calc(var(--ins-nav) + 24px)}
@media (max-width:767px){.ins-blok{margin-top:40px}}
.ins-extra table{width:100%!important;margin:18px 0 0!important;border-collapse:separate!important;border-spacing:0;overflow:hidden;background:#fff;border:1px solid var(--ins-ln);border-radius:16px;font-size:15px!important}
.ins-extra th{padding:12px 18px!important;border:0!important;border-bottom:1px solid var(--ins-ln)!important;background:#F7FAF8;font:700 11px 'Plus Jakarta Sans',sans-serif!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ins-mu)!important;text-align:left!important}
.ins-extra td{padding:13px 18px!important;border:0!important;border-top:1px solid #EEF2EF!important;vertical-align:top!important;line-height:1.55;color:var(--ins-tx)}
.ins-extra tbody tr:first-child td{border-top:0!important}
.ins-extra td:first-child{width:38%;color:var(--ins-ink)}
@media (max-width:640px){.ins-extra thead{display:none}.ins-extra table,.ins-extra tbody{display:block}.ins-extra tr{display:block;padding:12px 16px;border-top:1px solid #EEF2EF}
  .ins-extra tbody tr:first-child{border-top:0}.ins-extra td{display:block;width:auto!important;padding:0!important;border:0!important}.ins-extra td:first-child{margin-bottom:3px}}
.ins-lk{margin-top:18px;padding:20px 22px;background:#fff;border:1px solid var(--ins-ln);border-radius:18px}
.ins-lk>p{margin:0 0 10px!important;font-size:15px!important;color:var(--ins-tx)!important}
.ins-lk ul{list-style:none!important;margin:0!important;padding:0!important;counter-reset:l}
.ins-lk li{position:relative;margin:0!important;padding:12px 0 12px 40px!important;border-top:1px solid #EEF2EF;font-size:15px;line-height:1.6;color:var(--ins-tx)}
.ins-lk li:first-child{border-top:0}
.ins-lk li::before{counter-increment:l;content:counter(l);position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:8px;background:#FFF4E5;color:#B26A00;font:700 13px/26px Poppins,sans-serif;text-align:center}
.ins-lk strong{color:var(--ins-ink)}
@media (max-width:767px){.ins-lk{padding:14px 16px}}
.ins-faq{margin-top:18px}
details.ins-fq{background:#fff;border:1px solid var(--ins-ln);border-radius:14px;transition:border-color .15s}
details.ins-fq+details.ins-fq{margin-top:10px}
details.ins-fq[open],details.ins-fq:hover{border-color:rgba(22,154,71,.30)}
details.ins-fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:12px 18px}
details.ins-fq summary::-webkit-details-marker{display:none}
.ins-extra details.ins-fq h3{margin:0!important;padding:0!important;font:600 15.5px/1.4 Poppins,sans-serif!important;color:var(--ins-ink)!important;text-align:left!important}
details.ins-fq summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:#F1F4F2;transition:background-color .15s}
details.ins-fq summary i::before,details.ins-fq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:#12833D;transition:transform .2s}
details.ins-fq summary i::after{transform:rotate(90deg)}
details.ins-fq[open] summary i{background:#E8F5EC}details.ins-fq[open] summary i::after{transform:rotate(0)}
.ins-extra details.ins-fq p{margin:0!important;padding:0 18px 16px!important;font-size:15px!important;line-height:1.7!important;color:var(--ins-tx)!important}
.ins-slot{margin-top:22px}
.ins-slot p{margin:0 0 8px!important;font-size:14.5px!important;line-height:1.7!important;color:var(--ins-tx)!important}
.ins-slot em{color:var(--ins-mu);font-size:13px}
.ins-extra a,.ins-stappen a{color:#12833D!important;font-weight:600;text-decoration:underline!important;text-underline-offset:2px}

/* ---------- afsluitende CTA ---------- */
.ins-cta{display:grid;grid-template-columns:120px minmax(0,1fr) 230px;align-items:center;gap:20px;margin-top:40px;padding:16px;background:#fff;border:1px solid var(--ins-ln);border-radius:18px}
.ins-cta-l{display:flex;align-items:center;justify-content:center;height:76px;padding:0 12px;border-radius:12px;background:#027B5B}
.ins-cta-l img{display:block;max-width:92px;max-height:34px;width:auto;height:auto}
.ins-cta-t b{display:block;font:700 17px/1.3 Poppins,sans-serif;color:var(--ins-ink)}
.ins-cta-t span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--ins-tx)}
@media (max-width:767px){.ins-cta{grid-template-columns:84px minmax(0,1fr);gap:14px}.ins-cta-l{height:60px}.ins-cta-b{grid-column:1/-1}}

/* ---------- meer instructies (Collection List) ---------- */
.ins-meer-kop{margin-top:56px}
@media (max-width:767px){.ins-meer-kop{margin-top:40px}}
.ins-meer{margin-top:18px}
.ins-meer .w-dyn-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ins-meer .w-dyn-empty{display:none!important}
a.ins-mi{display:flex!important;align-items:center;gap:14px;height:100%;padding:14px 16px!important;background:#fff;border:1px solid var(--ins-ln);border-radius:14px;text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
a.ins-mi:hover{border-color:rgba(22,154,71,.30);box-shadow:0 10px 26px rgba(15,22,33,.07)}
a.ins-mi img{width:36px;height:36px;flex:none;object-fit:contain}
.ins-mi-t{display:block;min-width:0}
.ins-mi-t small{display:inline-block;margin-bottom:3px;padding:2px 8px;border-radius:999px;background:#EEF6F1;color:#12833D;font:700 10.5px/1.5 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.ins-mi-t b{display:block;font:600 14.5px/1.35 Poppins,sans-serif;color:var(--ins-ink)}
a.ins-mi::after{content:"\203A";margin-left:auto;font:600 20px Poppins,sans-serif;color:#12833D}
@media (max-width:640px){.ins-meer .w-dyn-items{grid-template-columns:minmax(0,1fr)}}

/* ---------- zijbalk ---------- */
.ins-toc{padding:16px 6px 10px;background:#fff;border:1px solid var(--ins-ln);border-radius:18px}
.ins-toc-h,.ins-gow-h{display:flex;align-items:center;gap:9px;padding:0 14px 10px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#12833D}
.ins-toc-h::before,.ins-gow-h::before{content:"";width:3px;height:11px;flex:none;background:#169A47}
.ins-toc ul{list-style:none;margin:0;padding:0;max-height:calc(100vh - 460px);min-height:120px;overflow-y:auto;scrollbar-width:thin}
.ins-toc li{margin:0;padding:0}
.ins-toc a{display:flex!important;align-items:center;gap:10px;padding:9px 14px!important;border-radius:9px;font-size:13.5px!important;font-weight:500!important;line-height:1.35;color:#4A5563!important;text-decoration:none!important;transition:background-color .15s,color .15s}
.ins-toc a:hover{background:#F9FBFA;color:var(--ins-ink)!important}
.ins-toc a i{width:6px;height:6px;flex:none;border-radius:50%;background:rgba(15,22,33,.18);transition:background-color .15s}
.ins-toc a.aan{background:rgba(22,154,71,.08);color:#12833D!important;font-weight:700!important}
.ins-toc a.aan i{background:#169A47}
.ins-gow{padding:20px;background:#111A21;border-radius:18px;color:#C9D3DA}
.ins-gow-h{padding:0 0 12px;color:#6CC08B}.ins-gow-h::before{background:#6CC08B}
.ins-gow dl{margin:0}
.ins-gow-r{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;line-height:1.45}
.ins-gow-r:first-child{border-top:0}
.ins-gow dt{flex:none;color:#8A97A0}
.ins-gow dd{margin:0;color:#F2F6F4;font-weight:600;text-align:right}
a.ins-gow-l{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px 14px!important;border-radius:12px;background:rgba(255,255,255,.06);color:#F2F6F4!important;font:600 13.5px Poppins,sans-serif!important;text-decoration:none!important;transition:background-color .15s}
a.ins-gow-l:hover{background:rgba(255,255,255,.1)}

/* ---------- zijbalk-fix (4-11): ruimte tussen de kaarten, review-link altijd bereikbaar, alleen de inhoudsopgave plakt mee ---------- */
.ins-side{position:static!important;top:auto!important;align-self:stretch!important}
.ins-side>.w-embed{display:flex!important;flex-direction:column;gap:16px;height:100%}
.ins-side .ins-bm{order:1}
.ins-side .ins-gow{order:2}
.ins-side .ins-toc{order:3;position:sticky;top:calc(var(--ins-nav, 72px) + 24px);max-height:calc(100vh - var(--ins-nav, 72px) - 48px);overflow:auto;overscroll-behavior:contain}
.ins-gow dd{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ins-gow dt{flex:0 1 auto;max-width:48%}
@media (max-width:1100px){.ins-side>.w-embed{height:auto}.ins-side .ins-toc{position:static;max-height:none}}