/* ============================================================
   Kop in het kostuum — de fotohut met de kwelpieperskist
   ============================================================ */
.ko-body{background:var(--blue-950)}

.ko-kop{position:relative;padding:clamp(6.5rem,13vh,9rem) 0 clamp(1rem,3vh,1.6rem);overflow:hidden}
.ko-kop h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;margin:.5rem 0 .8rem;
}
.ko-kop .lead{max-width:52ch}

.ko-vlak{padding:0 0 clamp(3rem,8vh,5rem)}
.ko-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(1rem,3vw,2rem);align-items:start}
@media (max-width:900px){ .ko-grid{grid-template-columns:1fr} }

/* het beeld */
.ko-beeld{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--blue-850),var(--blue-950));
  box-shadow:0 30px 70px rgba(3,5,28,.55),inset 0 0 0 1px rgba(255,255,255,.1);
  display:grid;place-items:center;touch-action:none;
}
.ko-beeld video{width:100%;height:100%;object-fit:cover;display:none;transform:scaleX(-1)}
.ko-beeld.aan video{display:block}
.ko-beeld canvas{display:none;width:100%;height:100%;object-fit:cover}
.ko-beeld.bevroren canvas{display:block}
.ko-beeld.bevroren video,.ko-beeld.bevroren .ko-laag{display:none}
.ko-leeg{
  position:absolute;inset:auto 8% 8% 8%;text-align:center;
  color:rgba(255,255,255,.55);font-size:.86rem;
}
.ko-beeld.aan .ko-leeg{display:none}

/* de losse spullen */
.ko-laag{position:absolute;inset:0}
.ko-spul{position:absolute;cursor:grab;touch-action:none;user-select:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.ko-spul:active{cursor:grabbing}
.ko-spul img{width:100%;height:auto;display:block;pointer-events:none}
.ko-spul.gekozen{outline:2px dashed rgba(255,224,27,.8);outline-offset:6px;border-radius:6px}

/* de kist ernaast */
.ko-kist{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.5rem;
  padding:.6rem;border-radius:16px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.ko-kies{
  display:grid;gap:.3rem;justify-items:center;padding:.5rem .3rem;
  border:0;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8);font:inherit;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  transition:background .2s var(--ease),transform .2s var(--ease),color .2s;
}
.ko-kies img{width:100%;max-height:42px;object-fit:contain}
.ko-kies:hover{background:rgba(255,224,27,.18);color:#fff;transform:translateY(-2px)}

.ko-titel{
  font-family:var(--font-display);text-transform:uppercase;font-size:1.1rem;
  margin:0 0 .5rem;color:#fff;
}
.ko-regels{margin-top:1rem;display:grid;gap:.7rem}
.ko-regels[hidden]{display:none}
.ko-regels label{display:grid;gap:.3rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ko-regels input[type=range]{width:100%;accent-color:var(--yellow)}

.ko-knoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.ko-knoppen [hidden]{display:none}
.ko-stand{margin:.9rem 0 0;color:rgba(255,255,255,.68);font-size:.88rem}
.ko-privacy{margin:.6rem 0 0;font-size:.78rem;color:rgba(255,255,255,.45)}