/* PiratePots guide: brand colours and font, sea chart layout. */
@font-face {
  font-family: "Inter Variable";
  src: url("/letter/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --zee: #02121E;
  --romp: #0A1B29;
  --touw: #1C3042;
  --touw2: #2B4760;
  --mist: #ABBCCA;
  --grijs: #7D90A0;
  --bloed: #CF1D1D;
  --wit: #FFFFFF;
  --hoek: 10px;
  --rit: 72px;
  --tussen: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zee); color: var(--wit); font: 400 16px/1.5 "Inter Variable", system-ui, sans-serif; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.zk-vak, .zk-romp { width: 1200px; max-width: calc(100% - 32px); margin-inline: auto; }

/* Headings: 4 sizes */
h1 { font-size: 36px; line-height: 1.12; font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: 28px; line-height: 1.2; font-weight: 900; letter-spacing: -.01em; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 800; }

/* Button */
.zk-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: var(--hoek); background: var(--bloed); color: var(--wit); font-weight: 800; font-size: 16px; white-space: nowrap; transition: background .15s; }
.zk-knop:hover { background: #E32A2A; }
.zk-knop:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; }
.zk-knop-dek { min-height: 40px; padding: 0 16px; font-size: 14px; }
.zk-los { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--bloed); border-radius: var(--hoek); background: var(--zee); font-weight: 700; font-size: 14px; }
.zk-18 { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; border: 1px solid var(--touw2); border-radius: 6px; color: var(--mist); font-size: 13px; font-weight: 700; flex: none; }
.zk-knoprij { position: relative; width: fit-content; margin: 28px auto 0; }
.zk-knoprij .zk-18 { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }

/* Header: logo and actions */
.zk-dek { position: sticky; top: 0; z-index: 30; background: var(--romp); border-bottom: 1px solid var(--touw); }
.zk-dek-rij { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.zk-logo img { width: 130px; height: 44px; }
.zk-dek-acties { display: flex; align-items: center; gap: 10px; }
.zk-burger { display: none; }

/* Menu: ports on a dashed route */
.zk-route { background: var(--zee); border-bottom: 1px solid var(--touw); }
.zk-route ol { display: flex; justify-content: space-between; position: relative; height: 48px; align-items: center; }
.zk-route ol::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--touw2); }
.zk-route li { position: relative; background: var(--zee); }
.zk-route li:first-child { padding-right: 8px; }
.zk-route li:last-child { padding-left: 8px; }
.zk-route li:not(:first-child):not(:last-child) { padding-inline: 8px; }
.zk-route a { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--mist); }
.zk-route a:hover { color: var(--wit); }
.zk-route b { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bloed); background: var(--zee); }
.zk-route .is-hier a { color: var(--wit); }
.zk-route .is-hier b { background: var(--bloed); }

/* First screen: sea chart sheet */
.zk-kaart {
  display: grid;
  grid-template-columns: 680px 1fr;
  grid-template-areas: "art tekst" "reis reis" "knop knop";
  column-gap: 32px;
  margin-top: 20px;
  padding: 28px;
  border-radius: var(--hoek);
  border: 1px solid var(--touw);
  background:
    repeating-linear-gradient(90deg, var(--touw2) 0 48px, var(--romp) 48px 96px) top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--touw2) 0 48px, var(--romp) 48px 96px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(0deg, var(--touw2) 0 48px, var(--romp) 48px 96px) left / 6px 100% no-repeat,
    repeating-linear-gradient(0deg, var(--touw2) 0 48px, var(--romp) 48px 96px) right / 6px 100% no-repeat,
    linear-gradient(rgba(171,188,202,.06) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, rgba(171,188,202,.06) 1px, transparent 1px) 0 0 / 96px 100%,
    var(--romp);
}
.zk-kaart-art { grid-area: art; position: relative; border-radius: var(--hoek); overflow: hidden; }
.zk-kaart-art img { width: 100%; aspect-ratio: 2 / 1; }
.zk-kaart-tekst { grid-area: tekst; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }
.zk-metka { color: var(--mist); font-size: 14px; font-weight: 600; }
.zk-kaart-knop { grid-area: knop; }
.zk-kaart-knop .zk-knoprij { margin-top: 12px; }

