/* Mystery Tables, nieuws. De held: een tafel vol gasten bij kaarslicht, in de rechterhelft onder de menubalk.
   De mensen zitten in het midden van de foto; die houden we naast de titel in beeld. */
@media (min-width:1101px){.sv-held-beeld{inset:96px 0 0 50%;background-position:50% 50%}}

/* Eigen blokken: alleen --sv-*-tokens, afstanden uit de 8px-schaal. Beweging pas met .in (eigen.js),
   zonder JavaScript staat alles gewoon in beeld. */
.mt-l{font-size:14px;font-weight:700;color:var(--sv-inkt-licht);margin:0 0 var(--sv-s1)}

/* ---- de uitnodiging */
.mt-uitn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--sv-s8);align-items:center;margin-top:var(--sv-s8);margin-bottom:var(--sv-s8)}
.mt-uitn-tekst p{font-size:18px;line-height:1.55;color:var(--sv-inkt-zacht);margin:0 0 var(--sv-s2)}
.mt-uitn-tekst .mt-groot{font-family:var(--sv-font-kop);font-weight:800;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.03em;color:var(--sv-inkt-sterk);margin:0 0 var(--sv-s3)}
.mt-uitn-tekst .mt-groot span{color:var(--sv-inkt-licht)}
.mt-kaart{background:var(--sv-inkt-sterk);color:var(--sv-held-inkt);border-radius:var(--sv-radius);padding:var(--sv-s5);box-shadow:var(--sv-schaduw);transform:rotate(-2deg);transition:transform .8s var(--sv-ease)}
.mt-kaart p{margin:0}
.mt-kaart .mt-kaart-l{font-size:14px;font-weight:700;color:var(--sv-held-zacht);margin:0 0 var(--sv-s1)}
.mt-kaart-kop{font-family:var(--sv-font-kop);font-weight:800;font-size:32px;line-height:1.05;letter-spacing:-.02em}
.mt-kaart .mt-kaart-waar{font-size:17px;color:var(--sv-held-zacht);margin:var(--sv-s1) 0 var(--sv-s3)}
.mt-stoelen{display:flex;gap:var(--sv-s1);margin:0 0 var(--sv-s3)}
.mt-stoelen i{width:24px;height:24px;border-radius:50%;border:2px dashed var(--sv-held-zacht)}
.mt-stoelen i.vol{background:var(--sv-merk);border:2px solid var(--sv-merk)}
.mt-hints{list-style:none;margin:0 0 var(--sv-s3);padding:0;display:grid;gap:var(--sv-s2)}
.mt-hints li{font-size:17px;line-height:1.4;padding-left:var(--sv-s2);border-left:2px solid var(--sv-merk)}
.mt-hints li span{display:block;font-size:14px;font-weight:700;color:var(--sv-merk)}
.mt-kaart .mt-kaart-knop{display:inline-block;background:var(--sv-merk);color:var(--sv-op-merk);font-weight:700;font-size:16px;border-radius:999px;padding:12px 24px}
.sv-js .mt-uitn:not(.in) .mt-kaart{transform:rotate(-6deg) translateY(24px)}
.sv-js .mt-hints li{transition:opacity .5s var(--sv-ease),transform .5s var(--sv-ease);transition-delay:calc(.3s + var(--i)*.18s)}
.sv-js .mt-uitn:not(.in) .mt-hints li{opacity:0;transform:translateY(8px)}

