/* Hallmark: free | theme: atlas | Stad, Land, Prik | NL topografietrainer */
/* critique: de kaart is het product, tekst blijft klein ernaast; rood is alleen voor de speler en zijn fout */
/* waivers: 7a pure wit is Sams merkregel (wit + koel grijs); 24b optische maten bij de kaart */
@font-face{font-family:Archivo;src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --font:Archivo,system-ui,sans-serif;
  --inkt:#0c2433;--inkt-2:#3e5463;--inkt-3:#566b79;--lijn:#d8e1e7;--vlak:#eff4f7;--wit:#fff;
  --zee:#0f4c68;--zee-2:#0b3a50;--zee-licht:#2b7396;--land:#fbfdfe;--land-rand:#9db2bf;--buur:#c9d6de;
  --rivier:#6fb0d3;--buur-rand:#aebfca;--op-zee:#d7e6ee;--op-zee-2:#b5cdd9;--goed-zee:#8ff0cd;--fout-zee:#ffc1b5;--lijn-zee:rgb(255 255 255/.22);--schaduw:rgb(5 25 38/.75);
  --rood:#de321d;--rood-d:#b5260f;--groen:#0d7d5f;--geel:#c98a06;
  --gutter:clamp(16px,4vw,48px);--max:1240px;
  --snel:160ms;--midden:260ms;--uit:cubic-bezier(.22,.8,.3,1);--veer:cubic-bezier(.3,1.5,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 17px/1.55 var(--font);color:var(--inkt);background:var(--wit);-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;font-family:var(--font);line-height:1.04;margin:0;overflow-wrap:break-word;min-width:0;font-stretch:112%;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(38px,5.1vw,70px);font-weight:750}
h2{font-size:clamp(27px,3.1vw,42px)}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1em;max-width:66ch}
a{color:var(--zee);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--rood-d)}
:focus-visible{outline:3px solid var(--rood);outline-offset:2px;border-radius:3px}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* kop en voet */
.kop{position:sticky;top:0;z-index:30;background:color-mix(in oklab,var(--wit) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;align-items:center;gap:28px;height:60px}
.merk{font-weight:800;font-stretch:118%;font-size:19px;letter-spacing:-.02em;color:var(--inkt);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.merk svg{width:15px;height:22px;flex:none}
.menu{display:flex;gap:22px;margin-left:auto;font-size:15.5px}
.menu a{color:var(--inkt-2);text-decoration:none;white-space:nowrap;padding:6px 0}
.menu a:hover,.menu a[aria-current]{color:var(--inkt)}
.menu a[aria-current]{box-shadow:inset 0 -2px var(--rood)}
.menuknop{display:none;margin-left:auto;background:none;border:0;font:inherit;font-weight:600;color:var(--inkt);padding:8px 0;cursor:pointer}
.voet{background:var(--zee-2);color:var(--op-zee);margin-top:96px;overflow:hidden}
.voet .wrap{padding-block:56px 28px}
.voet a{color:var(--wit)}
.voet-kol{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px;font-size:15.5px}
.voet ul{list-style:none;margin:0;padding:0}.voet li{margin:0 0 7px}
.voet-titel{color:var(--wit);font-weight:650;margin:0 0 10px}
.voet-naam{font-size:min(8.3vw,102px);font-weight:800;font-stretch:125%;letter-spacing:-.04em;line-height:.9;color:var(--zee-licht);margin-top:44px;white-space:nowrap}
.voet small{display:block;margin-top:18px;font-size:14px;color:var(--op-zee-2);max-width:90ch}

/* hero met spel */
.held{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);min-height:calc(100svh - 61px);max-height:860px}
.held-tekst{padding:clamp(28px,5vh,64px) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
.held-tekst>p{font-size:19px;color:var(--inkt-2);margin:0}
.held-tekst .spelkeuze{margin-top:6px}
.spelvlak{position:relative;min-width:0;background:var(--zee);isolation:isolate}
.held-tekst #info h3{margin-bottom:4px}
.held-tekst .filter{margin-top:4px}
.held-tekst .bron{margin:0}
@media (min-width:981px){
  .held.breed{grid-template-columns:minmax(0,1fr);max-height:none;min-height:0}
  .held.breed .held-tekst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:10px 48px;max-width:var(--max);width:100%;margin-inline:auto;padding-block:30px 22px}
  .held.breed .held-tekst .spelkeuze{grid-column:2;grid-row:1;margin:0}
  .held.breed .held-tekst>p{grid-column:1}
  .held.breed .spelvlak{height:min(41vw,calc(100svh - 300px));min-height:420px}
}
.spelvlak.los{height:clamp(440px,74vh,760px)}
.kaart{position:absolute;inset:0;overflow:hidden;touch-action:none;background:var(--zee)}
.kaart-svg,.kaart-svg svg,.kaart-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.kaart-img{object-fit:contain;opacity:.9}
.kaart-svg svg{cursor:crosshair;user-select:none;-webkit-user-select:none}
.kaart[data-modus=kijk] .kaart-svg svg{cursor:grab}
.l{fill:var(--land);stroke:var(--land-rand);stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill var(--midden)}
.b{fill:var(--buur);stroke:var(--buur-rand);stroke-width:.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.w{fill:none;stroke:var(--rivier);stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--midden)}
.l.uit{fill:color-mix(in oklab,var(--rood) 26%,var(--land))}
.w.uit{stroke:var(--rood);stroke-width:3.4px}
.l.schaal{fill:var(--tint)}
.l.aan{fill:color-mix(in oklab,var(--zee-licht) 28%,var(--land))}
.afstandslijn{stroke:var(--rood);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pin-kop{fill:var(--rood);stroke:var(--wit);stroke-width:1.4}
.pin-oog{fill:var(--wit)}
.pin-jij>g{animation:val 380ms var(--veer) both;transform-origin:0 0}
.pin-doel>g{animation:pop 300ms var(--veer) both}
.pin-ring{fill:color-mix(in oklab,var(--groen) 22%,transparent);stroke:var(--groen);stroke-width:1.6}
.pin-punt{fill:var(--groen);stroke:var(--wit);stroke-width:1.4}
@keyframes val{from{transform:translateY(-34px);opacity:0}60%{opacity:1}to{transform:none}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none}}
.kaartlabel{font:700 15px var(--font);color:var(--wit);fill:var(--inkt);paint-order:stroke;stroke:var(--wit);stroke-width:3.5px;stroke-linejoin:round;text-anchor:middle;dominant-baseline:auto;pointer-events:none}
.kaartlabel.klein{font-size:11.5px;font-weight:550;stroke-width:2.6px}
.stip{stroke:var(--wit);stroke-width:1.2;fill:var(--zee)}
.stip-jij{fill:var(--rood)}.stip-doel{fill:var(--groen)}
.stip.bel{fill:color-mix(in oklab,var(--rood) 55%,transparent);stroke:var(--rood-d)}

.spelbalk{position:absolute;z-index:3;left:14px;right:14px;top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}
.vraag{background:var(--wit);color:var(--inkt);font-weight:750;font-stretch:112%;font-size:clamp(20px,2.3vw,30px);line-height:1.1;padding:10px 16px;border-radius:7px;letter-spacing:-.015em;box-shadow:0 8px 22px -12px var(--schaduw);max-width:min(100%,520px);pointer-events:auto}
.vraag.wissel{animation:wissel 300ms var(--uit) both}
@keyframes wissel{from{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
.stand{background:var(--wit);color:var(--inkt-2);text-align:right;font-size:14px;line-height:1.2;padding:7px 11px;border-radius:7px;box-shadow:0 8px 22px -12px var(--schaduw);white-space:nowrap}
.stand b{display:block;color:var(--inkt);font-size:22px;font-weight:750;font-variant-numeric:tabular-nums}
.spelonder{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;pointer-events:none}
.uitkomst{min-height:1em;white-space:nowrap;color:var(--inkt);font-size:clamp(34px,4.6vw,58px);font-weight:800;font-stretch:115%;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.uitkomst:not(:empty){width:fit-content;background:var(--wit);padding:7px 14px;border-radius:7px;box-shadow:0 8px 22px -12px var(--schaduw)}
@media (max-width:640px){.uitkomst{font-size:26px}.uitkomst:not(:empty){padding:6px 11px}}
@media (max-width:360px){.uitkomst{font-size:22px}}
.knop{font:650 16.5px var(--font);background:var(--rood);color:var(--wit);border:0;border-radius:7px;padding:12px 18px;cursor:pointer;text-decoration:none;display:inline-block;transition:background-color var(--snel),transform var(--snel) var(--uit)}
.knop:hover{background:var(--rood-d);color:var(--wit)}.knop:active{transform:scale(.97)}
.knop[hidden]{display:none}
.knop.twee{background:var(--vlak);color:var(--inkt)}.knop.twee:hover{background:var(--lijn);color:var(--inkt)}
.spelonder .knop{pointer-events:auto;white-space:nowrap;box-shadow:0 8px 22px -10px var(--schaduw);animation:wissel 240ms var(--uit) both}
.zoom{display:flex;flex-direction:column;gap:6px;pointer-events:auto;margin-left:auto}
.zoom button{width:40px;height:40px;background:var(--wit);color:var(--inkt);border:0;border-radius:7px;font:700 20px var(--font);cursor:pointer;box-shadow:0 6px 16px -10px var(--schaduw)}
.zoom button:hover{background:var(--vlak)}
.kaart .zoom{position:absolute;z-index:2;right:14px;top:50%;translate:0 -50%}
.kaart:has(svg:focus-visible)::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:22px;height:22px;translate:-50% -50%;border:2px solid var(--rood);border-radius:50%;pointer-events:none}
.uitslag{position:absolute;z-index:4;right:14px;top:14px;bottom:14px;width:min(340px,calc(100% - 28px));background:var(--wit);color:var(--inkt);border-radius:9px;padding:18px;display:flex;flex-direction:column;gap:8px;overflow:auto;animation:paneel 340ms var(--uit) both}
.uitslag[hidden]{display:none}
@keyframes paneel{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.uitslag strong{font-size:48px;line-height:1;font-weight:800;font-stretch:115%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.uitslag p{margin:0;font-size:15.5px;color:var(--inkt-2)}
.uitslag ol{list-style:none;margin:4px 0;padding:0;font-size:14.5px;flex:1}
.uitslag li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--vlak)}
.uitslag li span:last-child{font-variant-numeric:tabular-nums;color:var(--inkt-2)}
.uitslag .rij{display:flex;gap:8px;flex-wrap:wrap}
.uitslag .knop{padding:9px 13px;font-size:15px}
.klaar .stand{visibility:hidden}

/* keuzetabs */
.spelkeuze{display:flex;flex-wrap:wrap;gap:6px}
.spelkeuze button{font:550 15.5px var(--font);background:var(--vlak);color:var(--inkt);border:0;border-radius:6px;padding:8px 12px;cursor:pointer;transition:background-color var(--snel),color var(--snel),transform var(--snel) var(--uit)}
.spelkeuze button:hover{background:var(--lijn)}
.spelkeuze button:active,.zoom button:active,.vlagquiz button.opt:active{transform:scale(.97)}
:disabled{opacity:.7;cursor:not-allowed}
.spelkeuze button[aria-pressed=true]{background:var(--zee);color:var(--wit)}

/* inhoud */
main section{margin-top:clamp(56px,8vw,104px)}
.kolom{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.kolom.om{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.intro{padding-top:clamp(30px,5vw,60px)}
.intro h1{max-width:18ch}
.intro .lead{font-size:clamp(18px,1.6vw,21px);color:var(--inkt-2);margin-top:14px;max-width:58ch}
.sectiekop{margin-bottom:16px;max-width:24ch}
.tabel-wrap{overflow-x:auto;margin-top:12px}
table{border-collapse:collapse;width:100%;font-size:15.5px;font-variant-numeric:tabular-nums}
th{font-weight:600;text-align:left;color:var(--inkt-3);padding:8px 14px 8px 0;border-bottom:1.5px solid var(--inkt);white-space:nowrap}
th button{all:unset;cursor:pointer}
th button:focus-visible{outline:3px solid var(--rood)}
th[aria-sort] button::after{content:" ↓"}
th[aria-sort=ascending] button::after{content:" ↑"}
td{padding:7px 14px 7px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
td.n,th.n{text-align:right;white-space:nowrap}
td small{display:block;color:var(--inkt-3);font-size:13.5px;line-height:1.3}
tr[hidden]{display:none}
.vlagje{width:26px;height:19.5px;display:inline-block;vertical-align:-4px;margin-right:9px;border:1px solid var(--lijn);border-radius:2px;object-fit:cover}
.zoekveld{font:400 17px var(--font);width:min(100%,420px);padding:11px 13px;border:1.5px solid var(--inkt);border-radius:7px;background:var(--wit);color:var(--inkt)}
.filter{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.lijst-sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:22px}
.lijst-sets ul{margin:6px 0 0;padding:0;list-style:none;columns:2;column-gap:18px;font-size:15.5px}
.lijst-sets li{break-inside:avoid;padding:1px 0}
.routes{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--lijn)}
.routes li{border-bottom:1px solid var(--lijn)}
.routes a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:16px 0;text-decoration:none;color:var(--inkt);align-items:baseline}
.routes a b{font-size:clamp(21px,2.3vw,30px);font-weight:700;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;transition:color var(--snel)}
.routes a span{color:var(--inkt-2);font-size:16px}
.routes a:hover b{color:var(--rood)}
.stappen{counter-reset:s;list-style:none;margin:16px 0 0;padding:0}
.stappen li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;margin-bottom:12px}
.stappen li::before{content:counter(s);font-weight:800;font-size:22px;line-height:1.2;color:var(--rood)}
.vlaggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 14px;margin-top:20px;font-size:14px;line-height:1.25}
.vlaggrid figure{margin:0}
.vlaggrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--lijn);border-radius:3px;display:block;margin-bottom:5px}
.vlagquiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;background:var(--zee);color:var(--wit);padding:clamp(20px,4vw,48px);border-radius:10px;margin-top:22px}
.vlagquiz img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;display:block;box-shadow:0 18px 40px -22px var(--schaduw)}
.vlagquiz .opties{display:grid;gap:8px}
.vlagquiz button.opt{font:600 18px var(--font);text-align:left;background:var(--wit);color:var(--inkt);border:0;border-radius:7px;padding:12px 14px;cursor:pointer;transition:background-color var(--snel),transform var(--snel) var(--uit)}
.vlagquiz button.opt:hover{background:var(--vlak)}
.vlagquiz button.opt.goed{background:var(--groen);color:var(--wit)}
.vlagquiz button.opt.fout{background:var(--rood);color:var(--wit);animation:schud 300ms}
@keyframes schud{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.vlagquiz p{margin:0 0 10px;color:var(--op-zee)}
.bron{font-size:14.5px;color:var(--inkt-3);margin-top:10px}
.geen-js{background:var(--vlak);padding:10px 14px;border-radius:7px}
.js .geen-js{display:none}
.kaarttip{position:absolute;z-index:5;pointer-events:none;background:var(--wit);color:var(--inkt);font-size:14.5px;font-weight:600;padding:5px 9px;border-radius:5px;box-shadow:0 8px 18px -10px var(--schaduw);transform:translate(-50%,-140%);white-space:nowrap}
.kaarttip[hidden]{display:none}
.proza{max-width:68ch}.proza h2{margin:36px 0 12px}
.proza h1{max-width:20ch}
.mooi-lijst{margin:12px 0;padding-left:20px}

/* stad land rivier */
.slr{background:var(--zee);color:var(--wit);border-radius:10px;padding:clamp(18px,4vw,44px);margin-top:22px}
.slr a{color:var(--wit)}
.slr .letter{font-size:clamp(90px,16vw,190px);font-weight:800;font-stretch:125%;line-height:.9;letter-spacing:-.05em}
.slr .klok{font-size:32px;font-weight:750;font-variant-numeric:tabular-nums}
.slr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.slr-velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slr-velden label{font-weight:600;font-size:15.5px}
.slr-velden input{display:block;width:100%;margin-top:4px;font:500 19px var(--font);padding:11px 12px;border:0;border-radius:7px;color:var(--inkt)}
.slr-rij{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.slr-uitslag{width:100%;margin-top:14px;font-size:15.5px}
.slr-uitslag th{color:var(--op-zee);border-color:var(--wit)}.slr-uitslag td{border-color:var(--lijn-zee)}
.slr .tekstveld{font:500 18px var(--font);padding:10px 12px;border:0;border-radius:7px;width:min(100%,220px);color:var(--inkt)}
.slr .goed{color:var(--goed-zee)}.slr .fout{color:var(--fout-zee);text-decoration:line-through}
.slr .knop.twee{background:var(--wit)}

@media (max-width:980px){
  .menu{display:none;position:absolute;top:60px;left:0;right:0;background:var(--wit);flex-direction:column;gap:0;padding:6px var(--gutter) 14px;border-bottom:1px solid var(--lijn)}
  .menu.open{display:flex}.menu a{padding:10px 0}
  .menuknop{display:block}
  .held{grid-template-columns:minmax(0,1fr);max-height:none;min-height:0}
  .held-tekst{padding-block:20px 14px;gap:9px}
  .held-tekst>p{font-size:16.5px}
  .held .spelvlak{height:62svh;min-height:400px}
  h1{font-size:clamp(32px,8.6vw,48px)}
  .kolom,.kolom.om{grid-template-columns:minmax(0,1fr)}
  .lijst-sets{grid-template-columns:minmax(0,1fr)}
  .voet-kol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .routes a{grid-template-columns:minmax(0,1fr);gap:2px}
  .vlagquiz{grid-template-columns:minmax(0,1fr)}
  .vlagquiz img{max-height:30svh;object-fit:contain;width:auto;margin-inline:auto;aspect-ratio:auto}
  .slr-velden{grid-template-columns:minmax(0,1fr)}
  .uitslag{left:10px;right:10px;width:auto;top:10px;bottom:10px}
  .zoom{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.kop,.voet,.spelbalk,.spelonder,.geen-print{display:none!important}}