/* controles: controles als kaarten met icoon; groen is een status (vaste kleur), geen merkkleur */
.sv-controles{--ct-bg:var(--sv-bg-zacht);--ct-kaart:var(--sv-papier);--ct-rand:var(--sv-lijn);--ct-inkt:var(--sv-inkt-sterk);--ct-zacht:var(--sv-inkt-zacht);--ct-tegel:var(--sv-merk-licht);--ct-icoon:var(--sv-merk-tekst);--ct-tal:var(--sv-merk-tekst);--ct-grijs:#9aa09f;--ct-groen:#1B8055;--ct-groen-tekst:#16704A;
  background:var(--ct-bg);color:var(--ct-inkt);border-radius:var(--sv-radius);padding:var(--sv-s5);border:1px solid var(--ct-rand)}
.sv-controles.donker{--ct-bg:#0A0A0B;--ct-kaart:#16161A;--ct-rand:#2A2A30;--ct-inkt:#F5F5F6;--ct-zacht:#C9C9CE;--ct-tegel:#26231C;--ct-icoon:var(--sv-merk);--ct-tal:var(--sv-merk);--ct-grijs:#3A3A42;--ct-groen-tekst:#7EE0A1;border-color:transparent}
.sv-ct-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ct-tal)}
.sv-ct-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sv-s4);align-items:end;margin-bottom:var(--sv-s4)}
.sv-controles .sv-ct-kop h3{color:var(--ct-inkt);font-family:var(--sv-font-kop);font-weight:var(--sv-kop-gewicht);font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em;margin:var(--sv-s1) 0 0;max-width:24ch}
.sv-ct-tal{text-align:right}
.sv-ct-tal b{display:block;font-family:var(--sv-font-kop);font-size:clamp(48px,6vw,80px);line-height:1;color:var(--ct-tal);font-variant-numeric:tabular-nums}
.sv-ct-tal span{display:block;font-size:15px;color:var(--ct-zacht);margin-top:var(--sv-s1)}
.sv-ct-raster{display:grid;grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));gap:var(--sv-s2)}
.sv-ct-kaart{min-width:0;background:var(--ct-kaart);border:1px solid var(--ct-rand);border-radius:var(--sv-radius-klein);padding:var(--sv-s3);display:flex;flex-direction:column;gap:var(--sv-s1);transition:border-color .4s ease}
.sv-ct-kaart .sv-icoon{width:56px;height:56px;border-radius:14px;background:var(--ct-tegel);color:var(--ct-icoon);display:grid;place-items:center;margin-bottom:var(--sv-s1)}
.sv-ct-kaart .sv-icoon svg{width:28px;height:28px}
.sv-controles .sv-ct-kaart h4{margin:0;font-size:20px;line-height:1.2;color:var(--ct-inkt)}
.sv-ct-kaart p{margin:0;font-size:16px;line-height:1.5;color:var(--ct-zacht);flex:1}
.sv-ct-status{display:inline-flex;align-items:center;gap:var(--sv-s1);margin-top:var(--sv-s2);font-size:15px;font-weight:700;color:var(--ct-groen-tekst)}
.sv-ct-bol{width:28px;height:28px;border-radius:50%;background:var(--ct-groen);color:#fff;display:grid;place-items:center;transition:background .35s ease,transform .35s ease}
.sv-ct-bol svg{width:18px;height:18px}
.sv-ct-woord{transition:opacity .3s ease}
.sv-ct-balk{position:relative;margin-top:var(--sv-s3);height:48px;border-radius:999px;background:var(--ct-kaart);border:1px solid var(--ct-rand);overflow:hidden}
.sv-ct-vul{position:absolute;inset:0;background:linear-gradient(90deg,#1B8055,#25A86F);transform-origin:left;transition:transform 1s ease}
.sv-ct-eind{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;font-weight:700;color:#fff;transition:opacity .4s ease}
/* wachtstand: alleen met JavaScript en beweging. Grijs, daarna een voor een groen */
.sv-controles.wacht .sv-ct-bol{background:var(--ct-grijs);transform:scale(.85)}
.sv-controles.wacht .sv-ct-woord{opacity:0}
.sv-controles.wacht .sv-ct-status{color:var(--ct-zacht)}
.sv-controles.wacht .sv-ct-vul{transform:scaleX(0)}
.sv-controles.wacht .sv-ct-eind{opacity:0}
.sv-controles .sv-ct-kaart.groen .sv-ct-bol{background:var(--ct-groen);transform:none}
.sv-controles .sv-ct-kaart.groen .sv-ct-woord{opacity:1}
.sv-controles .sv-ct-kaart.groen .sv-ct-status{color:var(--ct-groen-tekst)}
.sv-controles.klaar .sv-ct-vul{transform:none}
.sv-controles.klaar .sv-ct-eind{opacity:1}
@media (max-width:900px){.sv-ct-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* telefoon: compacte rijen, icoon links met het vinkje op de hoek */
@media (max-width:600px){
  .sv-controles{padding:var(--sv-s3)}
  .sv-ct-kop{grid-template-columns:minmax(0,1fr);gap:var(--sv-s2)}
  .sv-ct-tal{text-align:left;display:flex;align-items:baseline;gap:var(--sv-s1)}.sv-ct-tal b{display:inline;font-size:48px}
  .sv-ct-raster{grid-template-columns:minmax(0,1fr)}
  .sv-ct-kaart{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--sv-s2);row-gap:4px;align-items:start;padding:var(--sv-s2)}
  .sv-ct-kaart .sv-icoon{width:44px;height:44px;border-radius:12px;margin:0;grid-row:1 / span 2}.sv-ct-kaart .sv-icoon svg{width:22px;height:22px}
  .sv-controles .sv-ct-kaart h4{grid-column:2;font-size:18px}.sv-ct-kaart p{grid-column:2}
  .sv-ct-status{position:absolute;left:calc(var(--sv-s2) + 28px);top:calc(var(--sv-s2) + 28px);margin:0}
  .sv-ct-bol{width:22px;height:22px;box-shadow:0 0 0 3px var(--ct-kaart)}.sv-ct-bol svg{width:14px;height:14px}.sv-ct-woord{display:none}
}