/* Brand ribbon */
.zk-lint { position: absolute; left: 0; top: 0; z-index: 1; padding: 4px 12px; background: var(--bloed); color: var(--wit); font-size: 13px; font-weight: 700; border-radius: var(--hoek) 0 var(--hoek) 0; }

/* Package stops on a wavy line */
.zk-reis { grid-area: reis; position: relative; margin-top: 18px; }
.zk-reislijn { position: absolute; inset: 0 0 auto 0; width: 100%; height: 70px; }
.zk-reislijn path { stroke: var(--bloed); stroke-width: 2.5; stroke-dasharray: 8 8; }
.zk-reis ol { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zk-reis li { display: grid; justify-items: start; }
.zk-reis li:nth-child(even) { padding-top: 26px; }
.zk-reis b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bloed); font-weight: 800; }
.zk-reis span { margin-top: 8px; color: var(--mist); font-size: 14px; font-weight: 600; }
.zk-reis strong { margin-top: 2px; font-size: 34px; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.zk-reis em { font-style: normal; color: var(--mist); font-size: 14px; line-height: 1.35; }

/* TOC: always collapsed */
.zk-inhoud { position: relative; font-size: 14px; font-weight: 700; }
.zk-inhoud summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--touw2); border-radius: var(--hoek); background: var(--zee); cursor: pointer; list-style: none; }
.zk-inhoud summary::-webkit-details-marker { display: none; }
.zk-inhoud summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--bloed); border-bottom: 2px solid var(--bloed); transform: rotate(-45deg); transition: transform .15s; }
.zk-inhoud[open] summary::before { transform: rotate(45deg); }
.zk-inhoud ol { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: 280px; padding: 8px; border: 1px solid var(--touw2); border-radius: var(--hoek); background: var(--zee); }
.zk-inhoud a { display: block; padding: 7px 8px; border-radius: 6px; color: var(--mist); font-weight: 600; }
.zk-inhoud a:hover { background: var(--touw); color: var(--wit); }

/* Sections */
.zk-deel { margin-top: var(--rit); }
.zk-koers { display: flex; align-items: center; gap: 16px; }
.zk-koers i { flex: 1 1 40px; min-width: 40px; border-top: 2px dashed var(--touw2); position: relative; }
.zk-koers i::after { content: ""; position: absolute; right: -2px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bloed); }
.zk-txt { margin-top: 8px; color: var(--grijs); font-size: 14px; }
.zk-rijkop { margin: 28px 0 12px; }
.zk-leeg { color: var(--grijs); font-weight: 600; }

/* Round arrow */
.zk-pijl { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--bloed); }
.zk-pijl::after { content: ""; position: absolute; left: 10px; top: 11px; width: 8px; height: 8px; border-right: 2px solid var(--wit); border-top: 2px solid var(--wit); transform: rotate(45deg); }

/* Offers */
.zk-havens { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tussen); margin-top: 20px; }
.zk-haven { position: relative; display: flex; flex-direction: column; background: var(--romp); border-radius: var(--hoek); overflow: hidden; }
.zk-haven img { width: 100%; aspect-ratio: 2 / 1; }
.zk-haven div { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.zk-haven strong { display: block; font-weight: 800; line-height: 1.25; }
.zk-haven p span { display: block; margin-top: 2px; color: var(--mist); font-size: 14px; }
.zk-haven:hover .zk-pijl, .zk-schatkaart:hover .zk-pijl { background: #E32A2A; }

/* VIP: full cabin art, text on the dark left edge */
.zk-kajuit { position: relative; margin-top: 20px; border-radius: var(--hoek); overflow: hidden; }
.zk-kajuit-art { width: 100%; aspect-ratio: 1536 / 500; }
.zk-kajuit-los { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 270px; }
.zk-kajuit-los strong { display: block; font-size: 56px; line-height: 1; font-weight: 900; letter-spacing: -.02em; }
.zk-kajuit-los > span { display: block; margin-top: 8px; font-weight: 700; }
.zk-vip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tussen); margin-top: var(--tussen); }
.zk-vip li { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; background: var(--romp); border-radius: var(--hoek); }
.zk-vip img { grid-row: span 2; width: 64px; height: 64px; object-fit: contain; }
.zk-vip strong { align-self: end; font-weight: 800; }
.zk-vip span { align-self: start; color: var(--mist); font-size: 14px; }

