/* ===== Plekken: общие ===== */
.s-atlas, .s-toren, .s-vesting{ padding: clamp(42px,6vw,72px) 0 }

/* ===== S1 Atlas ===== */
.atlas-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.atlas-copy h1{ font-family:"Merriweather", serif; margin:0 0 8px 0; line-height:1.2 }
.atlas-copy p{ color: var(--muted); margin:0 0 10px 0 }
.atlas-legend{ margin:10px 0 0 0; padding-left:1.1rem; color: var(--muted) }
.atlas-legend li{ margin:4px 0 }
.atlas-legend .is-active{ color:#fff }

.atlas-grid{
  position:relative; display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px; align-items:start;
}
.tile{ margin:0; background: var(--card); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow: var(--shadow); transition: transform .25s ease, filter .25s ease }
.tile:hover{ transform: translateY(-4px); filter:saturate(1.06) }
.tile figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.atlas-bg{
  position:absolute; inset:-2%; border-radius:20px; z-index:-1;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(87,193,201,.06), transparent 60%),
    radial-gradient(900px 420px at 80% 80%, rgba(228,179,99,.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(255,255,255,.03) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(255,255,255,.03) 32px 33px);
}

@media (max-width: 980px){
  .atlas-inner{ grid-template-columns: 1fr }
  .atlas-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px){
  .atlas-grid{ grid-template-columns: 1fr }
}

/* ===== S2 Torenwijzer ===== */
.toren-inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.toren-scale{
  position:relative; height: 240px; border:1px solid var(--line); border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%);
  overflow:hidden;
}
.toren-scale .tick{
  position:absolute; left:50%; width:70%; height:2px; background: rgba(255,255,255,.18);
  transform-origin:left center; translate: -50% 0;
}
.toren-scale .t1{ top:22%; transform: rotate(-12deg) }
.toren-scale .t2{ top:44%; transform: rotate(0deg) }
.toren-scale .t3{ top:66%; transform: rotate(8deg) }
.toren-scale .t4{ top:84%; transform: rotate(-6deg) }
.toren-scale .lbl{
  position:absolute; font-size:12px; background: rgba(0,0,0,.35);
  border:1px solid var(--line); padding:3px 6px; border-radius:10px; color:#dfe8ef;
}
.toren-scale .l1{ left:8px; top:8px }
.toren-scale .l2{ right:8px; bottom:8px }

.toren-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.toren-copy p{ color: var(--muted); margin:0 0 10px 0 }
.toren-tips{ margin:.2rem 0 0 1rem; color: var(--muted) }

.toren-beeld{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.toren-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.toren-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){
  .toren-inner{ grid-template-columns: 1fr }
  .toren-beeld{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .toren-beeld{ grid-template-columns: 1fr }
}

/* ===== S3 Vestingslint ===== */
.vest-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.vest-head p{ color: var(--muted); margin:0 0 12px 0 }

.vest-controls{
  display:flex; gap:8px; justify-content:flex-end; margin-bottom:8px;
}
.vest-btn{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 10px; border-radius:12px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.vest-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07) }

.v-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: min(92%, 690px);
  gap: 14px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  border-radius: 16px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
}
.v-track:focus{ outline:2px solid rgba(87,193,201,.6) }
.v-pane{
  scroll-snap-align: start;
  display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:start;
  padding:14px; background: rgba(0,0,0,.18); border-radius: 14px; margin:8px;
}
.v-pane figure{ margin:0 }
.v-pane figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.v-pane p{ margin:.3rem 0 0 0; color: var(--muted) }

.vest-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin-top:10px }
.vest-progress i{ display:block; height:100%; width:12%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:inherit }

@media (max-width: 720px){
  .v-pane{ grid-template-columns: 1fr }
}
/* ===== S4 Hanzelint ===== */
.s-hanze{ padding: clamp(42px,6vw,72px) 0 }
.hanze-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.hanze-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.hanze-stappen{
  list-style:none; padding:0; margin:6px 0 10px 0; display:grid; gap:6px;
}
.hanze-stappen li{
  padding:8px 10px; border-radius:12px; border:1px dashed var(--line);
  background: rgba(255,255,255,.03);
}
.hanze-stappen li.done{ background: linear-gradient(90deg, rgba(87,193,201,.12), transparent) }
.hanze-stappen li.active{ background: linear-gradient(90deg, rgba(228,179,99,.12), transparent) }
.hanze-copy p{ color: var(--muted); margin:0 }