/* ---- drie getallen, verspringend als een trap */
.mt-drie{margin-top:var(--sv-s8);margin-bottom:var(--sv-s8);border-top:1px solid var(--sv-lijn)}
.mt-drie-rij{display:grid;grid-template-columns:max-content minmax(0,360px);justify-content:start;gap:var(--sv-s5);align-items:center;padding:var(--sv-s3) 0 var(--sv-s3) calc(var(--i)*16.66%);border-bottom:1px solid var(--sv-lijn)}
.mt-drie-n{font-family:var(--sv-font-kop);font-weight:800;font-size:clamp(96px,13vw,184px);line-height:.85;letter-spacing:-.05em;color:var(--sv-inkt-sterk);min-width:1.1em}
.mt-drie-rij p{margin:0;font-size:18px;line-height:1.45;color:var(--sv-inkt-zacht)}
.mt-drie-rij b{display:block;font-family:var(--sv-font-kop);font-size:28px;line-height:1.1;color:var(--sv-inkt-sterk);margin-bottom:var(--sv-s1)}
.mt-drie-rij b::after{content:"";display:block;width:var(--sv-s5);height:4px;background:var(--sv-merk);margin-top:var(--sv-s1)}
.sv-js .mt-drie-rij{transition:opacity .6s var(--sv-ease),transform .6s var(--sv-ease);transition-delay:calc(var(--i)*.15s)}
.sv-js .mt-drie:not(.in) .mt-drie-rij{opacity:0;transform:translateY(24px)}

/* ---- twee kringen en een brug */
.mt-net{margin-top:var(--sv-s6);margin-bottom:var(--sv-s8)}
.mt-net-doek{position:relative;aspect-ratio:2/1}
.mt-net-doek svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* lijndikte in eenheden van de viewBox (200 breed): .3 is op 1040px ongeveer 1,5px */
.mt-net-doek line{stroke:var(--sv-inkt-licht);stroke-opacity:.45;stroke-width:.3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--sv-ease)}
.mt-net-doek line.br{stroke:var(--sv-merk);stroke-opacity:1;stroke-width:.7;transition-delay:1s}
.sv-js .mt-net:not(.in) line{stroke-dashoffset:1}
.mt-net-doek i{position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--sv-inkt-sterk)}
.mt-net-doek i.b{background:var(--sv-inkt-licht)}
.mt-net-doek i.brug{width:32px;height:32px;background:var(--sv-merk);box-shadow:0 0 0 8px var(--sv-merk-licht);transition:box-shadow .6s var(--sv-ease) 1.4s,transform .6s var(--sv-ease) 1.4s}
.sv-js .mt-net:not(.in) i.brug{box-shadow:0 0 0 0 var(--sv-merk-licht);transform:translate(-50%,-50%) scale(.4)}
.mt-net-onder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sv-s4);margin-top:var(--sv-s3)}
.mt-net-onder p{margin:0;font-size:17px;line-height:1.45;color:var(--sv-inkt-zacht)}
.mt-net-onder p:last-child{text-align:right}
.mt-net-onder p.br{text-align:center}
.mt-net-onder b{display:block;font-size:20px;color:var(--sv-inkt-sterk);margin-bottom:4px}
.mt-net-onder p.br b{display:table;margin:0 auto var(--sv-s1);background:var(--sv-merk);color:var(--sv-op-merk);padding:2px var(--sv-s2);border-radius:4px}

/* ---- scène: de tafel van bovenaf. De motor zet data-s op #scene-tafel: -1 ervoor, dan 1 t/m 4.
   Stoel 1 is de gastheer, de stoel tegenover hem de partner, de rest gasten. */
