.wk { --px: 10; display: block; width: 100%; height: 100%; overflow: visible; font-family: 'Atkinson', 'Segoe UI', system-ui, sans-serif; user-select: none; -webkit-user-select: none; }

.wk .land { fill: #d3e6a6; }
.wk .land-strand { fill: none; stroke: #f3dc93; stroke-width: calc(var(--px) * 9px); stroke-linejoin: round; }
.wk .eiland { fill: #b5d867; }
.wk .waas { fill: #f7f2e0; opacity: .42; }
.wk .eiland-rand { fill: none; stroke: #2f6b2a; stroke-width: max(calc(var(--px) * 3.2px), 4px); stroke-linejoin: round; opacity: .9; }
.wk .water { fill: #6ec1ee; stroke: #3d8fcf; stroke-width: calc(var(--px) * 1.2px); }
.wk .kanaal { fill: none; stroke: #6ec1ee; stroke-width: max(calc(var(--px) * 2.6px), 12px); stroke-linecap: round; stroke-linejoin: round; }
.wk .sloot { fill: none; stroke: #7cc8f0; stroke-width: max(calc(var(--px) * 1.1px), 2.5px); stroke-linecap: round; }
.wk .wad { fill: url(#p-wad); opacity: .38; }  

.wk .v-akker { fill: url(#p-akker); }
.wk .v-gras { fill: #a5d25d; }
.wk .v-nat { fill: url(#p-nat); }
.wk .v-struik { fill: #8fbf55; }
.wk .v-bos { fill: url(#p-bos); stroke: #3f7a2c; stroke-width: calc(var(--px) * .8px); }
.wk .v-wonen { fill: #efdfb6; }
.wk .v-erf { fill: #e2d4a4; }
.wk .v-bedrijf { fill: #d9d1c2; }
.wk .v-camping { fill: url(#pat-camping); }
.wk .v-tuinen { fill: #bcd97a; }
.wk .v-kerkhof { fill: #93c06d; }
.wk .v-sport { fill: #86c85a; stroke: #f4f9ea; stroke-width: calc(var(--px) * .8px); }
.wk .v-parkeer { fill: #dcd6ca; }
.wk .v-strand { fill: #f3dc93; }
.wk .v-pier { fill: #c9bc9f; stroke: #8f846f; stroke-width: calc(var(--px) * .8px); }

.wk .dijk { fill: none; stroke: #8dbd55; stroke-width: max(calc(var(--px) * 5px), 16px); stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.wk .dijk-kam { fill: none; stroke: #4f8a30; stroke-width: max(calc(var(--px) * 1.2px), 2.5px); stroke-linecap: round; stroke-dasharray: calc(var(--px) * 6px) calc(var(--px) * 4px); }
.wk .pierlijn { fill: none; stroke: #9b9384; stroke-width: max(calc(var(--px) * 2.8px), 5px); stroke-linecap: round; }
.wk .buurtgrens { fill: none; stroke: #9a5b2a; stroke-width: calc(var(--px) * 1.8px); stroke-dasharray: calc(var(--px) * 7px) calc(var(--px) * 5px); opacity: .6; display: none; }
.wk .bomenrij { fill: none; stroke: #3f8a34; stroke-width: max(calc(var(--px) * 4px), 7px); stroke-linecap: round; stroke-dasharray: 0 max(calc(var(--px) * 5px), 9px); }

.wk .g-huis { fill: #d9a477; stroke: #6b4a32; stroke-width: calc(var(--px) * .7px); }
.wk .g-schuur { fill: #c8baa3; stroke: #6b5a45; stroke-width: calc(var(--px) * .7px); }
.wk .g-kerk { fill: #b5532f; stroke: #5b2a14; stroke-width: calc(var(--px) * .9px); }
.wk .g-bunker { fill: #9aa1a6; stroke: #4c5358; stroke-width: calc(var(--px) * .9px); }

.wk use[class^="wr-"], .wk use[class^="wv-"] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wk .wr-pad { stroke: none; }
.wk .wv-pad { stroke: #8f6f45; stroke-width: max(calc(var(--px) * 1.4px), 1.2px); stroke-dasharray: calc(var(--px) * 3.5px) calc(var(--px) * 2.5px); }
.wk .wr-akkerpad { stroke: #a08155; stroke-width: max(calc(var(--px) * 3.6px), 4.5px); }
.wk .wv-akkerpad { stroke: #eedfae; stroke-width: max(calc(var(--px) * 2.1px), 3px); }
.wk .wr-fiets { stroke: #8b3a2a; stroke-width: max(calc(var(--px) * 3.6px), 4.2px); }
.wk .wv-fiets { stroke: #e98a74; stroke-width: max(calc(var(--px) * 2.2px), 2.8px); }
.wk .wr-dienst { stroke: #8a7350; stroke-width: max(calc(var(--px) * 3.8px), 5px); }
.wk .wv-dienst { stroke: #fbf3d6; stroke-width: max(calc(var(--px) * 2.4px), 3.5px); }
.wk .wr-straat { stroke: #6b5134; stroke-width: max(calc(var(--px) * 5.2px), 9px); }
.wk .wv-straat { stroke: #fff8e1; stroke-width: max(calc(var(--px) * 3.4px), 7px); }
.wk .wr-gebied { stroke: #6b4a20; stroke-width: max(calc(var(--px) * 6.8px), 12px); }
.wk .wv-gebied { stroke: #f6d77d; stroke-width: max(calc(var(--px) * 4.6px), 9px); }
.wk .wr-hoofd { stroke: #5b3a14; stroke-width: max(calc(var(--px) * 8.6px), 16px); }
.wk .wv-hoofd { stroke: #e8a648; stroke-width: max(calc(var(--px) * 6px), 12px); }
.wk .wr-snel { stroke: #4a2c10; stroke-width: max(calc(var(--px) * 10px), 22px); }
.wk .wv-snel { stroke: #cf7f4c; stroke-width: max(calc(var(--px) * 7.2px), 16px); }

.wk text { paint-order: stroke; stroke-linejoin: round; text-anchor: middle; dominant-baseline: central; }
.wk .l-dorp { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: calc(var(--px) * 25px); fill: #1b2230; stroke: #fff; stroke-width: calc(var(--px) * 5px); letter-spacing: .01em; }
.wk .l-dorp.l-buiten { font-size: calc(var(--px) * 16px); fill: #5a6270; font-weight: 700; }
.wk .l-gehucht { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: calc(var(--px) * 14.5px); fill: #2b2b2b; stroke: #fff; stroke-width: calc(var(--px) * 4px); }
.wk .l-gehucht.l-buiten { fill: #6a717b; font-size: calc(var(--px) * 12.5px); }
.wk .l-plek { font-style: italic; font-size: calc(var(--px) * 12px); fill: #3a3a3a; stroke: #fff; stroke-width: calc(var(--px) * 3.5px); }
.wk .l-buurt { font-weight: 700; font-size: calc(var(--px) * 12px); letter-spacing: .22em; text-transform: uppercase; fill: #9a5b2a; stroke: #fdf6e3; stroke-width: calc(var(--px) * 3.5px); display: none; }
.wk .l-water { font-family: 'Bitter', Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(var(--px) * 13.5px); fill: #1f5fa8; stroke: #dff1fb; stroke-width: calc(var(--px) * 3.5px); }
.wk .l-water.l-groot { font-size: calc(var(--px) * 19px); letter-spacing: .12em; }
.wk .l-water.l-zee { font-size: calc(var(--px) * 26px); letter-spacing: .32em; stroke: none; fill: #1f5fa8; opacity: .8; }
.wk .l-wad { font-family: 'Bitter', Georgia, serif; font-style: italic; font-size: calc(var(--px) * 13px); fill: #7a5d22; stroke: #f6eccb; stroke-width: calc(var(--px) * 3px); }
.wk .l-bos { font-style: italic; font-weight: 700; font-size: calc(var(--px) * 12.5px); fill: #245a20; stroke: #eaf5d8; stroke-width: calc(var(--px) * 3.5px); }
.wk .l-straat { font-weight: 700; font-size: calc(var(--px) * 12.5px); fill: #3a2a1a; stroke: #fffbea; stroke-width: calc(var(--px) * 3.6px); display: none; }
.wk .l-straat.l-hoofd, .wk .l-straat.l-gebied, .wk .l-straat.l-snel { font-size: calc(var(--px) * 13.5px); fill: #2b1d0e; }
.wk .l-straat.toon { display: inline; }
.wk .banier text { dominant-baseline: auto; }  
.wk .banier-titel { font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 215px; fill: #2b1d0e; stroke: none; }
.wk .banier-sub { font-family: 'Bitter', Georgia, serif; font-style: italic; font-weight: 700; font-size: 92px; fill: #c0392b; stroke: none; letter-spacing: .08em; }
.wk .schild-t { font-weight: 700; font-size: 12px; fill: #2b1d0e; stroke: none; }
.wk .schild-t.wit { fill: #fff; }

.wk[data-z="0"] .sloot, .wk[data-z="0"] .wv-pad, .wk[data-z="0"] .bomenrij,
.wk[data-z="1"] .wv-pad { display: none; }
.wk[data-z="0"] .wr-pad, .wk[data-z="0"] .wr-akkerpad, .wk[data-z="0"] .wv-akkerpad { display: none; }
.wk[data-z="2"] .buurtgrens, .wk[data-z="3"] .buurtgrens { display: inline; }
.wk[data-z="2"] .l-buurt, .wk[data-z="3"] .l-buurt, .wk[data-z="4"] .l-buurt { display: inline; }
.wk[data-z="3"] .decor-land, .wk[data-z="4"] .decor-land, .wk[data-z="5"] .decor-land { display: none; }
.wk .poi { display: none; cursor: pointer; }
.wk[data-z="3"] .poi, .wk[data-z="4"] .poi, .wk[data-z="5"] .poi { display: inline; }
.wk .lm { cursor: pointer; }
.wk[data-z="0"] .lm-kazemat, .wk[data-z="1"] .lm-kazemat, .wk[data-z="0"] .lm-gemaal { display: none; }
.wk[data-z="0"] .l-gehucht { font-size: calc(var(--px) * 12px); }
.wk[data-z="0"] .l-gehucht.l-buiten, .wk[data-z="0"] .l-plek { display: none; }
.wk[data-z="4"] .l-dorp, .wk[data-z="5"] .l-dorp { opacity: .55; }
.wk .huisnr { font-size: calc(var(--px) * 10px); fill: #5b3a20; stroke: #fff; stroke-width: calc(var(--px) * 2.5px); font-weight: 700; }


.kaart-app { position: relative; display: grid; gap: 1rem; }
@media (min-width: 1000px) { .kaart-app { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }

.kaart-venster { position: relative; height: min(78vh, 52rem); min-height: 26rem; border-radius: var(--radius, 14px); overflow: hidden; background: #6ec1ee; box-shadow: var(--schaduw); border: 3px solid #2b1d0e; touch-action: none; outline: none; }
.kaart-venster:focus-visible { box-shadow: 0 0 0 4px var(--zon, #f7c913); }
.kaart-venster.vol { position: fixed; inset: 0; height: auto; min-height: 0; z-index: 1000; border-radius: 0; border: 0; }
body.kaart-vol { overflow: hidden; }
.kaart-podium { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.kaart-podium > svg { position: absolute; inset: 0; }
.kaart-laag { position: absolute; inset: 0; pointer-events: none; }
.kaart-laag > * { pointer-events: auto; }
.kaart-laden { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

.kaart-knoppen { position: absolute; right: .75rem; top: .75rem; display: flex; flex-direction: column; gap: .5rem; z-index: 3; }
.kaart-knop { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border: 2px solid #2b1d0e; border-radius: 12px; background: #fbf3dc; color: #2b1d0e; cursor: pointer; box-shadow: 0 2px 0 #2b1d0e; padding: 0; }
.kaart-knop:hover { background: #fff; }
.kaart-knop:active { transform: translateY(2px); box-shadow: none; }
.kaart-knop[aria-pressed="true"] { background: var(--zon, #f7c913); }
.kaart-knop svg { width: 1.4rem; height: 1.4rem; }

.kaart-zoek { position: absolute; left: .75rem; top: .75rem; right: 4.5rem; max-width: 24rem; z-index: 4; }
.kaart-zoek input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .65rem .9rem .65rem 2.4rem; border: 2px solid #2b1d0e; border-radius: 12px; background: #fffdf6; box-shadow: 0 2px 0 #2b1d0e; }
.kaart-zoek .ic { position: absolute; left: .7rem; top: .78rem; width: 1.15rem; height: 1.15rem; color: #6b5a45; pointer-events: none; }
.kaart-zoek ul { list-style: none; margin: .35rem 0 0; padding: .25rem; background: #fffdf6; border: 2px solid #2b1d0e; border-radius: 12px; max-height: 18rem; overflow: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.kaart-zoek li { padding: .5rem .65rem; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1.3; }
.kaart-zoek li small { display: block; color: var(--tekst-zacht, #475063); font-size: .85rem; }
.kaart-zoek li[aria-selected="true"], .kaart-zoek li:hover { background: var(--geel-zacht, #fdf3c4); }

.kaart-filter { position: absolute; left: .75rem; bottom: .75rem; z-index: 3; display: flex; flex-wrap: wrap; gap: .4rem; max-width: calc(100% - 1.5rem); }
.kaart-chip { font: inherit; font-size: .95rem; font-weight: 700; padding: .4rem .8rem; border: 2px solid #2b1d0e; border-radius: 999px; background: #fbf3dc; color: #2b1d0e; cursor: pointer; box-shadow: 0 2px 0 #2b1d0e; display: inline-flex; align-items: center; gap: .35rem; }
.kaart-chip[aria-pressed="false"] { background: #e6e0cf; color: #6b5a45; box-shadow: none; text-decoration: line-through; }
.kaart-chip .stip { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid #2b1d0e; }
.stip-activiteit { background: #c0392b; }
.stip-nieuws { background: #2f6db5; }
.stip-buurt { background: #2e7d45; }
.stip-organisatie { background: #6b4c9a; }
.stip-verhaal { background: #1f5c63; }
.stip-natuur { background: #4f7d2c; }
.stip-bekend { background: #4a5568; }
.kaart-uitleg { margin: .75rem 0 0; }
.kaart-plaatsen { margin: 1rem 0 0; }
.blok-kaart { padding-top: 0; }
@media (max-width: 640px) {
  .kaart-app .kaart-venster { height: calc(100vh - var(--onderbalk, 64px) - 2rem); height: calc(100svh - var(--onderbalk, 64px) - 2rem); min-height: 22rem; max-height: 44rem; }
}

.kaart-bron { position: absolute; right: .5rem; bottom: .35rem; z-index: 2; font-size: .72rem; color: #24384f; background: rgba(255, 255, 255, .7); padding: .1rem .4rem; border-radius: 6px; }
.kaart-bron a { color: inherit; }

.kaart-marker { position: absolute; width: 3.15rem; height: 3.95rem; margin: -3.8rem 0 0 -1.575rem; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .35)); }
.kaart-marker.kaart-marker-ding { width: 2.85rem; height: 2.85rem; margin: -2.7rem 0 0 -1.425rem; filter: drop-shadow(0 1px 1px rgba(43, 29, 14, .4)); }
.kaart-marker.kaart-marker-logo { width: 2.7rem; height: 2.7rem; margin: -2.55rem 0 0 -1.35rem; padding: 0; border: 2px solid #2b1d0e; border-radius: .4rem; background: #fffdf8; overflow: hidden; filter: drop-shadow(0 1px 1px rgba(43, 29, 14, .4)); }
.kaart-marker-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.kaart-marker-logo .logo-letter { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 700; font-size: 1.25rem; line-height: 1; color: #2b1d0e; background: #f3e6c8; }
.wk[data-z] .poi-winkel, .wk[data-z] .poi-super, .wk[data-z] .poi-horeca, .wk[data-z] .poi-tank, .wk[data-z] .poi-camping, .wk[data-z] .poi-slapen { display: none; }
.wk .poi:hover, .wk .lm:hover { filter: drop-shadow(0 1px 1px rgba(43, 29, 14, .4)); }
.kaart-marker svg { width: 100%; height: 100%; display: block; }
.kaart-marker:hover, .kaart-marker:focus-visible, .kaart-marker.actief { transform: scale(1.15); transform-origin: 50% 100%; z-index: 2; }
.kaart-marker.verborgen { display: none; }
.kaart-marker.gebundeld { display: none; }
.kaart-bundel { position: absolute; width: 4.4rem; height: 3.6rem; margin: -3.45rem 0 0 -2.2rem; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(43, 29, 14, .4)); }
.kaart-bundel:hover, .kaart-bundel:focus-visible { transform: scale(1.12); transform-origin: 50% 100%; z-index: 2; }
.kaart-bundel:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 3px; border-radius: 8px; }
.kaart-bundel .bundel-ding { position: absolute; bottom: 0; left: 50%; width: 2.5rem; height: 3.1rem; margin-left: -1.25rem; pointer-events: none; }
.kaart-bundel .bundel-ding.is-ding { height: 2.5rem; }
.kaart-bundel .bundel-ding.is-logo { width: 2.2rem; height: 2.2rem; margin-left: -1.1rem; border: 2px solid #2b1d0e; border-radius: .4rem; background: #fffdf8; overflow: hidden; }
.kaart-bundel .bundel-ding svg, .kaart-bundel .bundel-ding img { width: 100%; height: 100%; display: block; object-fit: contain; }
.kaart-bundel .bundel-ding .logo-letter { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 700; font-size: 1rem; line-height: 1; color: #2b1d0e; background: #f3e6c8; }
.kaart-bundel .bundel-ding-0 { z-index: 3; }
.kaart-bundel-2 .bundel-ding-0 { transform: translateX(-.55rem) rotate(-6deg); }
.kaart-bundel-2 .bundel-ding-1 { transform: translateX(.65rem) translateY(-.2rem) rotate(7deg); z-index: 2; }
.kaart-bundel-3 .bundel-ding-1 { transform: translateX(-1rem) translateY(-.25rem) rotate(-10deg); z-index: 1; }
.kaart-bundel-3 .bundel-ding-2 { transform: translateX(1rem) translateY(-.25rem) rotate(10deg); z-index: 2; }
.kaart-bundel .bundel-tal { position: absolute; top: -.2rem; right: -.1rem; z-index: 4; min-width: 1.45rem; height: 1.45rem; padding: 0 .3rem; border: 2px solid #f6e7c1; border-radius: .75rem; background: var(--bundel-kleur, #2b1d0e); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.05rem; text-align: center; box-shadow: 0 0 0 1.5px #2b1d0e; }
.kaart-marker.stip { width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; border: 0; border-radius: 50%; background: none; overflow: visible; filter: none; }
.kaart-marker.stip > * { display: none; }
.kaart-marker.stip::before { content: ''; position: absolute; inset: .3rem; border-radius: 50%; background: #654793; border: 2px solid #fbf3dc; box-shadow: 0 0 0 1.5px #2b1d0e; }
.kaart-marker.stip:hover, .kaart-marker.stip:focus-visible { transform: scale(1.3); transform-origin: 50% 50%; }
.kaart-waaier { position: absolute; transform: translate(-50%, -50%); border: 2px dashed #2b1d0e; border-radius: 50%; background: rgba(251, 243, 220, .85); z-index: 4; pointer-events: none !important; }
.kaart-marker.uitgewaaierd { z-index: 5; }  
.kaart-marker.achter-knop, .kaart-bundel.achter-knop { opacity: .35; pointer-events: none; }
.wk.namen-boven .plaatsen .l-dorp { visibility: hidden; }
.kaart-namen { position: absolute; inset: 0; z-index: 3; pointer-events: none !important; }
.kaart-naam { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: .01em; color: #1b2230;
  text-shadow: 0 0 2px #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff; }
.kaart-naam.buiten { font-size: 16px; font-weight: 700; color: #5a6270; }
.kaart-namen[data-z="4"] .kaart-naam, .kaart-namen[data-z="5"] .kaart-naam { opacity: .55; }
.kaart-zoekpunt { position: absolute; width: 1.4rem; height: 1.4rem; margin: -.7rem 0 0 -.7rem; border-radius: 50%; background: var(--zon, #f7c913); border: 3px solid #2b1d0e; box-shadow: 0 0 0 6px rgba(247, 201, 19, .35); pointer-events: none; }
.kaart-ik { position: absolute; width: 1.2rem; height: 1.2rem; margin: -.6rem 0 0 -.6rem; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); pointer-events: none; }
.kaart-ik-cirkel { position: absolute; border-radius: 50%; background: rgba(26, 115, 232, .15); border: 1px solid rgba(26, 115, 232, .45); pointer-events: none; transform: translate(-50%, -50%); }

.kaart-kaartje { position: absolute; z-index: 5; width: min(20rem, calc(100% - 1.5rem)); background: #fffdf6; border: 3px solid #2b1d0e; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); overflow: hidden; font-size: 1rem; }
.kaart-kaartje img { display: block; width: 100%; height: 8.5rem; object-fit: cover; }
.kaart-kaartje-in { padding: .8rem .95rem .9rem; }
.kaart-kaartje h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.kaart-kaartje p { margin: 0 0 .5rem; line-height: 1.4; }
.kaart-kaartje .wanneer { font-weight: 700; color: #c0392b; }
.kaart-kaartje .waar { color: var(--tekst-zacht, #475063); font-size: .95rem; }
.kaart-kaartje .acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.kaart-kaartje .acties a { font-weight: 700; }
.kaart-kaartje .sluit { position: absolute; top: .4rem; right: .4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid #2b1d0e; background: #fbf3dc; cursor: pointer; display: grid; place-items: center; padding: 0; }
.kaart-kaartje .sluit svg { width: 1rem; height: 1rem; }
.kaart-kaartje .bij-benadering { font-size: .85rem; color: var(--tekst-zacht, #475063); font-style: italic; }
@media (max-width: 640px) {
  .kaart-kaartje { left: .5rem !important; right: .5rem; top: auto !important; bottom: .5rem; width: auto; }
  .kaart-kaartje img { height: 7rem; }
}

.kaart-lijst { background: var(--wit, #fff); border-radius: var(--radius, 14px); box-shadow: var(--schaduw); padding: 1rem 1.1rem; }
@media (min-width: 1000px) { .kaart-lijst { max-height: min(78vh, 52rem); overflow: auto; } }
.kaart-lijst h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
.kaart-lijst ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.kaart-lijst a { color: inherit; text-decoration: none; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; width: 100%; padding: .55rem .6rem; border-radius: 10px; cursor: pointer; }
.kaart-lijst a:hover, .kaart-lijst a:focus-visible { background: var(--geel-zacht, #fdf3c4); }
.kaart-lijst a:focus-visible { outline: 3px solid var(--zee, #1e3a8a); }
.kaart-lijst .stip { grid-row: span 2; margin-top: .35rem; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid #2b1d0e; }
.kaart-lijst strong { font-size: 1rem; line-height: 1.3; }
.kaart-lijst small { font-size: .88rem; color: var(--tekst-zacht, #475063); }
.kaart-lijst .leeg { color: var(--tekst-zacht, #475063); font-size: 1rem; }
.kaart-legenda { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand, #e3dccb); font-size: .92rem; display: grid; gap: .35rem; }
.kaart-legenda span { display: inline-flex; align-items: center; gap: .5rem; }
.kaart-legenda i { display: inline-block; width: 1.6rem; height: .55rem; border-radius: 3px; border: 1.5px solid #2b1d0e; }
.lg-hoofd { background: #e8a648; } .lg-gebied { background: #f6d77d; } .lg-straat { background: #fff8e1; } .lg-fiets { background: #e98a74; }
.lg-pad { background: repeating-linear-gradient(90deg, #8f6f45 0 5px, transparent 5px 9px); border: 0 !important; height: .2rem !important; }
.lg-buurt { background: repeating-linear-gradient(90deg, #9a5b2a 0 6px, transparent 6px 10px); border: 0 !important; height: .2rem !important; }
.kaart-melding { position: absolute; left: 50%; top: 4.2rem; transform: translateX(-50%); z-index: 6; background: #2b1d0e; color: #fff; padding: .5rem .9rem; border-radius: 10px; font-size: .95rem; max-width: calc(100% - 2rem); text-align: center; }
.kaart-melding[hidden] { display: none; }
.kaart-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kaart-lijst li.zonder-plek a { opacity: .7; }
.kaart-lijst li.zonder-plek small::after { content: ' · nog geen plek'; }
.kaart-lijst li[hidden] { display: none; }
.wk .botst { display: none; }
@media (max-width: 640px) {
  .kaart-venster { height: 72vh; min-height: 24rem; }
  .kaart-knoppen { right: .5rem; top: .5rem; gap: .35rem; }
  .kaart-knop { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
  .kaart-knop svg { width: 1.2rem; height: 1.2rem; }
  .kaart-zoek { left: .5rem; top: .5rem; right: 3.6rem; }
  .kaart-zoek input { padding-top: .55rem; padding-bottom: .55rem; }
  .kaart-zoek .ic { top: .7rem; }
  .kaart-filter { left: .5rem; bottom: .5rem; }
  .kaart-chip { font-size: .85rem; padding: .3rem .65rem; }
  .kaart-bron { bottom: auto; top: 3.6rem; left: .5rem; right: auto; font-size: .65rem; }
}
.kaart-kaartje h3 { padding-right: 2.4rem; }


.wk .raak { fill: transparent; stroke: none; }
.wk.laag-poi .poi { display: inline; }
.wk.laag-paden .wr-pad { display: inline; stroke: #fffbea; stroke-width: max(calc(var(--px) * 4.4px), 5px); }
.wk.laag-paden .wv-pad { display: inline; stroke: #6a3d12; stroke-width: max(calc(var(--px) * 2.2px), 2.6px); stroke-dasharray: max(calc(var(--px) * 5px), 6px) max(calc(var(--px) * 3px), 3.5px); }
.wk.laag-paden .wr-fiets { stroke: #6e1f12; stroke-width: max(calc(var(--px) * 5px), 6.5px); }
.wk.laag-paden .wv-fiets { stroke: #ff6a4d; stroke-width: max(calc(var(--px) * 3.2px), 4.2px); }

.wk .straat-rood { fill: none; stroke: #d0021b; stroke-opacity: .65; stroke-width: max(calc(var(--px) * 9px), 9px); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

.kaart-filter { flex-direction: column; align-items: flex-start; pointer-events: none; }
.kaart-filter .kaart-chip { pointer-events: auto; }
.kaart-chipgroep { display: flex; flex-wrap: wrap; gap: .4rem; }
.kaart-laagchip .vinkje { width: .9rem; height: .9rem; border: 2px solid #2b1d0e; border-radius: 4px; background: #fffdf6; display: inline-grid; place-items: center; }
.kaart-laagchip[aria-pressed="true"] { background: var(--zon, #f7c913); }
.kaart-laagchip[aria-pressed="true"] .vinkje::after { content: ''; width: .35rem; height: .6rem; border: solid #2b1d0e; border-width: 0 2.5px 2.5px 0; transform: translate(0, -1px) rotate(45deg); }
.kaart-laagchip[aria-pressed="false"] { background: #fbf3dc; color: #2b1d0e; text-decoration: none; box-shadow: 0 2px 0 #2b1d0e; }

.kaart-laag > .kaart-punt { position: absolute; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: none; }
.kaart-punt:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 0; box-shadow: 0 0 0 6px #fff; }

.kaart-knop:focus-visible, .kaart-chip:focus-visible, .kaart-kaartje .sluit:focus-visible, .kaart-kaartje a:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; }
.kaart-marker:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; border-radius: 8px; }
.kaart-kaartje:focus { outline: none; }
.kaart-kaartje:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; }
.kaart-zoek input:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; }

.kaart-tekst { margin-top: 1rem; background: var(--wit, #fff); border-radius: var(--radius, 14px); box-shadow: var(--schaduw); padding: .2rem 1.1rem; }
.kaart-tekst summary { cursor: pointer; font-weight: 700; padding: .8rem 0; min-height: 1.5rem; }
.kaart-tekst summary:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; border-radius: 6px; }
.kaart-tekst[open] { padding-bottom: 1rem; }
.kaart-tekst h3 { font-size: 1.2rem; margin: 1.1rem 0 .3rem; }
.kaart-tekst h4 { font-size: 1rem; margin: .8rem 0 .2rem; }
.kaart-tekst p, .kaart-tekst li { line-height: 1.5; overflow-wrap: anywhere; }
.kaart-tekst p { margin: 0 0 .4rem; }
.kaart-tekst ul { margin: 0 0 .4rem; padding-left: 1.2rem; }
.kaart-tekst-soort { font-weight: 400; font-size: .9rem; color: var(--tekst-zacht, #475063); }
@media (max-width: 640px) {
  .kaart-tekst { padding: .2rem .8rem; }
}
.kaart-venster { overflow: clip; }
@media (max-width: 640px) {
  .kaart-filter { max-width: calc(100% - 1rem); }
  .kaart-chipgroep { gap: .3rem; }
  .kaart-filter { gap: .3rem; }
  .kaart-chip { font-size: .8rem; padding: .3rem .55rem; gap: .3rem; }
  .kaart-laagchip .vinkje { width: .8rem; height: .8rem; }
}

.wk .kaart-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wk .route-rand { stroke: #fffdf6; stroke-width: max(calc(var(--px) * 9px), 9px); opacity: .9; }
.wk .route-lijn { stroke: #7b2d8e; stroke-width: max(calc(var(--px) * 5px), 5px); }
.wk .kaart-route.lopen .route-lijn { stroke: #1d7a46; }
.lg-route-lopen { background: #1d7a46; }
.wk .route-raak { stroke: transparent; stroke-width: max(calc(var(--px) * 30px), 30px); pointer-events: stroke; cursor: pointer; }
.wk .route-stip { stroke: #7b2d8e; stroke-width: max(calc(var(--px) * 13px), 13px); }
.wk .route-stip.begin { stroke: #2e7d45; }
.wk .route-stip.eind { stroke: #c0392b; }
.wk .kaart-route.actief .route-lijn { stroke: #d0021b; }
.wk .kaart-route.actief .route-rand { stroke-width: max(calc(var(--px) * 12px), 12px); }
.wk .kaart-route.tekenen .route-lijn { stroke: #d0021b; stroke-dasharray: max(calc(var(--px) * 10px), 10px) max(calc(var(--px) * 6px), 6px); }
.wk .kaart-route.tekenen .route-stip { stroke: #d0021b; stroke-width: max(calc(var(--px) * 15px), 15px); }
.wk .kaart-route.tekenen .route-stip.begin { stroke: #2e7d45; }
.wk.laag-routes-uit .routes { display: none; }
.stip-routes { background: #7b2d8e; }
.lg-route { background: #7b2d8e; }
.kaart-routes-link { margin: .8rem 0 0; font-weight: 700; }
.kaart-routes-link a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; }
.kaart-routes-link .ic { width: 1.4rem; height: 1.4rem; }

.kaart-bereik { grid-column: 1 / -1; background: var(--wit, #fff); border: 3px solid #2b1d0e; border-radius: var(--radius, 14px); box-shadow: 0 2px 0 #2b1d0e; padding: .35rem .6rem; }
.kaart-bereik[hidden] { display: none; }
.kaart-bereik.aan { background: #fff7d1; }
.kaart-bereik-kop { font: inherit; font-weight: 700; font-size: 1.05rem; color: #2b1d0e; background: none; border: 0; padding: .45rem .2rem; min-height: 2.75rem; width: 100%; display: flex; align-items: center; gap: .55rem; cursor: pointer; text-align: left; border-radius: 10px; }
.kaart-bereik-kop > svg { width: 1.35rem; height: 1.35rem; flex: none; }
.kaart-bereik-titel { white-space: nowrap; }
.kaart-bereik-samen { font-weight: 400; font-size: .92rem; color: var(--tekst-zacht, #475063); min-width: 0; overflow-wrap: anywhere; }
.kaart-bereik-pijl { margin-left: auto; transition: transform .15s; }
.kaart-bereik-kop[aria-expanded="true"] .kaart-bereik-pijl { transform: rotate(180deg); }
.kaart-bereik-kop:focus-visible, .kaart-bereik-uit:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; }
.kaart-bereik-paneel { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; padding: .2rem .2rem .5rem; }
.kaart-bereik-paneel[hidden] { display: none; }
.kaart-bereik-rij { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-width: 0; }
.kaart-bereik-label { font-weight: 700; font-size: .92rem; color: var(--tekst-zacht, #475063); white-space: nowrap; }
.kaart-bereik-knoppen { display: flex; flex-wrap: wrap; gap: .4rem; }
.kaart-bereik-keuze { min-height: 2.75rem; white-space: nowrap; text-decoration: none; }
.kaart-bereik-keuze svg { width: 1.25rem; height: 1.25rem; flex: none; }
.kaart-bereik-keuze[hidden] { display: none; }
.kaart-bereik-keuze[aria-pressed="false"] { background: #fbf3dc; color: #2b1d0e; text-decoration: none; box-shadow: 0 2px 0 #2b1d0e; }
.kaart-bereik-keuze[aria-pressed="true"] { background: var(--zon, #f7c913); }
.kaart-bereik-vanaf { flex: 1 1 26rem; }
.kaart-bereik-start { overflow-wrap: anywhere; min-width: 0; }
.kaart-bereik-zoek { position: relative; flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.kaart-bereik-zoek input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; min-height: 2.75rem; padding: .5rem .8rem; border: 2px solid #2b1d0e; border-radius: 12px; background: #fffdf6; }
.kaart-bereik-zoek input:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 2px; }
.kaart-bereik-zoek ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: .3rem 0 0; padding: .25rem; background: #fffdf6; border: 2px solid #2b1d0e; border-radius: 12px; max-height: 16rem; overflow: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.kaart-bereik-zoek ul[hidden] { display: none; }
.kaart-bereik-zoek li { padding: .5rem .65rem; border-radius: 8px; cursor: pointer; line-height: 1.3; }
.kaart-bereik-zoek li small { display: block; color: var(--tekst-zacht, #475063); font-size: .85rem; }
.kaart-bereik-zoek li[aria-selected="true"], .kaart-bereik-zoek li:hover { background: var(--geel-zacht, #fdf3c4); }
.kaart-bereik-uit { font: inherit; font-weight: 700; color: var(--zee, #1e3a8a); background: none; border: 0; text-decoration: underline; cursor: pointer; min-height: 2.75rem; padding: 0 .3rem; }
.kaart-bereik-uit[hidden] { display: none; }
.kaart-bereik-status { margin: 0; padding: 0 .2rem; font-size: .95rem; }
.kaart-bereik-status:empty { display: none; }
.kaart-bereik.aan .kaart-bereik-status { font-weight: 700; padding-bottom: .35rem; }
.kaart-venster.kies-start { cursor: crosshair; }
.kaart-venster.kies-start .kaart-marker, .kaart-venster.kies-start .kaart-kaartje { pointer-events: none; }
.kaart-lijst .kaart-reistijd { grid-column: 2; font-size: .88rem; font-weight: 700; color: #1e3a8a; }
.kaart-kaartje .reistijd { font-weight: 700; color: #1e3a8a; }
.kaart-start { position: absolute; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; border-radius: 50%; background: #1e3a8a; color: #fff; border: 3px solid #f7c913; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); display: grid; place-items: center; pointer-events: none; z-index: 1; }
.kaart-start svg { width: 1.2rem; height: 1.2rem; }
.wk .bereik-waas { fill: #fffdf6; opacity: .5; pointer-events: none; }
.wk .bereik path { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.wk .bereik-rand { stroke: #f7c913; stroke-width: max(calc(var(--px) * 10px), 7px); }
.wk .bereik-lijn { stroke: #1e3a8a; stroke-width: max(calc(var(--px) * 4.5px), 3px); }
@media (max-width: 640px) {
  .kaart-bereik { padding: .2rem .45rem; }
  .kaart-bereik-paneel { gap: .55rem; }
  .kaart-bereik-rij { width: 100%; }
  .kaart-bereik-label { min-width: 4.6rem; }
  .kaart-bereik-zoek { max-width: none; flex-basis: 100%; }
  .kaart-bereik-keuze { font-size: .9rem; padding: .3rem .6rem; }
}