/* Wat er is gaan werken — de versiegeschiedenis */

/* de lijst beheert zijn eigen hoogte; de browser hoeft niet mee te corrigeren */
html{overflow-anchor:none}

.cl-feiten{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.cl-feiten b{color:var(--tekst);font-variant-numeric:tabular-nums}

.cl-blok{padding-top:clamp(20px,4vw,50px)}
.cl{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(28px,6vw,100px);align-items:start}

/* ── zijpaneel: de versie die in beeld is ── */
.cl-zij{position:sticky;top:104px;padding:24px;display:grid;gap:22px;z-index:6}
.cl-teller{display:flex;flex-wrap:wrap;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.05em;line-height:1.05;margin-top:8px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-height:1.05em}
.cl-teller.is-lang{font-size:1.15rem;letter-spacing:-.02em;font-family:var(--mono);font-weight:500;line-height:1.35}
.cl-teller span{display:inline-block;background:linear-gradient(180deg,#fff,var(--lila));-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-teller span.is-rol{animation:clRol .45s var(--zacht)}
@keyframes clRol{from{transform:translateY(-.55em);opacity:0;filter:blur(4px)}}
.cl-teller-datum{margin-top:8px;font:500 .78rem/1.5 var(--mono);color:var(--tekst-zacht);overflow-wrap:anywhere;min-height:1.5em}

.cl-voortgang-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cl-pct{font:500 .78rem var(--mono);color:var(--oranje);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere;text-align:right}
.cl-balk{height:4px;margin-top:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.cl-balk i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--v,0));border-radius:99px;
  background:linear-gradient(90deg,var(--paars),var(--paars-licht));transition:transform .9s var(--zacht)}
.cl-geladen{margin-top:9px;font-size:.8rem;color:var(--tekst-dof);font-variant-numeric:tabular-nums}

.cl-filters{display:flex;flex-wrap:wrap;gap:6px}
.cl-chip{padding:.42em .95em;border-radius:99px;border:1px solid var(--glas-rand);font-size:.82rem;font-weight:600;color:var(--tekst-zacht);
  transition:color .25s,border-color .25s,background .25s}
.cl-chip:hover{color:var(--tekst);border-color:rgba(143,107,255,.55)}
.cl-chip.is-aan{color:#000;background:var(--tekst);border-color:var(--tekst)}

.cl-zij-extra{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--glas-rand)}
.cl-noot{font-size:.88rem;color:var(--tekst-zacht);margin-bottom:6px}
.cl-zijlink{font-size:.88rem;font-weight:600;color:var(--lila);transition:color .3s}
.cl-zijlink::after{content:" →";display:inline-block;transition:transform .4s var(--zacht)}
.cl-zijlink:hover{color:var(--tekst)}.cl-zijlink:hover::after{transform:translateX(4px)}

/* ── de lijst: een lichtlijn met knooppunten ── */
.cl-lijst{position:relative;padding-left:46px;min-width:0}
.cl-lijst::before{content:"";position:absolute;left:11px;top:6px;bottom:0;width:1px;
  background:linear-gradient(rgba(143,107,255,.0),rgba(143,107,255,.32) 60px,rgba(143,107,255,.32) calc(100% - 160px),transparent)}
.cl-licht{position:sticky;top:44vh;height:0;z-index:2;pointer-events:none}
.cl-licht::before{content:"";position:absolute;left:-35px;top:-90px;width:1px;height:180px;
  background:linear-gradient(transparent,var(--lila) 45%,#fff 50%,var(--lila) 55%,transparent);box-shadow:0 0 16px 1px rgba(143,107,255,.85)}
.cl-licht::after{content:"";position:absolute;left:-39px;top:-4.5px;width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 5px rgba(143,107,255,.18),0 0 22px 5px rgba(143,107,255,.9)}
.cl-vul{height:0}

.cl-versie{position:relative;padding-bottom:clamp(38px,5vw,60px)}
.cl-versie.is-in{animation:clIn .9s var(--zacht) both;animation-delay:calc(var(--d,0)*60ms)}
@keyframes clIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}}
.cl-knoop{position:absolute;left:-40.5px;top:.62em;width:11px;height:11px;border-radius:50%;background:#0b0616;border:1.5px solid rgba(143,107,255,.45);
  transition:background .5s,border-color .5s,box-shadow .5s,transform .5s var(--zacht);font-size:clamp(1.7rem,3.6vw,2.5rem)}
.cl-versie.is-lang-v .cl-knoop{font-size:1.2rem;top:.7em}
.cl-versie.is-voorbij .cl-knoop{background:var(--paars-licht);border-color:var(--paars-licht);box-shadow:0 0 12px rgba(143,107,255,.7)}
.cl-versie.is-actief .cl-knoop{background:var(--oranje);border-color:var(--oranje);box-shadow:0 0 0 5px rgba(255,122,26,.16),0 0 18px var(--oranje-gloed);transform:scale(1.2)}

.cl-versie header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:18px}
.cl-versie h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;min-width:0;color:var(--tekst-zacht);transition:color .5s}
.cl-versie.is-actief h2,.cl-versie:hover h2{color:var(--tekst)}
.cl-versie h2.is-lang{font-size:1.2rem;letter-spacing:-.01em;font-family:var(--mono);font-weight:500;line-height:1.4}
.cl-versie time{font:500 .8rem/1.5 var(--mono);color:var(--tekst-dof);overflow-wrap:anywhere;min-width:0}
.cl-versie header .label{padding:.3em .7em;border-radius:99px;border:1px solid rgba(255,122,26,.4);align-self:center}