/* Logbook: two page spread */
.zk-boek { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; background: var(--romp); border: 1px solid var(--touw); border-radius: var(--hoek); }
.zk-blad { padding: 22px 28px 16px; }
.zk-blad + .zk-blad { border-left: 2px dashed var(--touw2); }
.zk-blad h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--bloed); }
.zk-blad small { color: var(--grijs); font-size: 13px; font-weight: 600; }
.zk-blad dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--touw); }
.zk-blad dl div:last-child { border-bottom: 0; }
.zk-blad dt { color: var(--mist); }
.zk-blad dd { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.zk-blad dd.zk-leeg { color: var(--grijs); font-weight: 600; }

/* Games and studios */
.zk-kaften { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--tussen); }
.zk-kaften img { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--hoek); }
.zk-eilanden { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--tussen); }
.zk-eilanden figure { grid-column: span 2; }
.zk-eilanden figure:nth-child(n+4) { grid-column: span 3; }
.zk-eilanden img { width: 100%; aspect-ratio: 5 / 3; border-radius: var(--hoek); }
.zk-vlaggen { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.zk-vlaggen li { background: var(--romp); border-radius: var(--hoek); }
.zk-vlaggen img { width: 100%; aspect-ratio: 16 / 9; }

/* Jackpots and tournaments */
.zk-pot { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tussen); margin-top: 20px; }
.zk-pot div { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; padding: 16px; background: var(--romp); border-radius: var(--hoek); }
.zk-pot img { grid-row: span 2; width: 64px; height: 64px; }
.zk-pot span { align-self: end; color: var(--mist); font-size: 14px; font-weight: 600; }
.zk-pot strong { align-self: start; font-size: 28px; line-height: 1.15; font-weight: 900; font-variant-numeric: tabular-nums; }
.zk-affiches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tussen); margin-top: var(--tussen); }
.zk-affiches li { background: var(--romp); border-radius: var(--hoek); overflow: hidden; }
.zk-affiches img { width: 100%; aspect-ratio: 3 / 2; }
.zk-affiches strong { display: block; padding: 12px 14px 0; font-size: 18px; font-weight: 900; }
.zk-affiches span { display: block; padding: 0 14px 12px; color: var(--mist); font-size: 14px; }

/* Cashier */
.zk-munten { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--tussen); margin-top: 20px; }
.zk-munten li { background: var(--romp); border-radius: var(--hoek); padding: 0 12px 12px; }
.zk-munten img { width: 100%; aspect-ratio: 16 / 9; }
.zk-munten p { margin-top: 8px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zk-munten p span { display: block; color: var(--grijs); font-size: 13px; font-weight: 600; }

/* RG */
.zk-rg { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--tussen); margin-top: 20px; }
.zk-rg > * { padding: 16px; background: var(--romp); border-radius: var(--hoek); border-top: 3px solid var(--bloed); }
.zk-rg-merk { display: flex; align-items: center; gap: 12px; }
.zk-rg strong { font-weight: 800; font-size: 15px; }
.zk-rg-tel span { display: block; color: var(--mist); font-size: 14px; }

/* FAQ */
.zk-vragen { display: grid; grid-template-columns: 1fr 384px; gap: 32px; align-items: start; margin-top: 8px; }
.zk-vragen-kaart { position: relative; display: block; margin-top: 12px; background: var(--romp); border-radius: var(--hoek); overflow: hidden; }
.zk-vragen-kaart div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.zk-vragen-kaart strong { display: block; font-weight: 800; }
.zk-vragen-kaart p span { color: var(--mist); font-size: 14px; }
.zk-vragen details { border-bottom: 1px solid var(--touw); padding: 14px 0; }
.zk-vragen summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 800; cursor: pointer; list-style: none; }
.zk-vragen summary::-webkit-details-marker { display: none; }
.zk-vragen summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bloed); font-weight: 700; }
.zk-vragen details[open] summary::after { content: "\2212"; }

