/* ============================================================
   Alle Kwelpiepers — aanvulling op de huisstijl
   ============================================================ */
.leden-body{background:var(--blue-950)}
.leden-body .nav{position:fixed}

/* ---------- Kop ---------- */
.leden-kop{position:relative;padding:clamp(7rem,12vw,9.5rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.leden-kop h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.8rem,8.5vw,6rem);line-height:1;margin:.9rem 0 1.2rem;color:#fff;
}
.leden-kop .lead{max-width:62ch}
.leden-stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);margin-top:2.2rem}
.leden-stats div b{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--yellow);line-height:1.05}
.leden-stats div span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute-dark)}

/* ---------- Bezetting per instrument ---------- */
.groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.groep{
  position:relative;padding:1.4rem 1.5rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.groep:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--yellow),var(--shadow-1)}
.groep h3{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:1.35rem;line-height:1.15;color:var(--yellow);margin-bottom:.9rem;
}
.groep ul{display:flex;flex-wrap:wrap;gap:.4rem}
.groep li{
  padding:.35rem .75rem;border-radius:999px;font-size:.88rem;font-weight:600;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;
}
.groep .aantal{
  position:absolute;top:1.2rem;right:1.3rem;
  font-family:var(--font-display);font-size:1.6rem;color:rgba(255,255,255,.16);
}

/* ---------- Filterknoppen ---------- */
.knoppen{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.filterknop{
  padding:.5rem 1.05rem;border-radius:999px;font-size:.88rem;font-weight:700;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .3s,color .3s,transform .3s var(--ease);
}
.filterknop:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-1px)}
.filterknop.actief{background:var(--yellow);color:var(--ink);box-shadow:none}

