/* richting C · de bibliotheek. Held op inkt met de tellers, daarna een leeszone (ivoor) met het filter op
   systeem en branche en de kaarten. Detail per klus in het blad van sheet.js (data-sheet="klus"). */
.nav-note{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap;margin-right:6px}
@media(min-width:1180px){.nav-note{display:inline}}
@media(max-width:700px){.nav-cta-m{display:none!important}} /* op een telefoon staat de knop al vast onderin */

.bib-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:end}
@media(max-width:940px){.bib-hero-grid{grid-template-columns:minmax(0,1fr)}}
.bib-hero h1{max-width:13ch}
/* waar het draait: één staaf per systeem, lengte = aantal klussen */
.bib-sys{padding:clamp(20px,2.4vw,30px)}
.bib-bars{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column}
.bib-bars a{display:grid;grid-template-columns:minmax(92px,.9fr) minmax(0,2fr) 30px;gap:12px;align-items:center;min-height:40px;text-decoration:none;color:var(--fg);border-top:1px solid var(--line-soft);font-size:14.5px}
.bib-bars li:first-child a{border-top:0}
.bib-bars .bn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bib-bars .bb{height:8px;border-radius:4px;background:rgba(244,243,239,.07);overflow:hidden}
.bib-bars .bb i{display:block;height:100%;width:100%;border-radius:4px;background:var(--lime);transform-origin:0 50%;transform:scaleX(var(--w));transition:transform .9s var(--ease)}
.js .bib-sys:not(.in) .bb i{transform:scaleX(0)}
.bib-bars li:nth-child(n+2) .bb i{transition-delay:calc(var(--i,0) * 40ms)}
.bib-bars .bc{font:500 13px/1 var(--mono);color:var(--fg-70);text-align:right;font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){.bib-bars a:hover .bn{color:var(--lime)}}
.bib-bars a:active{opacity:.7}
.bib-sys .micro{margin-top:14px}
.bib-hero h1 [data-bib]{color:var(--lime)}
.bib-counts{margin-top:clamp(26px,3vw,40px);align-items:flex-end}
.bib-counts .stamp{align-self:center}
.bib-note{margin-top:18px}

/* filter: twee groepen chips. Mobiel schuift elke rij los van de pagina (geen horizontale paginascroll). */
.bib-filter{display:grid;gap:18px}
.bib-groep{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
.bib-lbl{font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);padding-top:11px}
.bib-chips{display:flex;flex-wrap:wrap;gap:8px}
.bib-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font:500 13px/1 var(--body);color:var(--fg);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .1s ease-out}
.bib-chip .n{font:500 11px/1 var(--mono);color:var(--fg-55);font-variant-numeric:tabular-nums}
.bib-chip:hover{border-color:var(--fg-55)}
.bib-chip:active{transform:scale(.96)}
.bib-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.bib-chip[aria-pressed="true"] .n{color:var(--lime)}
.bib-chip:disabled{opacity:.38;cursor:default}
@media(max-width:720px){
  .bib-groep{grid-template-columns:minmax(0,1fr);gap:6px}
  .bib-lbl{padding-top:0}
  .bib-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .bib-chips::-webkit-scrollbar{display:none}
}

.bib-status-rij{display:flex;align-items:center;gap:14px;margin:clamp(24px,3vw,36px) 0 18px;min-height:40px}
.bib-status{font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-70)}
.bib-wis{font:600 13px var(--body);background:none;border:0;color:var(--cobalt-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:40px;padding:0 4px}

/* kaarten */
.bib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.klus{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:var(--fg);box-shadow:0 1px 0 rgba(10,14,22,.04),0 24px 48px -40px rgba(10,14,22,.35);
  transition:border-color .18s,box-shadow .18s,transform .12s ease-out}
.klus[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.klus:hover{border-color:rgba(10,14,22,.36);box-shadow:0 1px 0 rgba(10,14,22,.04),0 28px 56px -36px rgba(10,14,22,.45)}}
.klus:active{transform:scale(.985)}
.klus:target{border-color:var(--cobalt-deep)}
.klus-kop{display:flex;justify-content:space-between;gap:10px;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.klus-thema{color:var(--cobalt-deep)}
.klus-br{color:var(--fg-55);text-align:right}
.klus-titel{font:700 17.5px/1.28 var(--body);text-transform:none;letter-spacing:0;font-stretch:100%;font-variation-settings:normal;text-wrap:pretty}
.klus-wat{font-size:14.5px;line-height:1.5;color:var(--fg-70);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.klus-res{font:500 12px/1.45 var(--mono);color:var(--fg);display:flex;gap:8px;align-items:baseline}
.klus-res::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cobalt-deep);transform:translateY(-1px)}
.klus-sys{list-style:none;padding:0;margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.klus-sys li{font:500 10.5px/1 var(--mono);letter-spacing:.04em;padding:6px 8px;border-radius:5px;background:rgba(10,14,22,.06);color:var(--fg-70)}
html.static .klus-wat{-webkit-line-clamp:unset}
/* tekstronde 2 (B1-B2): op de kaart titel plus één regel; de omschrijving staat in het klusblad (bib.js leest hem uit de kaart).
   Zonder JavaScript is er geen blad, dan blijft hij op de kaart. */
.klus-wat[hidden]{display:none}
html:not(.js) .klus-wat[hidden]{display:-webkit-box}

.bib-leeg{padding:clamp(20px,3vw,32px);max-width:720px}
.bib-leeg p{color:var(--fg-70)}
.bib-leeg b{color:var(--fg)}
.bib-leeg-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.zone-ivory .btn-ghost{border-color:rgba(10,14,22,.3);color:var(--fg)}
.bib-branches{margin-top:clamp(28px,3vw,44px);font-size:15px;color:var(--fg-70)}
.bib-branches a{color:var(--fg);font-weight:600;margin-right:12px;text-underline-offset:3px}

.bib-wie{margin-top:14px;color:var(--fg-70);max-width:60ch}
.sticky-cta .btn{flex-direction:column;gap:3px;min-height:54px;line-height:1.1}
.sticky-cta .btn small{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}

/* het blad met één klus */
.kb-kop{display:flex;flex-wrap:wrap;gap:8px 14px;font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--peri);padding-right:48px}
.kb-kop span+span{color:var(--fg-55)}
.kb h2{font:700 clamp(24px,3vw,32px)/1.18 var(--body);text-transform:none;letter-spacing:-.005em;font-stretch:100%;font-variation-settings:normal;margin-top:14px;padding-right:24px}
.kb-wat{margin-top:14px;color:var(--fg-70);font-size:17px;line-height:1.55;max-width:60ch}
.kb-res{margin-top:20px;display:flex;gap:10px;align-items:baseline;font:500 14px/1.45 var(--mono);color:var(--fg)}
.kb-res::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime)}
.kb-sys{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.kb-sys p{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);margin-bottom:10px}
.kb-sys ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kb-sys a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:500 13px var(--body);text-decoration:none;color:var(--fg)}
.kb-sys a:hover{border-color:var(--fg-55)}
.kb-note{margin-top:18px}
.kb-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.kb-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.kb-nav button{min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:rgba(244,243,239,.04);color:var(--fg);font:600 14px var(--body);cursor:pointer}
.kb-nav button:disabled{opacity:.35;cursor:default}
.kb-nav button:not(:disabled):active{transform:scale(.97)}
@media(max-width:420px){.kb-acties .btn{flex:1 1 100%}}