

#scene-eerlijk .sv-pn-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sv-s3);align-items:end}
#scene-eerlijk .sv-pn-rij b{display:block;white-space:nowrap;font-family:var(--sv-font-kop);font-size:clamp(24px,2.3vw,38px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--sv-inkt-sterk);margin-top:var(--sv-s1)}
#scene-eerlijk .sv-pn-rij small{display:block;font-size:14px;line-height:1.3;color:var(--sv-inkt-zacht)}
@media (max-width:1100px){#scene-eerlijk .sv-plak{max-height:none}#scene-eerlijk .sv-plak > *{transform:none!important}}
@media (max-width:600px){#scene-eerlijk .sv-pn-rij{grid-template-columns:1fr 1fr}#scene-eerlijk .sv-pn-rij b{font-size:24px}}

.jt-rooster{width:100%;max-width:620px;margin:0 auto;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s3)}
.jt-r-fase{font-family:var(--sv-font-kop);font-weight:700;font-size:18px;line-height:1.3;color:var(--sv-merk-tekst);min-height:48px;margin-bottom:var(--sv-s2);transition:opacity .25s}
.jt-r-fase.wissel{opacity:0}
.jt-r-raster{position:relative;--rij:52px}
.jt-r-kop,.jt-r-rij{display:grid;grid-template-columns:76px repeat(5,minmax(0,1fr)) 72px;gap:8px;align-items:center}
.jt-r-kop span{font-size:14px;font-weight:600;color:var(--sv-inkt-licht);text-align:center}
.jt-r-kop span:first-child{text-align:left}
.jt-r-rijen{position:relative;height:calc(var(--rij) * 6)}
.jt-r-rij{position:absolute;left:0;right:0;height:var(--rij);top:calc(var(--rij) * var(--pos,0));transition:top .8s var(--sv-ease),background .4s;border-radius:10px}
.jt-r-rij b{font-size:15px;font-weight:600;color:var(--sv-inkt-sterk);padding-left:6px;line-height:1.2}
.jt-c{display:block;height:34px;border-radius:8px;border:2px dashed var(--sv-lijn-sterk);background:transparent;transition:background .5s var(--sv-ease),border-color .5s;transition-delay:calc(var(--d,0) * 40ms)}
.jt-r-sc{text-align:right;opacity:0;transition:opacity .5s}
.jt-r-rij .jt-r-sc{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-right:6px}
.jt-r-rij .jt-r-sc em{font-style:normal;font-family:var(--sv-font-kop);font-weight:800;font-size:18px;color:var(--sv-inkt-sterk)}
.jt-r-rij .jt-r-sc i{display:block;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--sv-merk) calc(var(--s) * 1%),var(--sv-lijn) 0)}
.jt-rooster.dienst .jt-c{border-style:solid;border-color:var(--sv-merk-rand);background:var(--sv-merk-licht)}
.jt-rooster.uitkomst .jt-c[data-v="1"]{background:var(--sv-merk);border-color:var(--sv-merk)}
.jt-rooster.uitkomst .jt-c[data-v="2"]{background:var(--sv-accent);border-color:var(--sv-accent)}
.jt-rooster.uitkomst .jt-c[data-v="0"],.jt-r-leg .jt-c[data-v="0"]{background-color:var(--sv-papier);border:2px solid var(--sv-inkt-zacht);background-image:linear-gradient(45deg,transparent 44%,var(--sv-inkt-zacht) 44%,var(--sv-inkt-zacht) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--sv-inkt-zacht) 44%,var(--sv-inkt-zacht) 56%,transparent 56%);background-size:12px 12px;background-repeat:no-repeat;background-position:center}
.jt-r-leg .jt-c[data-v="1"]{background:var(--sv-merk);border:0}
.jt-r-leg .jt-c[data-v="2"]{background:var(--sv-accent);border:0}
.jt-rooster.uitkomst .jt-r-sc{opacity:1}
.jt-rooster.clara .jt-r-rij.gekozen b{color:var(--sv-merk-tekst)}
.jt-r-tag{display:none;font-size:13px;font-weight:700;color:var(--sv-merk-tekst)}
.jt-rooster.clara .jt-r-rij.gekozen .jt-r-tag{display:block}
.jt-r-sara{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:var(--sv-s2);padding:10px 14px;border-radius:12px;background:var(--sv-inkt-sterk);color:#fff;max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .4s var(--sv-ease),opacity .4s,padding .4s}
.jt-r-sara b{font-size:16px}
.jt-r-sara span{font-size:14px;opacity:.9}
.jt-r-sara .jt-r-reden{background:var(--sv-accent);color:var(--sv-op-accent);opacity:1;padding:2px 10px;border-radius:999px;font-weight:600}
.jt-rooster.sara .jt-r-sara{max-height:120px;opacity:1;padding-top:10px;padding-bottom:10px}
.jt-rooster.sara .jt-c.pols{animation:jtPols 1.4s ease-in-out infinite}
@keyframes jtPols{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px var(--sv-accent)}}
.jt-r-leg{display:flex;flex-wrap:wrap;gap:var(--sv-s2);margin-top:var(--sv-s2);font-size:14px;color:var(--sv-inkt-zacht);opacity:0;transition:opacity .5s}
.jt-r-leg span{display:flex;align-items:center;gap:8px}
.jt-r-leg .jt-c{width:22px;height:16px;border-radius:5px}
.jt-rooster.uitkomst .jt-r-leg{opacity:1}
.jt-voorbeeld{margin:var(--sv-s2) 0 0;font-size:14px;color:var(--sv-inkt-licht)}
@media (max-width:1100px){
  #scene-rooster .sv-plak,#scene-veld .sv-plak{max-height:none}
  #scene-rooster .sv-plak > *,#scene-veld .sv-plak > *{transform:none!important}
}
@media (max-width:600px){
  .jt-rooster{padding:var(--sv-s2)}
  .jt-r-raster{--rij:40px}
  .jt-r-kop,.jt-r-rij{grid-template-columns:52px repeat(5,minmax(0,1fr)) 44px;gap:4px}
  .jt-c{height:24px;border-radius:6px}
  .jt-r-rij b{font-size:14px;padding-left:2px}
  .jt-r-rij .jt-r-sc em{font-size:15px}
  .jt-r-fase{font-size:15px;min-height:40px;margin-bottom:var(--sv-s1)}
  .jt-rooster.clara .jt-r-rij.gekozen .jt-r-tag{display:none}
}