/* Bonus first screen */
.zk-boven { margin-top: 20px; }
.zk-boven-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.zk-boven-kop .zk-inhoud ol { left: auto; right: 0; }
.zk-schatten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tussen); margin-top: 18px; }
.zk-schatkaart { position: relative; display: flex; flex-direction: column; background: var(--romp); border-radius: var(--hoek); overflow: hidden; }
.zk-schatkaart img { width: 100%; aspect-ratio: 2 / 1; }
.zk-schatkaart div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.zk-schatkaart strong { display: block; font-size: 18px; font-weight: 800; }
.zk-schatkaart p span { color: var(--mist); font-size: 14px; }
.zk-boven .zk-knoprij { margin-top: 16px; }

/* Route table per deposit */
.zk-etappes { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--romp); border: 1px solid var(--touw); border-radius: var(--hoek); font-variant-numeric: tabular-nums; }
.zk-etappes th, .zk-etappes td { padding: 12px 16px; text-align: left; border-top: 1px solid var(--touw); vertical-align: middle; }
.zk-etappes thead th { position: relative; padding-block: 16px; border-top: 0; font-weight: 800; white-space: nowrap; }
.zk-etappes thead th:first-child { color: var(--mist); font-weight: 700; width: 200px; }
.zk-etappes thead b { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--bloed); }
.zk-etappes thead th:not(:first-child):not(:last-child)::after { content: ""; position: absolute; right: 8px; top: 50%; width: 40px; border-top: 2px dashed var(--bloed); }
.zk-etappes tbody th { color: var(--mist); font-weight: 600; }
.zk-etappes td { font-weight: 700; }
.zk-etappes .zk-groot td { font-size: 28px; font-weight: 900; }
.zk-etappes .zk-crypto, .zk-etappes td:last-child { background: var(--touw); }
.zk-etappes thead th:last-child { border-top-right-radius: var(--hoek); }
.zk-etappes tr:last-child td:last-child { border-bottom-right-radius: var(--hoek); }

/* Steps */
.zk-stappen { display: grid; gap: var(--tussen); margin-top: 20px; }
.zk-stappen ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tussen); }
.zk-stappen ol li { padding: 18px 16px; background: var(--romp); border-radius: var(--hoek); }
.zk-stappen ol b { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: var(--bloed); font-weight: 800; }
.zk-stappen ol strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; }
.zk-stappen ol span { display: block; margin-top: 6px; color: var(--mist); font-size: 14px; }
.zk-stappen ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tussen); }
.zk-stappen ul li { display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; border: 1px solid var(--touw2); border-radius: var(--hoek); }
.zk-stappen ul span { color: var(--mist); font-size: 14px; }
.zk-stappen ul strong { font-weight: 800; }

/* Week: rows with art */
.zk-weektabel { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0 8px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.zk-weektabel thead th { padding: 0 16px 2px; text-align: left; color: var(--grijs); font-size: 13px; font-weight: 700; }
.zk-weektabel thead th:first-child { width: 200px; padding-left: 0; }
.zk-weektabel thead th:nth-child(2) { width: 400px; }
.zk-weektabel tbody tr { background: var(--romp); }
.zk-weektabel tbody th { position: relative; padding: 0; width: 200px; border-radius: var(--hoek) 0 0 var(--hoek); overflow: hidden; }
.zk-weektabel tbody th img { width: 200px; height: 100px; border-radius: var(--hoek) 0 0 var(--hoek); }
.zk-weektabel td { padding: 12px 16px; font-weight: 700; }
.zk-weektabel td:last-child { border-radius: 0 var(--hoek) var(--hoek) 0; }
.zk-week-aanbod strong { display: block; font-size: 18px; font-weight: 800; }
.zk-week-aanbod span { color: var(--mist); font-size: 14px; font-weight: 400; }

/* Terms */
.zk-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tussen); margin-top: 20px; }
.zk-paneel { padding: 20px; background: var(--romp); border-radius: var(--hoek); }
.zk-paneel h3 { margin-bottom: 12px; }
.zk-meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 10px; font-size: 14px; }
.zk-meter span { color: var(--mist); }
.zk-meter b { font-weight: 800; font-variant-numeric: tabular-nums; }
.zk-meter i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: linear-gradient(var(--bloed), var(--bloed)) left / var(--w) 100% no-repeat, var(--touw); }
.zk-plafond div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--touw); }
.zk-plafond div:last-child { border-bottom: 0; }
.zk-plafond dt { color: var(--mist); font-size: 14px; }
.zk-plafond dd { font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }

