/* ==========================================================================
   Werkwijze — stappenraster.
   Eén component, overal gebruikt: de homepage (vier stappen) en elke
   dienstpagina (drie fases). Waardes komen uit Werkwijze.dc.html; waar een
   Beacon Light System-token dezelfde waarde heeft, staat het token er.

   Geen kaarten: het raster ís de tekening. Hairlines vormen de cellen, een
   knooppunt zit op de bovenrand van elke stap, en de blauwe rand loopt mee
   tot en met de actieve stap.
   ========================================================================== */

@keyframes bkn-flow{from{left:-180px}to{left:100%}}
@keyframes bkn-node{
  0%,100%{box-shadow:0 0 0 0 rgba(11,73,245,.34),0 0 12px 2px rgba(11,73,245,.45)}
  50%    {box-shadow:0 0 0 5px rgba(11,73,245,0),0 0 18px 4px rgba(11,73,245,.6)}
}

.wf{margin-top:clamp(52px,6.5vw,92px);position:relative;animation:bkn-rise .9s var(--ease-beacon) both}

/* Verticale maatstreepjes achter het hele blok, om de 92px. */
.wf__ticks{position:absolute;inset:-1px 0 0;pointer-events:none;opacity:.7;
  background-image:repeating-linear-gradient(to right,rgba(6,10,20,.05) 0 1px,transparent 1px 92px)}

/* Kopregel boven het raster. */
.wf__bar{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(6,10,20,.34)}
.wf__bar-right{display:flex;align-items:center;gap:10px}
.wf__live{display:block;width:5px;height:5px;border-radius:var(--radius-round);background:var(--blue);
  box-shadow:0 0 10px 2px rgba(11,73,245,.5)}
.wf__count{color:rgba(6,10,20,.5)}

/* Het raster zelf: rechter- en onderrand hier, linker- en bovenrand per cel. */
.wf__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  border-right:1px solid rgba(6,10,20,.1);border-bottom:1px solid rgba(6,10,20,.1)}

.wf__step{position:relative;display:flex;flex-direction:column;min-height:302px;
  padding:40px 30px 34px;border-left:1px solid rgba(6,10,20,.1);border-top:1px solid rgba(6,10,20,.16);
  transition:background .35s var(--ease-beacon);cursor:default}

/* Blauwe bovenrand en knooppunt: aan tot en met de actieve stap. */
.wf__edge{position:absolute;left:0;right:0;top:-1px;height:1px;opacity:0;
  background:linear-gradient(to right,var(--blue),rgba(11,73,245,.55));
  transition:opacity .45s var(--ease-beacon)}
.wf__step.is-done .wf__edge{opacity:1}

/* De wash markeert alleen de stap waar je nu op staat. */
.wf__wash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(11,73,245,.055),rgba(11,73,245,0) 62%);
  transition:opacity .45s var(--ease-beacon)}
.wf__step.is-now .wf__wash{opacity:1}

.wf__ring{position:absolute;left:30px;top:-4px;width:7px;height:7px;border-radius:var(--radius-round);
  background:var(--sand);border:1px solid rgba(6,10,20,.3)}
.wf__node{position:absolute;left:29px;top:-5px;width:9px;height:9px;border-radius:var(--radius-round);
  background:var(--blue);opacity:0;animation:bkn-node 4.5s var(--ease-beacon) infinite;
  transition:opacity .45s var(--ease-beacon)}
.wf__step.is-done .wf__node{opacity:1}
.wf__drop{position:absolute;left:33px;top:4px;width:1px;height:26px;
  background:linear-gradient(to bottom,rgba(6,10,20,.22),transparent)}
.wf__tick{position:absolute;top:0;width:1px;height:5px;background:rgba(6,10,20,.16)}

.wf__head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-left:20px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase}
.wf__k{color:rgba(6,10,20,.5)}
.wf__idx{color:rgba(6,10,20,.26)}

.wf__t{position:relative;margin:30px 0 0;font-size:27px;line-height:1.1;letter-spacing:-.028em;font-weight:var(--weight-medium)}
.wf__b{position:relative;margin:14px 0 0;max-width:23em;font-size:15.5px;line-height:1.62;
  color:rgba(6,10,20,.55);text-wrap:pretty}
.wf__spacer{flex:1;min-height:26px}

.wf__out{position:relative;display:flex;align-items:center;gap:10px;padding-top:16px;
  border-top:1px solid rgba(6,10,20,.09);font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(6,10,20,.34)}
.wf__out-dot{display:block;width:4px;height:4px;border-radius:var(--radius-round);background:rgba(11,73,245,.6)}

/* Lichtpuls die over de afgelegde bovenrand loopt. */
.wf__flow{position:absolute;left:0;top:-1px;height:1px;overflow:hidden;pointer-events:none;
  transition:width .5s var(--ease-beacon)}
.wf__flow i{position:absolute;top:0;width:180px;height:1px;animation:bkn-flow 6.5s var(--ease-beacon) infinite;
  background:linear-gradient(to right,rgba(11,73,245,0),var(--blue-soft),rgba(255,255,255,.9),rgba(11,73,245,0))}

/* Voortgangsbalk onder het raster. */
.wf__rail{position:relative;display:flex;align-items:center;gap:18px;padding-top:18px}
.wf__rail-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(6,10,20,.34)}
.wf__track{position:relative;flex:1;height:1px;background:rgba(6,10,20,.12)}
.wf__fill{position:absolute;left:0;top:0;height:1px;transition:width .5s var(--ease-beacon);
  background:linear-gradient(to right,rgba(11,73,245,.35),var(--blue));
  box-shadow:0 0 10px 1px rgba(11,73,245,.35)}

/* Toetsenbord: de stappen zijn bedienbaar, dus ze horen een focusring te hebben. */
.wf__step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media (max-width:600px){
  .wf__step{padding:34px 22px 28px;min-height:0}
  .wf__t{font-size:24px}

  /* Voortgangstekst eruit. De blauwe knoop vertelt hetzelfde, en op een
     telefoon brak "Voortgang · Stap 01 / 04" toch over de kopregel heen.
     "Traject · 04 fases" past links prima en blijft staan. */
  .wf__bar-right{display:none}

  /* Eén actieve stap tegelijk. Op de desktop staan de stappen naast elkaar
     en leest de doorlopende blauwe bovenrand als het afgelegde spoor; hier
     staan ze onder elkaar en leest datzelfde spoor als vier tegelijk
     oplichtende stappen. Alleen de stap waar je nu bent houdt zijn rand en
     knoop. De balk onder het raster blijft wel de voortgang tonen: dat is
     één bewuste voortgangsmeter, geen tweede actieve stap. */
  .wf__step.is-done .wf__edge,.wf__step.is-done .wf__node{opacity:0}
  .wf__step.is-now .wf__edge,.wf__step.is-now .wf__node{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .wf,.wf__node,.wf__flow i{animation:none}
}