/* ---------- Ledenlijst ---------- */
.ledenlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.6rem}
.lid{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.75rem 1rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:transform .4s var(--ease),background .3s,box-shadow .4s var(--ease);
}
.lid:hover{transform:translateX(4px);background:rgba(255,255,255,.09)}
.lid-naam{font-weight:700;color:#fff;font-size:.98rem}
.lid-jaren{font-size:.82rem;color:var(--txt-mute-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.lid.nu{background:linear-gradient(90deg,rgba(255,224,27,.16),rgba(255,224,27,.04));box-shadow:inset 0 0 0 1px rgba(255,224,27,.5)}
.lid.nu .lid-jaren{color:var(--yellow);font-weight:700}
.lid.verborgen{display:none}
.kruis{color:var(--yellow);opacity:.8;margin-right:.15rem}
.lid.herinnering .lid-naam{color:rgba(255,255,255,.82)}
.voetnoot{margin-top:1.2rem;font-size:.82rem;color:var(--txt-mute-dark)}

/* ---------- Eregalerij (compact) ---------- */
.erelijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:.55rem}
.ere{
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .65rem;align-items:baseline;
  padding:.65rem .85rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .4s var(--ease),background .3s,box-shadow .4s var(--ease);
}
.ere:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,224,27,.45)}
.ere-jaar{
  font-family:var(--font-display);font-size:.92rem;color:var(--ink);
  background:var(--yellow);border-radius:999px;padding:.1rem .55rem;line-height:1.35;
}
.ere-naam{font-weight:800;color:#fff;font-size:.94rem}
.ere-titel{grid-column:2;color:var(--yellow);font-size:.82rem;line-height:1.35;opacity:.92}

@media (max-width:720px){
  .ere-titel{grid-column:1/-1}
}

/* ---------- Knoppen naar de onderdelen ---------- */
.springknoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.springknoppen .btn{scroll-behavior:smooth}
#bezetting,#iedereen,#eregalerij{scroll-margin-top:84px}

/* ---------- Huidige leden per instrument ---------- */
.ledenlijst.per-instrument{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.instrumentblok{
  padding:1.1rem 1.2rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.instrumentblok h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:1.25rem;line-height:1.2;color:var(--yellow);margin-bottom:.7rem;
}
.instrumentblok h3 span{font-family:var(--font-body);font-size:.8rem;font-weight:800;color:rgba(255,255,255,.35)}
.instrumentblok ul{display:grid;gap:.4rem}
.instrumentblok .lid{padding:.55rem .8rem}

/* open plek in een instrumentgroep */
.lid.vacature{
  background:linear-gradient(90deg,rgba(255,45,32,.18),transparent);
  box-shadow:inset 0 0 0 1px rgba(255,45,32,.45);
}
.lid.vacature{padding:0}
.lid.vacature a{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;padding:.55rem .8rem;width:100%}
.lid.vacature .lid-naam{color:#ffb4ae}
.lid.vacature .lid-jaren{color:#ffb4ae;opacity:.8}

/* ---------- Instrumenticoontjes ---------- */
.instr-ic{width:2.5rem;height:1.9rem;flex:0 0 auto;color:var(--yellow)}
.groep h3{display:flex;align-items:center;gap:.55rem}
.groep h3 span{flex:1}
.instrumentblok h3 em{font-style:normal;flex:1}
.instrumentblok h3 .instr-ic{width:2.2rem;height:1.7rem}

/* open plek in een bezettingskaart */
.groep li.vrij{padding:0;background:rgba(255,45,32,.16);box-shadow:inset 0 0 0 1px rgba(255,45,32,.45)}
.groep li.vrij a{display:block;padding:.35rem .75rem;color:#ffb4ae;font-weight:700}
.groep li.vrij a:hover{color:#fff}

/* instrument wipt op bij zweven */
.instr-ic.wip{animation:instrumentWip .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes instrumentWip{
  0%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-9px) rotate(-8deg) scale(1.12)}
  70%{transform:translateY(0) rotate(4deg) scale(1.02)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}

/* Langere kop bij "Iedereen die muziek heeft gemaakt bij ons": wat kleiner en breder,
   anders valt hij op grote schermen in vijf regels uiteen. */
#bezetting .sec-head{max-width:min(100%,54rem)}
#bezetting .sec-head h2{font-size:clamp(1.55rem,4.4vw,3.5rem);line-height:1.02}

/* ============================================================
   Door de jaren: tijdbalk, speelduur en wie er samen speelden
   ============================================================ */
#tijdlijn{scroll-margin-top:84px}
.tijdbalk{
  margin-top:1.6rem;padding:clamp(1rem,2.4vw,1.8rem) clamp(.8rem,2vw,1.4rem) .8rem;
  border-radius:20px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.tb-plot{display:flex;align-items:flex-end;gap:clamp(1px,.35vw,5px);height:clamp(150px,24vh,230px);padding-bottom:26px}
.tb-jaar{
  flex:1;min-width:0;position:relative;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  border-radius:6px;transition:background .2s;
}
.tb-jaar:hover,.tb-jaar:focus-visible{background:rgba(255,255,255,.07);outline:none}
.tb-jaar i{display:block;width:100%;max-width:16px;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,var(--yellow),#ffae00)}
.tb-jaar.piek i{background:linear-gradient(180deg,#fff,var(--yellow));box-shadow:0 0 16px rgba(255,224,27,.5)}
.tb-getal{position:absolute;top:-4px;font-size:.62rem;font-weight:800;color:#fff;opacity:0;transition:opacity .2s}
.tb-jaar:hover .tb-getal,.tb-jaar:focus-visible .tb-getal,.tb-jaar.piek .tb-getal{opacity:1}
.tb-label{position:absolute;bottom:-20px;font-size:.56rem;color:rgba(255,255,255,.4)}
.tb-jaar.piek .tb-label{color:var(--yellow);font-weight:700}
.tb-uitleg{margin:1rem 0 0;font-size:.85rem;color:rgba(255,255,255,.6)}
.tb-uitleg b{color:var(--yellow)}

/* de ledenlijst met speelduur */
.ledenlijst .lid-knop{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(60px,1fr) auto;
  align-items:center;gap:.8rem;width:100%;text-align:left;
  background:none;border:0;padding:.5rem .2rem;cursor:pointer;color:inherit;font:inherit;
  border-radius:10px;transition:background .18s;
}
.ledenlijst .lid-knop:hover,.ledenlijst .lid-knop:focus-visible{background:rgba(255,255,255,.07);outline:none}
.lid-balk{position:relative;display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.1)}
.lid-balk i{position:absolute;top:0;bottom:0;border-radius:99px;background:rgba(255,255,255,.45)}
.lid.nu .lid-balk i{background:var(--yellow)}
.lid-jaren{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.lid-jaren b{font-size:.72rem;color:var(--yellow);font-weight:800}

/* de kaart die opengaat bij een naam */
.lid-detail{
  position:relative;margin-top:1.6rem;padding:clamp(1.2rem,3vw,2rem);border-radius:20px;
  background:linear-gradient(160deg,rgba(27,58,245,.22),rgba(6,10,43,.55));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.lid-detail[hidden]{display:none}
.lid-detail h3{margin:.5rem 0 .2rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.1rem);line-height:1}
.lid-detail h4{margin:1.2rem 0 .6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.lid-periode{margin:0;color:rgba(255,255,255,.75)}
.lid-periode b{color:var(--yellow)}
.lid-optredens{margin:.5rem 0 0;color:rgba(255,255,255,.7);font-size:.92rem}
.lid-optredens b{color:var(--yellow)}
.lid-samen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lid-samen button{
  display:inline-flex;align-items:baseline;gap:.45rem;cursor:pointer;
  padding:.35rem .75rem;border:0;border-radius:99px;font:inherit;font-size:.85rem;
  background:rgba(255,255,255,.08);color:#fff;transition:background .18s;
}
.lid-samen button:hover{background:var(--yellow);color:var(--ink)}
.lid-samen span{font-size:.7rem;opacity:.6}
.lid-samen button:hover span{opacity:.75}
.lid-meer{margin:.7rem 0 0;font-size:.8rem;color:rgba(255,255,255,.45)}
.lid-sluit{
  position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:.9rem;
}
.lid-sluit:hover{background:var(--yellow);color:var(--ink)}
@media (max-width:640px){
  .ledenlijst .lid-knop{grid-template-columns:1fr auto}
  .lid-balk{display:none}
  .tb-label{font-size:.46rem}
}
/* in de instrumentweergave is er geen ruimte voor de balk */
.ledenlijst .lid-knop.kort{grid-template-columns:minmax(0,1fr) auto}
.lijsthint{margin:-.6rem 0 1.4rem;font-size:.85rem;color:rgba(255,255,255,.55)}

/* ---------- instrumenten die je kunt horen ---------- */
.instrumentblok h3,.groep h3{cursor:pointer;-webkit-tap-highlight-color:transparent}
.instrumentblok h3 .instr-ic,.groep h3 .instr-ic{transition:transform .2s var(--ease)}
.instrumentblok h3:hover .instr-ic,.groep h3:hover .instr-ic{transform:scale(1.14) rotate(-6deg)}
.instrumentblok h3::after,.groep h3::after{
  content:"♪ klik";font-family:var(--font-body);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.3);margin-left:auto;align-self:center;
}
.instrumentblok h3:hover::after,.groep h3:hover::after{color:var(--yellow)}
.instrumentblok h3.klinkt .instr-ic,.groep h3.klinkt .instr-ic{animation:instrTrilt .5s var(--ease)}
@keyframes instrTrilt{
  0%{transform:scale(1)}
  25%{transform:scale(1.25) rotate(-9deg)}
  55%{transform:scale(1.1) rotate(7deg)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .instrumentblok h3.klinkt .instr-ic,.groep h3.klinkt .instr-ic{animation:none}
}