/* Discrepancies in terms */
.zk-klippen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tussen); margin-top: 20px; }
.zk-klippen li { padding: 18px 20px; border: 1px solid var(--touw2); border-radius: var(--hoek); background: var(--romp); }
.zk-klippen h3 { color: var(--mist); font-size: 16px; font-weight: 700; }
.zk-klippen p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; }
.zk-klippen strong { font-size: 28px; line-height: 1.15; font-weight: 900; }
.zk-klippen i { font-style: normal; color: var(--bloed); font-weight: 800; }

/* Footer */
.zk-voet { margin-top: var(--rit); padding: 32px 0; background: var(--romp); border-top: 1px solid var(--touw); }
.zk-voet-boven { display: flex; align-items: center; gap: 32px; padding-bottom: 20px; border-bottom: 2px dashed var(--touw2); }
.zk-voet-route { flex: 1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; font-weight: 700; }
.zk-voet-route b { display: none; }
.zk-voet-route a:hover, .zk-voet-recht a:hover { color: var(--mist); }
.zk-voet-onder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding-top: 16px; }
.zk-voet-recht { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--mist); font-size: 14px; }
.zk-voet-onder .zk-txt { margin: 0; }
.zk-voet-jaar { display: flex; align-items: center; gap: 8px; color: var(--mist); font-size: 14px; }

.zk-plak { display: none; }