.sv-plak > .mt-tafel{position:relative;width:min(100%,560px,62vh);aspect-ratio:1;margin:0 auto}
.mt-st{position:absolute;left:50%;top:50%;width:10%;aspect-ratio:1;margin:-5% 0 0 -5%;border-radius:50%;box-sizing:border-box;border:2px dashed var(--sv-lijn-sterk);background:var(--sv-bg);transform:rotate(var(--a)) translateY(-440%);transition:background .5s var(--sv-ease),border-color .5s var(--sv-ease),box-shadow .5s var(--sv-ease)}
.mt-st::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--sv-inkt-licht);transform:rotate(calc(var(--a)*-1));opacity:0;transition:opacity .3s}
.mt-st--gastheer{background:var(--sv-merk);border:2px solid var(--sv-merk)}
.mt-st--partner{background:var(--sv-inkt-sterk);border:3px solid var(--sv-merk)}
.mt-st--gastheer::after,.mt-st--partner::after{display:none}
.mt-tafel-blad{position:absolute;inset:15%;border-radius:50%;background:var(--sv-papier);border:1px solid var(--sv-lijn);box-shadow:var(--sv-schaduw)}
.mt-c{position:absolute;inset:13%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity .15s}
.mt-c p{margin:0;font-size:17px;line-height:1.35;color:var(--sv-inkt-zacht)}
.mt-c .mt-l{font-size:14px;margin-bottom:var(--sv-s1);color:var(--sv-inkt-licht)}
.mt-c .mt-c-kop{font-family:var(--sv-font-kop);font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.01em;color:var(--sv-inkt-sterk);margin-bottom:var(--sv-s1)}
.mt-c .mt-c-stel{font-size:20px}
.mt-meter{width:80%;height:10px;border-radius:5px;background:var(--sv-inkt-sterk);overflow:hidden;margin:var(--sv-s1) 0}
.mt-meter i{display:block;height:100%;width:var(--p);background:var(--sv-merk)}
.mt-c .mt-stempel{margin-top:var(--sv-s2);font-size:14px;font-weight:700;color:var(--sv-inkt-sterk);border:2px solid var(--sv-merk-donker);border-radius:999px;padding:4px 16px;transform:rotate(-4deg)}
.mt-legenda{position:absolute;top:100%;left:0;right:0;margin:var(--sv-s2) 0 0;display:flex;justify-content:center;gap:var(--sv-s3);font-size:14px;color:var(--sv-inkt-licht)}
.mt-legenda span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:var(--sv-s1);vertical-align:-1px}
.mt-legenda .gh::before{background:var(--sv-merk)}
.mt-legenda .pa::before{background:var(--sv-inkt-sterk);box-shadow:0 0 0 2px var(--sv-merk)}
.mt-legenda .ga::before,.mt-legenda .on::before{background:var(--sv-inkt-sterk)}
.mt-legenda .ee::before{background:var(--sv-merk)}
.mt-legenda{transition:opacity .3s}
.mt-leg-stem,#scene-tafel[data-s="3"] .mt-legenda,#scene-tafel[data-s="4"] .mt-legenda{opacity:0}
#scene-tafel[data-s="3"] .mt-leg-stem{opacity:1}
/* standen */
.mt-c0{opacity:1}
#scene-tafel[data-s="1"] .mt-c0,#scene-tafel[data-s="2"] .mt-c0,#scene-tafel[data-s="3"] .mt-c0,#scene-tafel[data-s="4"] .mt-c0{opacity:0}
#scene-tafel[data-s="1"] .mt-c1,#scene-tafel[data-s="2"] .mt-c2,#scene-tafel[data-s="3"] .mt-c3,#scene-tafel[data-s="4"] .mt-c4{opacity:1;transition:opacity .4s var(--sv-ease) .2s}
#scene-tafel[data-s="1"] .mt-st--gast::after{opacity:1}
#scene-tafel[data-s="2"] .mt-st--gast,#scene-tafel[data-s="3"] .mt-st--gast.oneens{background:var(--sv-inkt-sterk);border:2px solid var(--sv-inkt-sterk)}
#scene-tafel[data-s="3"] .mt-st--gast.eens,#scene-tafel[data-s="4"] .mt-st--gast{background:var(--sv-merk);border:2px solid var(--sv-merk)}
#scene-tafel[data-s="4"] .mt-st{box-shadow:0 0 0 6px var(--sv-merk-licht)}