.hanze-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.hanze-beeld figure{ margin:0; background: var(--card); padding:10px; border-radius:14px; box-shadow: var(--shadow) }
.hanze-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){ .hanze-inner{ grid-template-columns: 1fr } }
@media (max-width: 640px){ .hanze-beeld{ grid-template-columns: 1fr } }

/* ===== S5 Baksteenlab ===== */
.s-baksteen{ padding: clamp(42px,6vw,72px) 0 }
.bak-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.bak-head p{ color: var(--muted); margin:0 0 12px 0 }

.baksteen-inner{ display:grid; gap:14px }

.compare{
  position:relative; width:100%; max-width: 350px; /* держим в рамках глобального лимита изображений */
  border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow);
  background: var(--card); margin: 0;
}
.compare figure{ margin:0 }
.compare .cmp-base img,
.compare .cmp-top img{ display:block; width:100%; height:auto }
.compare .cmp-top{
  position:absolute; inset:0; width: var(--cut, 50%); overflow:hidden; border-right:1px solid rgba(255,255,255,.3);
}
.compare figcaption{
  position:absolute; left:8px; bottom:8px; font-size:12px;
  background: rgba(0,0,0,.42); border:1px solid var(--line); padding:3px 6px; border-radius:8px; color:#dfe8ef;
}
.compare .cmp-top figcaption{ right:8px; left:auto }

.cmp-handle{
  position:absolute; top:0; bottom:0; left: calc(var(--cut, 50%) - 8px);
  width:16px; cursor: ew-resize; background: rgba(0,0,0,.35);
  border-right:1px solid rgba(255,255,255,.15); border-left:1px solid rgba(255,255,255,.15);
}
.cmp-handle::before, .cmp-handle::after{
  content:""; position:absolute; left:50%; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.9;
  transform: translateX(-50%);
}
.cmp-handle::before{ top:12px } .cmp-handle::after{ bottom:12px }

.bak-detail{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow); max-width: 350px }
.bak-detail figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

/* ===== S6 Kloosterspoor ===== */
.s-klooster{ padding: clamp(42px,6vw,72px) 0 }
.klooster-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.klooster-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.quote{
  margin: 6px 0 10px 0; padding:10px 12px; border-left:4px solid var(--brand);
  background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0;
}
.klooster-copy p{ color: var(--muted); margin:0 }

.klooster-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.klooster-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.klooster-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){ .klooster-inner{ grid-template-columns: 1fr } }
@media (max-width: 640px){ .klooster-beeld{ grid-template-columns: 1fr } }
/* ===== S7 Waterpoortenkaart ===== */
.s-waterpoort{ padding: clamp(42px,6vw,72px) 0 }
.waterpoort-inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.wp-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.wp-copy p{ color: var(--muted); margin:0 }

.wp-lijn{
  position:relative; list-style:none; padding:0; margin:0; display:grid; gap:14px;
}
.wp-lijn::before{
  content:""; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent);
}
.wp-item{
  display:grid; grid-template-columns: 64px 1fr; gap:12px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%);
  border:1px solid var(--line); border-radius:14px; padding:10px;
}
.wp-bubble{
  width:48px; height:48px; border-radius:50%; overflow:hidden; margin:0; box-shadow: var(--shadow);
}
.wp-strook h3{ margin:.1rem 0 .25rem 0; font-size: clamp(16px,1.8vw,18px) }
.wp-strook p{ margin:0; color: var(--muted) }

@media (max-width: 980px){
  .waterpoort-inner{ grid-template-columns: 1fr }
}

/* ===== S8 Bruggenboek ===== */
.s-brug{ padding: clamp(42px,6vw,72px) 0 }
.brug-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.brug-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.chip{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:20px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.chip:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.chip.is-active{ background: rgba(255,255,255,.12) }
.brug-note{ margin:0 }

.brug-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start }
.brug-grid figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.brug-grid figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.brug-grid .klap{ display:none }           /* по умолчанию показываем боог */
.s-brug.mode-klap .brug-grid .klap{ display:block }
.s-brug.mode-klap .brug-grid .boog{ display:none }

@media (max-width: 640px){
  .brug-grid{ grid-template-columns: 1fr }
}

/* ===== S9 Marktdag ===== */
.s-markt{ padding: clamp(42px,6vw,72px) 0 }
.markt-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.markt-head p{ color: var(--muted); margin:0 0 12px 0 }

