/* SK Maakproces — Sinterklaaskrullen (Ling Media) */
.sk-mp{
  --mp-messing:#B8925A; --mp-eyebrow:#B8925A; --mp-titel:#1D1B18; --mp-tekst:#4A423A;
  --mp-staptitel:#1D1B18; --mp-ruit-vul:#B8925A; --mp-nr-actief:#1E060B; --mp-nr:#6A1F22;
  --mp-beeld-bg:#2B0910; --mp-ratio:4/5; --mp-dim:.45; --mp-beeld-w:42%; --mp-gap:80px;
  --mp-stap-gap:9vh; --mp-sticky:30px;
  display:grid; grid-template-columns:var(--mp-beeld-w) minmax(0,1fr); gap:var(--mp-gap);
  align-items:start; background:var(--mp-bg,transparent); color:var(--mp-tekst);
}
.sk-mp--rechts{grid-template-columns:minmax(0,1fr) var(--mp-beeld-w)}
.sk-mp--rechts .sk-mp__beeld{order:2}

/* beeldkolom */
.sk-mp__beeld{position:sticky; top:var(--mp-sticky)}
.sk-mp--kader .sk-mp__beeld{border:1px solid var(--mp-messing); padding:14px}
.sk-mp--kader .sk-mp__beeld::before{content:""; position:absolute; inset:5px; border:1px solid var(--mp-messing); opacity:.45; pointer-events:none}
.sk-mp__stage{position:relative; aspect-ratio:var(--mp-ratio); overflow:hidden; background:var(--mp-beeld-bg)}
.sk-mp__media{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .7s ease}
.sk-mp__media.is-on{opacity:1}
.sk-mp__media img,.sk-mp__media video,.sk-mp__inline img,.sk-mp__inline video{
  display:block; width:100%; height:100%; max-width:none; object-fit:cover; border-radius:0}
.sk-mp__leeg{display:grid; place-items:center; width:100%; height:100%; min-height:200px;
  color:var(--mp-messing); font-size:.85rem; letter-spacing:.04em; background:var(--mp-beeld-bg)}

/* tekstkolom */
.sk-mp .sk-mp__eyebrow{display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-family:"Montserrat",sans-serif; font-weight:600; font-size:.86rem; letter-spacing:.08em; color:var(--mp-eyebrow)}
.sk-mp__eyebrow::before{content:""; width:28px; height:1px; background:currentColor}
.sk-mp .sk-mp__titel{margin:0; font-family:"Cinzel",Georgia,serif; font-weight:500;
  font-size:clamp(1.8rem,3.4vw,2.7rem); letter-spacing:.04em; line-height:1.12; color:var(--mp-titel)}
.sk-mp .sk-mp__intro{color:var(--mp-tekst); margin:22px 0 0; max-width:62ch; line-height:1.7}
.sk-mp__stappen{list-style:none; margin:34px 0 0; padding:0 0 6vh; display:grid; gap:var(--mp-stap-gap)}
.sk-mp__stap{display:grid; grid-template-columns:52px minmax(0,1fr); gap:20px; margin:0}
.sk-mp--dim .sk-mp__stap{opacity:var(--mp-dim); transition:opacity .4s}
.sk-mp--dim .sk-mp__stap.is-on{opacity:1}
.sk-mp__ruit{width:38px; height:38px; margin:6px 0 0 7px; border:1px solid var(--mp-messing);
  background:var(--mp-ruit-bg,transparent); transform:rotate(45deg); display:grid; place-items:center; transition:background .4s}
.sk-mp__ruit b{transform:rotate(-45deg); font-family:"Cinzel",Georgia,serif; font-weight:500; font-size:.9rem; color:var(--mp-nr); transition:color .4s}
.sk-mp__stap.is-on .sk-mp__ruit{background:var(--mp-ruit-vul)}
.sk-mp__stap.is-on .sk-mp__ruit b{color:var(--mp-nr-actief)}
.sk-mp .sk-mp__staptitel{margin:0 0 8px; font-family:"Cinzel",Georgia,serif; font-weight:500; font-size:1.25rem; letter-spacing:.03em; line-height:1.2; color:var(--mp-staptitel)}
.sk-mp .sk-mp__staptekst{color:var(--mp-tekst); margin:0; max-width:62ch; line-height:1.7}
.sk-mp__inline{display:none; margin:0}

/* tablet en mobiel: beeld boven elke stap */
@media (max-width:1024px){
  .sk-mp,.sk-mp--rechts{grid-template-columns:minmax(0,1fr); gap:0}
  .sk-mp__beeld{display:none}
  .sk-mp__stappen{padding-bottom:0; gap:44px}
  .sk-mp--dim .sk-mp__stap{opacity:1}
  .sk-mp__inline{display:block; position:relative; aspect-ratio:var(--mp-ratio); overflow:hidden;
    margin:0 0 16px; background:var(--mp-beeld-bg)}
  .sk-mp--kader .sk-mp__inline{outline:1px solid var(--mp-messing); outline-offset:6px; margin:6px 6px 22px}
}
@media (max-width:540px){
  .sk-mp__stap{grid-template-columns:minmax(0,1fr); gap:14px}
  .sk-mp__ruit{margin:6px 0 4px 8px}
}
@media (prefers-reduced-motion:reduce){
  .sk-mp__media,.sk-mp__stap,.sk-mp__ruit,.sk-mp__ruit b{transition:none}
}