/* ---- klantevent tegenover Mystery Table */
.mt-vs{margin-top:var(--sv-s6);margin-bottom:var(--sv-s8);border-top:2px solid var(--sv-inkt-sterk)}
.mt-vs-rij{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);gap:var(--sv-s3);padding:var(--sv-s3) 0;border-bottom:1px solid var(--sv-lijn);align-items:baseline}
.mt-vs-wat{font-size:14px;font-weight:700;color:var(--sv-inkt-licht)}
.mt-vs-oud{font-size:18px;line-height:1.4;color:var(--sv-inkt-licht);text-decoration:line-through;text-decoration-thickness:1px}
.mt-vs-nieuw{font-family:var(--sv-font-kop);font-size:20px;line-height:1.3;font-weight:700;color:var(--sv-inkt-sterk);padding-left:var(--sv-s2);border-left:4px solid var(--sv-merk)}
.mt-vs-kop .mt-vs-oud{font-size:14px;font-weight:700;text-decoration:none}
.mt-vs-kop .mt-vs-nieuw{justify-self:start;font-size:14px;border:0;background:var(--sv-merk);color:var(--sv-op-merk);border-radius:999px;padding:4px 16px}
.sv-js .mt-vs-rij .mt-vs-nieuw{transition:opacity .5s var(--sv-ease),transform .5s var(--sv-ease)}
.sv-js .mt-vs-rij:nth-child(3) .mt-vs-nieuw{transition-delay:.12s}
.sv-js .mt-vs-rij:nth-child(4) .mt-vs-nieuw{transition-delay:.24s}
.sv-js .mt-vs-rij:nth-child(5) .mt-vs-nieuw{transition-delay:.36s}
.sv-js .mt-vs-rij:nth-child(6) .mt-vs-nieuw{transition-delay:.48s}
.sv-js .mt-vs:not(.in) .mt-vs-rij:not(.mt-vs-kop) .mt-vs-nieuw{opacity:0;transform:translateX(16px)}

/* ---- smal */
@media (max-width:1100px){
  .sv-plak > .mt-tafel{width:min(100%,44vh)}
  .mt-tafel-blad{inset:13%}
  .mt-c{inset:10%}
  .mt-c p{font-size:17px;line-height:1.3}
  .mt-c .mt-c-kop,.mt-c .mt-c-stel{font-size:20px}
  .mt-c .mt-stempel{margin-top:var(--sv-s1)}
  .mt-legenda{display:none}
}
@media (max-width:760px){
  .mt-uitn{grid-template-columns:minmax(0,1fr);gap:var(--sv-s5)}
  .mt-kaart{padding:var(--sv-s4) var(--sv-s3);transform:rotate(-1deg)}
  .mt-kaart-kop{font-size:28px}
  .mt-drie-rij{grid-template-columns:auto minmax(0,1fr);gap:var(--sv-s3);padding-left:calc(var(--i)*8%)}
  .mt-drie-n{font-size:clamp(72px,22vw,96px)}
  .mt-drie-rij p{font-size:17px}
  .mt-drie-rij b{font-size:22px}
  .mt-net-doek i{width:12px;height:12px}
  .mt-net-doek line{stroke-width:.9}
  .mt-net-doek line.br{stroke-width:1.8}
  .mt-net-doek i.brug{width:22px;height:22px;box-shadow:0 0 0 6px var(--sv-merk-licht)}
  .mt-net-onder{grid-template-columns:minmax(0,1fr);gap:var(--sv-s2)}
  .mt-net-onder p,.mt-net-onder p:last-child,.mt-net-onder p.br{text-align:left}
  .mt-net-onder p.br b{margin:0 0 4px}
  .mt-vs-rij{grid-template-columns:minmax(0,1fr);gap:var(--sv-s1)}
  .mt-vs-kop{display:none}
  .mt-vs-oud::before{content:"Klantevent";display:block;font-size:14px;font-weight:700}
  .mt-vs-nieuw::before{content:"Mystery Table";display:block;font-family:var(--sv-font);font-size:14px;color:var(--sv-inkt-licht)}
}
@media (prefers-reduced-motion:reduce){
  .mt-uitn *,.mt-drie *,.mt-net *,.mt-vs *,.mt-tafel *{transition:none!important}
}