/* Mobile: burger only, one column */
@media (max-width: 1239px) and (min-width: 761px) {
  .zk-kaart { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --rit: 48px; }
  html { scroll-padding-top: 68px; }
  body { padding-bottom: 68px; }
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  .zk-route { display: none; }
  .zk-dek-rij { height: 56px; }
  .zk-dek-acties .zk-knop-dek, .zk-dek-acties .zk-18 { display: none; }
  .zk-dek-acties { margin-left: auto; margin-right: 10px; }
  .zk-burger { display: block; }
  .zk-burger summary { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; border: 1px solid var(--touw2); border-radius: var(--hoek); cursor: pointer; list-style: none; }
  .zk-burger summary::-webkit-details-marker { display: none; }
  .zk-burger summary span { display: block; height: 2px; background: var(--wit); }
  .zk-burger-route { position: absolute; left: 0; right: 0; top: 100%; padding: 12px 16px; background: var(--romp); border-bottom: 1px solid var(--touw); }
  .zk-burger-route a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 700; }
  .zk-burger-route b { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bloed); }
  .zk-burger-route .is-hier b { background: var(--bloed); }

  .zk-kaart { grid-template-columns: 1fr; grid-template-areas: "tekst" "art" "knop" "reis"; padding: 16px; margin-top: 12px; row-gap: 14px; background: var(--romp); }
  .zk-kaart-knop .zk-knoprij { margin-top: 0; }
  .zk-reis { margin-top: 2px; }
  .zk-reislijn { display: none; }
  .zk-reis ol { grid-template-columns: 1fr; gap: 16px; border-left: 2px dashed var(--bloed); margin-left: 17px; }
  .zk-reis li { margin-left: -18px; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
  .zk-reis li:nth-child(even) { padding-top: 0; }
  .zk-reis span { margin-top: 0; }
  .zk-reis strong { grid-column: 2; font-size: 28px; }
  .zk-reis em { grid-column: 2; }

  .zk-havens { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zk-haven div { padding: 10px; align-items: flex-end; }
  .zk-haven .zk-pijl { display: none; }
  .zk-haven strong { font-size: 14px; }
  .zk-haven p span { font-size: 13px; }

  .zk-kajuit-los { position: static; transform: none; width: auto; padding: 14px 16px; background: var(--romp); }
  .zk-kajuit-los strong { font-size: 40px; }
  .zk-vip, .zk-boek, .zk-pot, .zk-rg, .zk-schatten, .zk-stappen ol, .zk-stappen ul, .zk-drie, .zk-klippen, .zk-vragen { grid-template-columns: 1fr; }
  .zk-stappen ul { gap: 8px; }
  .zk-vragen { gap: 16px; }
  .zk-blad { padding: 16px; }
  .zk-blad + .zk-blad { border-left: 0; border-top: 2px dashed var(--touw2); }
  .zk-kaften { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .zk-eilanden { grid-template-columns: 1fr 1fr; gap: 8px; }
  .zk-eilanden figure, .zk-eilanden figure:nth-child(n+4) { grid-column: span 1; }
  .zk-eilanden figure:first-child { grid-column: 1 / -1; }
  .zk-vlaggen { grid-template-columns: repeat(4, 1fr); }
  .zk-affiches { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zk-affiches strong { font-size: 16px; padding: 10px 10px 0; }
  .zk-affiches span { font-size: 13px; padding: 0 10px 10px; }
  .zk-munten { grid-template-columns: 1fr 1fr; gap: 10px; }

  .zk-boven { display: flex; flex-direction: column; }
  .zk-boven .zk-schatten { order: 2; }
  .zk-boven .zk-knoprij { order: 1; margin-top: 14px; }
  .zk-boven-kop { flex-direction: column; align-items: flex-start; }
  .zk-boven-kop .zk-inhoud ol { left: 0; right: auto; }
  .zk-schatkaart div { padding: 10px 14px; }

  /* Tables become cards */
  .zk-etappes, .zk-etappes tbody, .zk-etappes tr, .zk-etappes th, .zk-etappes td { display: block; width: 100%; }
  .zk-etappes { background: transparent; border: 0; }
  .zk-etappes thead { display: none; }
  .zk-etappes tbody tr { margin-top: 10px; padding: 12px 14px; background: var(--romp); border-radius: var(--hoek); }
  .zk-etappes tbody th { padding: 0 0 6px; border: 0; color: var(--wit); font-weight: 800; }
  .zk-etappes td, .zk-etappes td:last-child, .zk-etappes .zk-groot td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; background: none; text-align: right; }
  .zk-etappes td::before { content: attr(data-k); flex: none; color: var(--mist); font-weight: 600; text-align: left; }

  .zk-weektabel, .zk-weektabel tbody, .zk-weektabel tr, .zk-weektabel th, .zk-weektabel td { display: block; width: 100%; }
  .zk-weektabel { border-spacing: 0; }
  .zk-weektabel thead { display: none; }
  .zk-weektabel tbody { display: grid; gap: 10px; }
  .zk-weektabel tbody tr { border-radius: var(--hoek); overflow: hidden; }
  .zk-weektabel tbody th { width: 100%; border-radius: 0; }
  .zk-weektabel tbody th img { width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 0; }
  .zk-weektabel td, .zk-weektabel td:last-child { display: flex; justify-content: space-between; gap: 16px; padding: 6px 14px; font-size: 14px; text-align: right; border-radius: 0; }
  .zk-weektabel td::before { content: attr(data-k); flex: none; color: var(--mist); font-weight: 600; }
  .zk-weektabel td:last-child { padding-bottom: 12px; }
  .zk-weektabel .zk-week-aanbod { display: block; padding-top: 12px; text-align: left; }

  .zk-voet-boven { flex-direction: column; align-items: flex-start; gap: 16px; }
  .zk-voet-route { justify-content: flex-start; }
  .zk-voet-onder { grid-template-columns: 1fr; gap: 12px; }

  .zk-plak { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 16px; background: var(--romp); border-top: 1px solid var(--touw); }
  .zk-plak .zk-knop { flex: 1; min-height: 44px; }
}

/* Text blocks: prose up to 800 px, side card keeps the right edge occupied */
.zk-twee { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 32px; align-items: start; margin-top: 16px; }
.zk-proza { max-width: 800px; }
.zk-proza p, .zk-proza ul, .zk-proza ol { margin-top: 12px; }
.zk-proza > :first-child { margin-top: 0; }
.zk-proza-los { margin-top: 16px; }
.zk-proza a, .zk-antwoord a, .zk-lead a { color: var(--wit); text-decoration: underline; text-decoration-color: var(--bloed); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.zk-proza a:hover, .zk-antwoord a:hover, .zk-lead a:hover { color: var(--mist); }
.zk-proza ul li { position: relative; padding-left: 20px; margin-top: 6px; }
.zk-proza ul li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--bloed); }
.zk-proza ol { counter-reset: zkn; }
.zk-proza ol li { position: relative; padding-left: 40px; margin-top: 10px; counter-increment: zkn; min-height: 28px; }
.zk-proza ol li::before { content: counter(zkn); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bloed); font-size: 14px; font-weight: 800; }
.zk-zij { display: grid; gap: var(--tussen); }
.zk-notitie { padding: 18px 20px 8px; background: var(--romp); border: 1px solid var(--touw); border-radius: var(--hoek); }
.zk-notitie h3 { padding-bottom: 10px; border-bottom: 2px solid var(--bloed); }
.zk-notitie dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--touw); font-size: 15px; }
.zk-notitie dl div:last-child { border-bottom: 0; }
.zk-notitie dt { color: var(--mist); }
.zk-notitie dd { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.zk-let { margin-top: 16px; padding: 12px 16px; background: var(--romp); border-left: 4px solid var(--bloed); border-radius: 0 var(--hoek) var(--hoek) 0; }
.zk-lead { color: var(--wit); }
.zk-antwoord { margin-top: 8px; color: var(--mist); }
.zk-voet-tekst { margin-top: 14px; color: var(--grijs); font-size: 14px; max-width: 900px; }

/* Data table: same grid and alignment on every page */
.zk-tabel { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--romp); border: 1px solid var(--touw); border-radius: var(--hoek); font-variant-numeric: tabular-nums; }
.zk-tabel th, .zk-tabel td { padding: 12px 16px; text-align: left; vertical-align: middle; border-top: 1px solid var(--touw); }
.zk-tabel thead th { border-top: 0; color: var(--mist); font-size: 14px; font-weight: 700; }
.zk-tabel tbody th { font-weight: 700; color: var(--mist); }
.zk-tabel td { font-weight: 700; }

