/* Stippenscène: elke stip is één eenheid, per stap hergroeperen ze. Breed: tekststappen links, het podium rechts vast.
   Smal: het podium staat vast en de tekst van de stap wisselt onderin; de stappen zelf zijn dan alleen scrollruimte.
   Zonder JavaScript: alleen de kaarten, met de getallen per groep als lijst. */
.sv-stipblok{--st-rest:var(--sv-st-rest,#b7bdbb);--st-nadruk:var(--sv-merk);position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--sv-s6);
  max-width:1280px;margin-left:auto;margin-right:auto;padding:0 var(--sv-s6)}
.sv-st-stappen{position:relative;z-index:2}
.sv-st-stap{min-height:88vh;display:flex;align-items:center;padding:var(--sv-s4) 0}
.sv-st-stap:first-child{min-height:70vh}
.sv-st-kaart{width:100%;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s4)}
.sv-st-kaart p{margin:0;font-size:19px;line-height:1.55;color:var(--sv-inkt)}
.sv-st-cijfers{list-style:none;margin:var(--sv-s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sv-s2)}
.sv-st-cijfers li{display:flex;flex-direction:column;gap:4px;padding:var(--sv-s2);border-radius:var(--sv-radius-klein);background:var(--sv-bg-zacht);border:1px solid var(--sv-lijn)}
.sv-st-cijfers li.nadruk{background:var(--sv-merk-licht);border-color:var(--sv-merk-rand)}
.sv-st-cijfers b{font-family:var(--sv-font-kop);font-size:30px;line-height:1.1;font-weight:800;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums}
.sv-st-cijfers li.nadruk b{color:var(--sv-merk-tekst)}
.sv-st-cijfers span{font-size:15px;line-height:1.35;color:var(--sv-inkt-zacht)}
.sv-st-bron{display:block;padding-bottom:var(--sv-s6)}

.sv-st-podium{position:relative;display:flex;flex-direction:column;gap:var(--sv-s2)}
.sv-st-kop{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:600;color:var(--sv-inkt-zacht)}
.sv-st-kop i{width:14px;height:14px;border-radius:50%;background:var(--st-nadruk);flex:none}
.sv-st-doek{position:relative;flex:1;min-height:0}
.sv-st-veld,.sv-st-labels{position:absolute;inset:0}
.sv-st-veld i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--st-rest);will-change:transform;
  transition:transform .9s cubic-bezier(.65,0,.25,1),background-color .6s ease,width .6s ease,height .6s ease}
.sv-st-veld i.nadruk{background:var(--st-nadruk)}
.sv-st-veld.direct i{transition:none!important}
.sv-st-foto{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .45s ease;pointer-events:none}
.sv-st-foto.aan{opacity:1}
.sv-st-foto img{display:block;width:100%;height:100%;object-fit:contain}
.sv-st-labels{z-index:3;pointer-events:none}
.sv-st-label{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;animation:sv-st-in .5s ease .55s both}
.sv-st-label b{font-family:var(--sv-font-kop);font-size:32px;line-height:1.05;font-weight:800;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums}
.sv-st-label.nadruk b{color:var(--sv-merk-tekst)}
.sv-st-label span{font-size:15px;line-height:1.3;color:var(--sv-inkt-zacht);overflow-wrap:anywhere}
@keyframes sv-st-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sv-st-tekst{display:none}

/* met JavaScript, breed: podium vast rechts */
html.sv-js .sv-stipblok .sv-st-cijfers{display:none}
@media (min-width:901px){
  html.sv-js .sv-stipblok .sv-st-podium{position:sticky;top:var(--sv-kop);height:calc(100vh - var(--sv-kop));padding:var(--sv-s5) 0}
}
/* met JavaScript, smal: podium vast, de tekst van de stap wisselt onderin het podium */
@media (max-width:900px){
  .sv-stipblok{grid-template-columns:1fr;gap:0;padding:0 var(--sv-s3)}
  html.sv-js .sv-stipblok{display:flex;flex-direction:column}
  html.sv-js .sv-stipblok .sv-st-podium{order:-1;position:sticky;top:var(--sv-kop);height:calc(100vh - var(--sv-kop));height:calc(100svh - var(--sv-kop));padding:var(--sv-s3) 0 76px}
  /* onderin 76px vrij: daar staat de ronde inhoudsknop */
  html.sv-js .sv-stipblok .sv-st-stap{min-height:75vh;visibility:hidden}
  html.sv-js .sv-stipblok .sv-st-stap:first-child{min-height:40vh}
  html.sv-js .sv-stipblok .sv-st-stappen{margin-top:-60vh}
  html.sv-js .sv-stipblok .sv-st-tekst{display:block;min-height:120px;padding:var(--sv-s2) var(--sv-s3);background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius-klein);box-shadow:var(--sv-schaduw);font-size:17px;line-height:1.5;color:var(--sv-inkt)}
  html.sv-js .sv-stipblok .sv-st-tekst p{margin:0}
  html.sv-js .sv-stipblok .sv-st-bron{visibility:visible;padding-bottom:var(--sv-s4)}
  .sv-st-label b{font-size:28px}
}
html:not(.sv-js) .sv-st-podium{display:none}
/* minder beweging: geen vast podium, het eindbeeld boven de kaarten */
.sv-stipblok.sv-st-stil{display:flex!important;flex-direction:column}
.sv-stipblok.sv-st-stil .sv-st-podium{order:-1;position:relative!important;height:min(70vh,560px)!important;top:auto}
.sv-stipblok.sv-st-stil .sv-st-stap{min-height:0!important;visibility:visible!important;padding:var(--sv-s2) 0}
.sv-stipblok.sv-st-stil .sv-st-stappen{margin-top:0!important}
.sv-stipblok.sv-st-stil .sv-st-cijfers{display:grid!important}
.sv-stipblok.sv-st-stil .sv-st-tekst{display:none!important}
.sv-stipblok.sv-st-stil .sv-st-veld i,.sv-stipblok.sv-st-stil .sv-st-label{transition:none;animation:none}