.cl-groep{display:grid;grid-template-columns:108px minmax(0,1fr);gap:6px 16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.cl-soort{justify-self:start;align-self:start;margin-top:2px;padding:.28em .7em;border-radius:7px;font:500 .66rem var(--mono);letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--glas-rand);color:var(--tekst-zacht)}
.cl-soort[data-soort=nieuw]{color:var(--oranje);border-color:rgba(255,122,26,.4);background:rgba(255,122,26,.07)}
.cl-soort[data-soort=verbeterd]{color:var(--lila);border-color:rgba(143,107,255,.45);background:rgba(143,107,255,.09)}
.cl-soort[data-soort=opgelost]{color:var(--tekst);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.cl-groep ul{display:grid;gap:8px;color:var(--tekst-zacht);font-size:.98rem;line-height:1.55}
.cl-groep li{position:relative;padding-left:16px;max-width:62ch}
.cl-groep li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--tekst-dof)}
.cl-dank{display:block;margin-top:2px;font-size:.86rem;color:var(--tekst-dof)}
.cl-dank a{color:var(--lila);text-decoration:underline;text-decoration-color:rgba(205,191,255,.3);text-underline-offset:3px}
.cl-dank a:hover{color:var(--tekst)}

/* filteren */
.cl-lijst[data-filter=nieuw] .cl-versie:not([data-soorten~=nieuw]),
.cl-lijst[data-filter=verbeterd] .cl-versie:not([data-soorten~=verbeterd]),
.cl-lijst[data-filter=opgelost] .cl-versie:not([data-soorten~=opgelost]){display:none}
.cl-lijst[data-filter=nieuw] .cl-groep:not([data-soort=nieuw]),
.cl-lijst[data-filter=verbeterd] .cl-groep:not([data-soort=verbeterd]),
.cl-lijst[data-filter=opgelost] .cl-groep:not([data-soort=opgelost]){display:none}

/* het einde, dat het begin niet is */
.cl-einde{display:grid;gap:26px;justify-items:start;padding:6px 0 40px;min-height:220px}
.cl-schim{display:grid;gap:12px;width:min(100%,520px);opacity:0;transition:opacity .4s}
.cl-einde.is-bezig .cl-schim{opacity:1}
.cl-schim i{display:block;height:12px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(143,107,255,.22),rgba(255,255,255,.05));background-size:220% 100%;animation:clSchim 1.3s linear infinite}
.cl-schim i:first-child{height:26px;width:42%}.cl-schim i:last-child{width:68%}
@keyframes clSchim{to{background-position:-220% 0}}
.cl-einde .knop[disabled]{opacity:.55;pointer-events:none}
/* buiten het laden staat de schim stil */
.cl-einde:not(.is-bezig) .cl-schim i{animation-play-state:paused}

@media (max-width:900px){
  .cl{grid-template-columns:1fr;gap:26px}
  .cl-zij{top:70px;padding:12px 16px 14px;gap:10px;border-radius:18px;background:rgba(8,4,18,.86);margin:0 -4px}
  .cl-zij-hoofd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  .cl-zij-hoofd .label{display:none}
  .cl-teller{font-size:1.45rem;margin-top:0}
  .cl-teller.is-lang{font-size:.82rem}
  .cl-teller-datum{margin-top:0;font-size:.7rem;min-width:0}
  .cl-voortgang-kop,.cl-geladen,.cl-zij-extra{display:none}
  .cl-balk{margin-top:0}
  .cl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
  .cl-filters::-webkit-scrollbar{display:none}
  .cl-chip{font-size:.76rem;flex:none}
  .cl-lijst{padding-left:34px}
  .cl-lijst::before{left:7px}
  .cl-licht::before{left:-27px}.cl-licht::after{left:-31px}
  .cl-knoop{left:-32.5px}
  .cl-groep{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .cl-versie.is-in,.cl-teller span.is-rol{animation:none}
}