/* Hero of inner pages: art with a figure card next to it */
.zk-boven-rij { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: var(--tussen); margin-top: 18px; align-items: stretch; }
.zk-boven-art { position: relative; border-radius: var(--hoek); overflow: hidden; }
.zk-boven-art img { width: 100%; aspect-ratio: 2 / 1; }
.zk-boven-band { position: relative; margin-top: 18px; border-radius: var(--hoek); overflow: hidden; }
.zk-boven-band img { width: 100%; aspect-ratio: 1536 / 500; }
.zk-boven-rij .zk-notitie { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 760px) {
  .zk-twee { grid-template-columns: 1fr; gap: 16px; }
  .zk-boven-rij { grid-template-columns: 1fr; }
  .zk-tabel, .zk-tabel tbody, .zk-tabel tr, .zk-tabel th, .zk-tabel td { display: block; width: 100%; }
  .zk-tabel { background: transparent; border: 0; }
  .zk-tabel thead { display: none; }
  .zk-tabel tbody tr { margin-top: 10px; padding: 12px 14px; background: var(--romp); border-radius: var(--hoek); }
  .zk-tabel tbody th { padding: 0 0 6px; border: 0; color: var(--wit); font-weight: 800; }
  .zk-tabel td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; text-align: right; }
  .zk-tabel td::before { content: attr(data-k); flex: none; color: var(--mist); font-weight: 600; text-align: left; }
}

.zk-kaften a { display: block; }
.zk-boven > .zk-metka { margin-top: 10px; }
.zk-lead-los { max-width: 800px; margin-top: 10px; }
.zk-boven-band .zk-notitie { position: absolute; top: 50%; right: 24px; width: 340px; transform: translateY(-50%); background: var(--zee); }
.zk-band-links .zk-notitie { right: auto; left: 24px; }
@media (max-width: 760px) {
  .zk-boven .zk-boven-rij, .zk-boven .zk-boven-band { order: 2; }
  .zk-boven-band .zk-notitie { position: static; width: auto; transform: none; background: var(--romp); margin-top: 10px; }
  .zk-boven-band { overflow: visible; }
  .zk-boven-band img { border-radius: var(--hoek); }
}