.jt-veld{position:relative;width:100%;max-width:640px;margin:0 auto;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s3)}
.jt-v-titel{font-size:15px;font-weight:600;color:var(--sv-inkt-zacht);margin-bottom:var(--sv-s2)}
.jt-v-kols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sv-s3)}
.jt-v-kol{display:flex;flex-direction:column;gap:var(--sv-s1);opacity:.3;transition:opacity .5s;min-width:0}
.jt-v-kol.aan{opacity:1}
.jt-v-mens{width:40px;height:40px;border-radius:50%;background:var(--sv-merk-licht);display:grid;place-items:center;color:var(--sv-merk-tekst)}
.jt-v-mens svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.jt-v-getal b{display:block;font-family:var(--sv-font-kop);font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums}
.jt-v-kol[data-k="jt"] .jt-v-getal b{color:var(--sv-merk-tekst)}
.jt-v-getal span{display:block;font-size:15px;font-weight:600;color:var(--sv-inkt-sterk);margin-top:4px;line-height:1.3}
.jt-v-stippen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-content:start;min-height:136px}
.jt-v-stippen i{aspect-ratio:1;border-radius:50%;background:var(--sv-merk);transform:scale(0);transition:transform .3s var(--sv-ease)}
.jt-v-kol[data-k="inc"] .jt-v-stippen i,.jt-v-kol[data-k="rs"] .jt-v-stippen i{background:var(--sv-inkt-licht)}
.jt-v-kol.aan .jt-v-stippen i{transform:scale(1)}
.jt-v-getal p{margin:2px 0 0;font-size:14px;line-height:1.35;color:var(--sv-inkt-zacht);min-height:38px}
.jt-v-bron{margin:var(--sv-s2) 0 0}
.jt-v-stempel{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%) rotate(-8deg) scale(1.3);padding:10px 22px;border:4px solid var(--sv-inkt-sterk);border-radius:12px;background:var(--sv-papier);font-family:var(--sv-font-kop);font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:.02em;text-transform:uppercase;color:var(--sv-inkt-sterk);text-align:center;line-height:1.1;opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1);pointer-events:none;white-space:nowrap}
.jt-v-stempel small{display:block;font-size:15px;letter-spacing:0;text-transform:none;font-weight:600}
.jt-veld.stempel .jt-v-stempel{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
@media (max-width:600px){.jt-veld{padding:var(--sv-s2)}.jt-v-kols{gap:var(--sv-s2)}.jt-v-stippen{gap:3px;grid-template-columns:repeat(6,1fr);min-height:110px}.jt-v-mens{display:none}.jt-v-getal span{font-size:14px}}

.jt-clara{width:100%;max-width:660px;margin:0 auto}
.jt-cl-vak{position:relative;aspect-ratio:1400/923;max-height:calc((100vh - var(--sv-kop)) * .62);margin:0 auto;border-radius:var(--sv-radius);overflow:hidden;box-shadow:var(--sv-schaduw);background:var(--sv-papier)}
.jt-cl-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--sv-ease)}
.jt-cl-b.aan{opacity:1}
.jt-clara .sv-bronrij{margin-top:var(--sv-s2)}
.jt-teller{position:absolute;right:16px;top:16px;width:96px;height:96px;border-radius:50%;background:var(--sv-papier);box-shadow:0 12px 30px -10px rgba(0,0,0,.35);display:grid;place-items:center;z-index:2;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--sv-ease)}
.jt-teller.aan{opacity:1;transform:none}
.jt-teller svg{position:absolute;inset:6px;width:84px;height:84px;transform:rotate(-90deg)}
.jt-teller circle{fill:none;stroke-width:5}
.jt-teller .bg{stroke:var(--sv-lijn)}
.jt-teller .fg{stroke:var(--sv-merk);stroke-linecap:round}
.jt-teller b{position:relative;font-family:var(--sv-font-kop);font-size:24px;font-weight:800;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums;line-height:1}
.jt-teller b::after{content:"s";font-size:.62em;margin-left:1px}
@media (max-width:1100px){#scene-clara .sv-plak{max-height:none}#scene-clara .sv-plak > *{transform:none!important}.jt-cl-vak{max-height:none}}
@media (max-width:600px){.jt-teller{width:80px;height:80px;right:10px;top:10px}.jt-teller svg{inset:5px;width:70px;height:70px}.jt-teller b{font-size:20px}}

.jt-reken{background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s5)}
.jt-k-kop h3{font-size:clamp(24px,2.4vw,32px);margin:var(--sv-s1) 0}
.jt-k-kop p{margin:0;font-size:16px;color:var(--sv-inkt-zacht)}
.jt-k-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sv-s3) var(--sv-s5);margin:var(--sv-s4) 0}
.jt-k-in label{display:flex;flex-direction:column;gap:var(--sv-s1)}
.jt-k-in label > span{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sv-s2);font-size:15px;font-weight:600;color:var(--sv-inkt-sterk)}
.jt-k-in b{font-family:var(--sv-font-kop);font-size:18px;color:var(--sv-merk-tekst);white-space:nowrap}
.jt-reken input[type=range]{width:100%;accent-color:var(--sv-merk);height:28px;margin:0}
.jt-k-uit{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:var(--sv-s2)}
.jt-k-cel{background:var(--sv-bg-zacht);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius-klein);padding:var(--sv-s3);display:flex;flex-direction:column;gap:6px;min-width:0}
.jt-k-cel small{font-size:14px;font-weight:600;color:var(--sv-inkt-zacht)}
.jt-k-cel b{font-family:var(--sv-font-kop);font-size:clamp(26px,2.6vw,36px);font-weight:800;line-height:1.05;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums}
.jt-k-cel.groot{background:var(--sv-merk-licht);border-color:var(--sv-merk-rand)}
.jt-k-cel.groot b{font-size:clamp(32px,3.4vw,48px);color:var(--sv-merk-tekst)}
.jt-k-cel em{font-style:normal;font-size:14px;color:var(--sv-inkt-licht)}
.jt-k-meter{margin-top:var(--sv-s5);padding-top:var(--sv-s4);border-top:1px solid var(--sv-lijn)}
.jt-k-meterkop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sv-s2);margin-bottom:var(--sv-s2)}
.jt-k-meterkop h4{margin:0;font-size:18px;line-height:1.3}
.jt-k-meterkop b{font-family:var(--sv-font-kop);font-size:36px;font-weight:800;color:var(--sv-merk-tekst)}
.jt-k-schaal{position:relative;padding:34px 11px 40px}
.jt-k-schaal input[type=range]{position:relative;z-index:1;display:block}
.jt-k-schaal span{position:absolute;left:calc(11px + (100% - 22px) * var(--x) / 100);transform:translateX(-50%);font-size:14px;font-weight:600;color:var(--sv-inkt-zacht);white-space:nowrap;line-height:1.2}
.jt-k-schaal span.boven{top:0}
.jt-k-schaal span.onder{bottom:0;transform:translateX(-12px)}
.jt-k-schaal span.onder::after{left:11px}
.jt-k-schaal span::after{content:"";position:absolute;left:50%;width:2px;height:12px;background:var(--sv-inkt-licht)}
.jt-k-schaal span.boven::after{top:calc(100% + 2px)}
.jt-k-schaal span.onder::after{bottom:calc(100% + 2px)}
.jt-k-oordeel{margin:var(--sv-s2) 0 0;font-size:16px;color:var(--sv-inkt-sterk);font-weight:600}
@media (max-width:760px){
  .jt-reken{padding:var(--sv-s3)}
  .jt-k-in{grid-template-columns:1fr}
  .jt-k-uit{grid-template-columns:1fr}
  .jt-k-schaal span{font-size:14px}
}

#scene-eerlijk .sv-pn-rij{align-items:start}
#scene-eerlijk .sv-pn-rij:has(> div[aria-hidden]){grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}
#scene-eerlijk .sv-pn-rij > div[aria-hidden]{align-self:start;margin-top:34px;text-align:center}

#scene-eerlijk .sv-sc-panelen{align-content:center;height:100%}
