/* SK Stationsroute (Ling Media) */
.sk-d-route{--d-messing:#B8925A; --d-actief:#6A1F22; --d-kop:#2B0910; --d-label:#4A423A; --d-num:rgba(184,146,90,.22);
  --d-titel:#2B0910; --d-tekst:#4A423A; --d-knop-bg:#2B0910; --d-knop-tx:#D4B47F; --d-route-ms:800ms; --d-route-maat:620px;
  --d-ease:cubic-bezier(.65,0,.25,1); padding:8px 0; overflow:hidden}
.sk-d .sk-d-route__kop{margin:0 0 52px; text-align:center; font-family:"Cinzel",Georgia,serif; font-weight:500;
  font-size:clamp(1.35rem,2.4vw,1.9rem); letter-spacing:.04em; line-height:1.3; color:var(--d-kop)}

/* lijn met stations */
.sk-d-route__lijn{position:relative; display:grid; grid-template-columns:repeat(var(--d-n,3),minmax(0,1fr));
  width:var(--d-lijn-w,760px); max-width:100%; margin:0 auto 44px}
.sk-d-route__spoor{position:absolute; top:21px; left:calc(100% / (var(--d-n,3) * 2)); right:calc(100% / (var(--d-n,3) * 2));
  height:1px; background:var(--d-messing); opacity:.6}
.sk-d-route__voortgang{position:absolute; left:0; top:-1px; width:100%; height:3px; background:var(--d-actief);
  transform-origin:left center; transform:scaleX(0); transition:transform var(--d-route-ms) var(--d-ease)}
.sk-d .sk-d-route__stop{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px;
  min-height:44px; margin:0; padding:0 6px; background:none; border:0; border-radius:0; box-shadow:none; cursor:pointer;
  font:inherit; color:inherit; text-transform:none}
.sk-d .sk-d-route__stop:hover,.sk-d .sk-d-route__stop:focus{background:none; color:inherit}
.sk-d-route__ruit{display:block; width:14px; height:14px; margin-top:15px; transform:rotate(45deg);
  border:1px solid var(--d-messing); background:var(--d-bg-ruit,#ECE4D3);
  transition:width .5s var(--d-ease),height .5s var(--d-ease),margin .5s var(--d-ease),background .4s ease,box-shadow .5s ease}
.sk-d-route__stop.is-gepasseerd .sk-d-route__ruit{background:var(--d-messing)}
.sk-d-route__stop.is-on .sk-d-route__ruit{width:22px; height:22px; margin-top:11px; background:var(--d-messing);
  box-shadow:0 0 0 6px rgba(184,146,90,.18)}
.sk-d .sk-d-route__label{font-family:"Cinzel",Georgia,serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.35; text-align:center; color:var(--d-label); opacity:.6; transition:opacity .4s ease,color .4s ease}
.sk-d-route__stop.is-on .sk-d-route__label{opacity:1; color:var(--d-titel)}
.sk-d .sk-d-route__stop:focus-visible{outline:2px solid var(--d-messing); outline-offset:4px}

/* slides */
.sk-d-route__venster{overflow:hidden}
.sk-d-route__baan{display:block}
.sk-d-route.is-klaar .sk-d-route__baan{display:flex; transition:transform var(--d-route-ms) var(--d-ease); will-change:transform}
.sk-d-route__slide{flex:0 0 100%; min-width:0; padding:8px 24px; text-align:center}
.sk-d-route:not(.is-klaar) .sk-d-route__slide + .sk-d-route__slide{margin-top:48px}
.sk-d-route.is-klaar .sk-d-route__inhoud{opacity:0; transform:translateY(18px);
  transition:opacity .7s ease .15s,transform .7s var(--d-ease) .15s}
.sk-d-route.is-klaar .sk-d-route__slide.is-on .sk-d-route__inhoud{opacity:1; transform:none}
.sk-d .sk-d-route__num{margin:0; font-family:"Cinzel",Georgia,serif; font-weight:500; font-size:clamp(110px,16vw,200px);
  line-height:.9; letter-spacing:.03em; color:var(--d-num)}
.sk-d .sk-d-route__titel{position:relative; margin:-56px 0 20px; font-family:"Cinzel",Georgia,serif; font-weight:500;
  font-size:clamp(1.6rem,3vw,2.25rem); letter-spacing:.04em; line-height:1.2; color:var(--d-titel)}
.sk-d .sk-d-route__tekst{margin:0 auto; max-width:var(--d-route-maat); font-size:1.15rem; line-height:1.75; color:var(--d-tekst)}

/* navigatie */
.sk-d-route__nav{display:none}
.sk-d-route.is-klaar .sk-d-route__nav{display:flex; align-items:center; justify-content:center; gap:28px; margin-top:40px}
.sk-d .sk-d-route__pijl{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; padding:0; border:0;
  border-radius:0; cursor:pointer; background:var(--d-knop-bg); color:var(--d-knop-tx); transition:background .2s,opacity .2s;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.sk-d .sk-d-route__pijl:hover:not(:disabled){background:var(--d-actief); color:var(--d-knop-tx)}
.sk-d .sk-d-route__pijl:disabled{opacity:.35; cursor:default}
.sk-d .sk-d-route__pijl:focus-visible{outline:2px solid var(--d-messing); outline-offset:3px}
.sk-d-route__pijl svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5}
.sk-d .sk-d-route__teller{min-width:80px; margin:0; text-align:center; font-family:"Cinzel",Georgia,serif; font-size:.95rem;
  letter-spacing:.2em; color:var(--d-actief)}
.sk-d-route:not(.is-klaar) .sk-d-route__spoor{display:none}

@media (max-width:540px){
  .sk-d .sk-d-route__label{font-size:.68rem; letter-spacing:.08em}
  .sk-d .sk-d-route__titel{margin-top:-40px}
  .sk-d-route__slide{padding:8px 4px}
}
@media (prefers-reduced-motion:reduce){
  .sk-d-route.is-klaar .sk-d-route__baan,.sk-d-route__voortgang,.sk-d-route__ruit,
  .sk-d-route.is-klaar .sk-d-route__inhoud{transition:none}
}