/* Jogwheel-component: lagen van buiten naar binnen, naar het voorbeeld van een CDJ */
.jog{position:relative;width:100%;max-width:520px;aspect-ratio:1;border-radius:50%;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;border:0;padding:0;touch-action:pan-y;
  background:radial-gradient(circle at 50% 40%,#2b2c2b 0,#161716 55%,#0d0e0d 100%);
  box-shadow:0 40px 80px rgba(0,0,0,.30),0 0 0 2px rgba(122,195,201,.25),0 0 40px rgba(122,195,201,.18)}
/* chromen buitenrand */
.jog .rand{position:absolute;inset:3.5%;border-radius:50%;background:conic-gradient(from 20deg,#f2f2f0,#9a9b99 12%,#e9e9e6 25%,#7d7e7c 40%,#f4f4f2 55%,#8e8f8d 70%,#ececea 85%,#f2f2f0);-webkit-mask:radial-gradient(circle closest-side,transparent 0 94%,#000 94.5%);mask:radial-gradient(circle closest-side,transparent 0 94%,#000 94.5%)}
/* ring met kuiltjes */
.jog .kuiltjes{position:absolute;inset:4.5%;border-radius:50%;background:radial-gradient(circle closest-side,transparent 0 78%,#1c1d1c 78.5%,#0f100f 100%);pointer-events:none}
.jog .kuiltjes i{position:absolute;left:50%;top:50%;width:4.6%;height:7%;margin:-3.5% 0 0 -2.3%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#2e2f2e,#0a0b0a 70%);box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
/* dunne chromen binnenring */
.jog .chroom{position:absolute;inset:26%;border-radius:50%;background:conic-gradient(from 200deg,#f0f0ee,#8a8b89 20%,#eeeeec 45%,#7c7d7b 65%,#f0f0ee);-webkit-mask:radial-gradient(circle closest-side,transparent 0 93%,#000 93.5%);mask:radial-gradient(circle closest-side,transparent 0 93%,#000 93.5%)}
/* donkere platter met labels */
.jog .ringdonker{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#242524,#121312 75%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.jog .labels{position:absolute;inset:28%;border-radius:50%;pointer-events:none}
.jog .labels span{position:absolute;left:50%;top:50%;font:600 9.5px/1 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:rgba(246,245,241,.6);white-space:nowrap;transition:color .4s}
.jog .labels span.aan{color:var(--turquoise)}
/* zijvlakken */
.jog .zij{position:absolute;inset:28%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 68deg,var(--turquoise) 68deg 112deg,transparent 112deg 248deg,var(--turquoise) 248deg 292deg,transparent 292deg);-webkit-mask:radial-gradient(circle closest-side,transparent 0 77%,#000 77.5% 100%);mask:radial-gradient(circle closest-side,transparent 0 77%,#000 77.5% 100%);opacity:.85;pointer-events:none}
/* witte ring, wijzer, koraalring, scherm */
.jog .wit{position:absolute;inset:33%;border-radius:50%;background:#f6f5f1;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.jog .wijzer{position:absolute;inset:33%;border-radius:50%;transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.jog .wijzer i{position:absolute;top:0;left:50%;width:12px;height:10%;margin-left:-6px;background:var(--zwart);border-radius:0 0 3px 3px}
.jog .koraal{position:absolute;inset:36.2%;border-radius:50%;background:var(--koraal)}
.jog .scherm{position:absolute;inset:38%;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--wit);overflow:hidden;
  background:radial-gradient(circle at 30% 30%,#d47763 0,transparent 45%),radial-gradient(circle at 75% 70%,#7ac3c9 0,transparent 50%),#1b1c1b}
.jog .scherm::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 50%)}
.jog .scherm strong{position:relative;display:block;font:400 clamp(13px,1.8vw,19px)/1.05 var(--kop);padding:0 12%;text-wrap:balance;letter-spacing:.01em}

/* tekst eronder, gecentreerd */
.jogmidden{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,4vw,56px) 0 clamp(60px,8vw,110px)}
.jogmidden .jog{max-width:min(520px,82vw)}
.jogtekst{margin-top:26px;display:flex;flex-direction:column;align-items:center}
.jogtekst.wissel{animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dots{display:flex;gap:4px;margin:0 0 16px;padding:0;list-style:none}
.dots button{width:22px;height:22px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-content:center}
.dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:#c8c9c7;transition:background .3s,transform .3s}
.dots button.aan::before{background:var(--zwart);transform:scale(1.25)}
.jogtekst h2{font:300 clamp(34px,4.4vw,60px)/1.02 var(--kop);margin:0 0 12px;max-width:22ch;color:var(--zwart)}
.jogtekst .sub{font:600 11px/1.6 var(--tekst);letter-spacing:.22em;text-transform:uppercase;color:#8c8d8a;margin:0 0 18px;max-width:60ch}
.jogtekst p{font-size:17px;line-height:1.7;color:var(--tekstgrijs);max-width:58ch;margin:0 0 14px}
.jogtekst .waar{margin-top:10px;max-width:58ch}
.jogtekst .waar h3{font:600 11px/1.5 var(--tekst);letter-spacing:.2em;text-transform:uppercase;color:var(--zwart);margin:0 0 14px}
.jogtekst .waar p{font-size:15.5px;line-height:1.6}
.jogtekst .knoprij{margin-top:10px}
/* kleine schermen: binnenwerk groter, kuiltjesband smaller */
@media (max-width:600px){
  .jog .kuiltjes i{width:4.2%;height:6.2%;margin:-3.1% 0 0 -2.1%}
  .jog .chroom{inset:20%}
  .jog .ringdonker,.jog .labels,.jog .zij{inset:22%}
  .jog .labels span{font-size:8.5px;letter-spacing:.12em}
  .jog .wit,.jog .wijzer{inset:29%}
  .jog .koraal{inset:32%}
  .jog .scherm{inset:34%}
  .jog .scherm strong{font-size:14px}
}

.jogtekst .principes{list-style:none;margin:6px 0 0;padding:0;max-width:58ch;text-align:left}
.jogtekst .principes li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.6;color:var(--tekstgrijs);margin:0 0 12px}
.jogtekst .principes li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--turquoise)}
.jogtekst .waar{text-align:left}
.jogtekst .waar ul{margin:0;padding-left:1.1em;color:var(--tekstgrijs);font-size:15.5px;line-height:1.6}
.jogtekst .waar li{margin:0 0 8px;padding-left:.3em}
.jogtekst .waar li::marker{color:var(--zwart)}
/* brede schermen: wiel links, tekst rechts ernaast */
@media (min-width:900px){
  .jogmidden{display:grid;grid-template-columns:minmax(360px,460px) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:start;text-align:left}
  .jogmidden .jog{max-width:460px;position:sticky;top:96px}
  .jogtekst{margin-top:12px;align-items:flex-start}
  .jogtekst h2{max-width:none}
  .jogintro{display:grid;grid-template-columns:minmax(360px,460px) minmax(0,1fr);column-gap:clamp(48px,6vw,96px)}
  .jogintro p{grid-column:2}
}
.jogtekst .waar ul.principes{padding-left:0}
.jogtekst .waar .principes li{padding-left:22px}