.markt-route{
  position:relative; padding-left: 28px;
  border:1px solid var(--line); border-radius:16px; background: var(--card); padding-top: 12px; padding-bottom: 12px;
}
.markt-route::before{
  content:""; position:absolute; left:14px; top:12px; bottom:12px; width:4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border-radius:4px;
}
.m-step{
  position:relative; display:grid; grid-template-columns: 1fr; gap:8px; margin: 0 10px 14px 0;
}
.m-dot{
  position:absolute; left:-18px; top:10px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.m-card{
  background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px;
  transition: transform .2s ease, background .2s ease;
}
.m-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.05) }
.m-card figure{ margin:0 }
.m-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.m-card p{ margin:.35rem 0 0 0; color: var(--muted) }

.markt-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin: 6px 10px 4px 0; overflow:hidden }
.markt-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

@media (max-width: 640px){
  .markt-route{ padding-left: 22px }
  .markt-route::before{ left:10px }
  .m-dot{ left:-22px }
}
/* ===== S10 Windroos ===== */
.s-wind{ padding: clamp(42px,6vw,72px) 0 }
.wind-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.wind-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.wind-copy p{ color: var(--muted); margin:0 0 10px 0 }
.windroos{
  --deg: 0deg;
  width: 140px; height: 140px; border-radius: 50%;
  border:1px solid var(--line); background: rgba(255,255,255,.03);
  position: relative; margin: 6px 0 8px 0;
  display:grid; place-items:center;
}
.windroos .pijl{
  position:absolute; width:4px; height:54%; background: linear-gradient(180deg,var(--brand),var(--brand-2));
  top:23%; border-radius:3px; transform-origin: bottom center;
  transform: rotate(var(--deg));
}
.windroos .c{
  position:absolute; font-size:12px; color:#cbd6df; background: rgba(0,0,0,.35);
  padding:2px 5px; border-radius:8px; border:1px solid var(--line);
}
.windroos .n{ top:6px; left:50%; transform: translateX(-50%) }
.windroos .o{ right:6px; top:50%; transform: translateY(-50%) }
.windroos .z{ bottom:6px; left:50%; transform: translateX(-50%) }
.windroos .w{ left:6px; top:50%; transform: translateY(-50%) }
.wind-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.wind-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.wind-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){
  .wind-inner{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .wind-beeld{ grid-template-columns: 1fr }
}

/* ===== S11 Materiaal-index ===== */
.s-index{ padding: clamp(42px,6vw,72px) 0 }
.index-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.index-head p{ color: var(--muted); margin:0 0 8px 0 }
.ix-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.ix-chip{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:20px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.ix-chip:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.ix-chip.is-active{ background: rgba(255,255,255,.12) }

.ix-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.ix-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ix-card.focus{ transform: translateY(-3px); filter: saturate(1.05) }
.ix-card figure{ margin:0 }
.ix-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.ix-card p{ margin:.4rem 0 0 0; color: var(--muted) }

.ix-meters{ list-style:none; padding:0; margin:8px 0; display:grid; gap:6px }
.ix-meters li{ display:grid; grid-template-columns: 110px 1fr; gap:8px; align-items:center }
.ix-meters span{ font-size:14px }
.ix-meters i{
  display:block; height:8px; border-radius:6px; background: rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.ix-meters i::after{
  content:""; position:absolute; inset:0; width:var(--w,60%); background: linear-gradient(90deg,var(--brand),var(--brand-2));
}
.iw-50{ --w:50% } .iw-55{ --w:55% } .iw-60{ --w:60% } .iw-70{ --w:70% } .iw-75{ --w:75% } .iw-80{ --w:80% } .iw-85{ --w:85% } .iw-90{ --w:90% }

@media (max-width: 1100px){ .ix-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){  .ix-grid{ grid-template-columns: 1fr } }

/* ===== S12 Stille Steeg ===== */
.s-steeg{ padding: clamp(42px,6vw,72px) 0 }
.steeg-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.steeg-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.steeg-copy p{ color: var(--muted); margin:0 }

.steeg-route{
  position:relative; padding-left: 28px; border:1px solid var(--line);
  border-radius:16px; background: var(--card); padding-top: 12px; padding-bottom: 12px;
}
.steeg-route::before{
  content:""; position:absolute; left:14px; top:12px; bottom:12px; width:3px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
  border-radius:3px;
}
.sg-step{ position:relative; margin: 0 10px 14px 0 }
.sg-dot{
  position:absolute; left:-19px; top:10px; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.sg-card{
  background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:10px;
  transition: transform .2s ease, background .2s ease;
}
.sg-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.05) }
.sg-card figure{ margin:0 }
.sg-card figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.sg-card p{ margin:.35rem 0 0 0; color: var(--muted) }

.steeg-progress{ height:4px; background: rgba(255,255,255,.06); border-radius:4px; margin: 6px 10px 4px 0; overflow:hidden }
.steeg-progress i{ display:block; height:100%; width:10%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

@media (max-width: 980px){ .steeg-inner{ grid-template-columns: 1fr } }
@media (max-width: 640px){
  .steeg-route{ padding-left: 22px }
  .steeg-route::before{ left:10px }
  .sg-dot{ left:-22px }
}
/* ===== S13 Houtsporen ===== */
.s-hout{ padding: clamp(42px,6vw,72px) 0 }
.hout-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.hout-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.hout-copy p{ color: var(--muted); margin:0 0 10px 0 }

.acc{ display:grid; gap:6px }
.acc-btn{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:10px 12px; border-radius:12px; cursor:pointer; text-align:left;
  transition: background .2s ease, transform .2s ease;
}
.acc-btn:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.acc-btn.is-open{ background: rgba(255,255,255,.12) }
.acc-pan{
  display:none; padding:10px 12px; border:1px dashed var(--line); border-radius:12px; color: var(--muted);
  background: rgba(255,255,255,.03);
}
.acc-pan.show{ display:block }

.hout-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.hout-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.hout-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){
  .hout-inner{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .hout-beeld{ grid-template-columns: 1fr }
}

/* ===== S14 Panorama ===== */
.s-panorama{ padding: clamp(42px,6vw,72px) 0 }
.pan-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.pan-head p{ color: var(--muted); margin:0 0 12px 0 }

.pan-card{
  position:relative; margin:0; background: var(--card); border-radius:16px; padding:10px;
  box-shadow: var(--shadow);
}
.pan-card figcaption{ margin-top:6px }
.lint{
  display:inline-block; background: rgba(0,0,0,.45); border:1px solid var(--line);
  padding:6px 10px; border-radius:12px; color:#e7eef3; font-size:12px;
}
.lint span{ letter-spacing:.3px }

@media (max-width: 640px){
  .pan-card{ padding:8px }
}

/* ===== S15 Scheepssteden ===== */
.s-scheep{ padding: clamp(42px,6vw,72px) 0 }
.scheep-inner{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.scheep-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.scheep-copy p{ color: var(--muted); margin:0 0 8px 0 }

.kompas-lijn{
  position:relative; height: 8px; background: linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:6px; overflow:visible; margin-top:6px;
}
.kompas-lijn .dot{
  position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:#fff;
  transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.kompas-lijn .d1{ left:6% } .d2{ left:52% } .d3{ right:6% }

.scheep-beeld{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.scheep-beeld figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.scheep-beeld figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

@media (max-width: 980px){
  .scheep-inner{ grid-template-columns: 1fr }
}
@media (max-width: 640px){
  .scheep-beeld{ grid-template-columns: 1fr }
}
/* ===== S16 Kaartlint ===== */
.s-kaartlint{ padding: clamp(42px,6vw,72px) 0 }
.kaartlint-inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,32px); align-items:start;
}
.k-copy h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.k-copy p{ color: var(--muted); margin:0 0 10px 0 }
.k-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.k-chip{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:8px 12px; border-radius:20px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.k-chip:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }
.k-chip.is-active{ background: rgba(255,255,255,.12) }

.k-stage{ display:grid; gap:8px; align-content:start }
.k-stage figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.k-stage figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }
.k-progress{ height:6px; background: rgba(255,255,255,.06); border-radius:6px; overflow:hidden }
.k-progress i{ display:block; height:100%; width:20%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); }

@media (max-width: 980px){ .kaartlint-inner{ grid-template-columns: 1fr } }

/* ===== S17 Reiswijzer ===== */
.s-reiswijzer{ padding: clamp(42px,6vw,72px) 0 }
.reis-head h2{ font-family:"Merriweather", serif; margin:0 0 8px 0 }
.reis-head p{ color: var(--muted); margin:0 0 12px 0 }

.reis-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:14px; align-items:start }
.reis-grid figure{ margin:0; background: var(--card); border-radius:14px; padding:10px; box-shadow: var(--shadow) }
.reis-grid figcaption{ font-size:12px; color:#aeb9c3; margin-top:6px }

.reis-tips ul{ margin:.2rem 0 10px 1rem; color: var(--muted) }
.to-top{
  appearance:none; border:1px solid var(--line); background: rgba(255,255,255,.04);
  color:#fff; padding:10px 12px; border-radius:12px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.to-top:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px) }

@media (max-width: 980px){ .reis-grid{ grid-template-columns: 1fr } }