/* Parkeerkaart op de tochtpagina: plattegrond als SVG in het kleurenpalet van de site. */
.pmap { margin-top: 40px; border-top: 3px solid var(--g); padding-top: 20px; }
.pmap__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pmap__head h4 { margin: 0; font-size: 1.5rem; }
.pmap__zoom { font: 700 13px/1.2 var(--sans); background: var(--w); color: var(--g); border: 2px solid var(--g); padding: 8px 12px; cursor: pointer; }
.pmap__zoom:hover, .pmap__zoom[aria-pressed="true"] { background: var(--g); color: var(--s); }

.pmap__frame { border: 3px solid var(--g); background: #F8EFE0; line-height: 0; overflow: hidden; }
.pmap__svg { display: block; width: 100%; height: auto; transition: none; }

/* kaartlagen uit OpenStreetMap */
.m-land { fill: #F8EFE0; }
.m-resi { fill: #F3E4CD; }
.m-water { fill: #D6E4DA; }
.m-bld { fill: #E4CDA9; }
.m-lot { fill: #FFFFFF; stroke: #CBB48C; stroke-width: 1.5; }
.m-roads path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-svc { stroke: #FFFFFF; stroke-width: 3; }
.m-street { stroke: #FFFFFF; stroke-width: 6; }
.m-casing { stroke: #FFFFFF; stroke-width: 15; }
.m-second { stroke: #5C8A5C; stroke-width: 9; }
.m-main { stroke: #2F6B45; stroke-width: 10; }
.m-names text { font: 600 11px var(--sans); letter-spacing: .05em; fill: var(--g); paint-order: stroke; stroke: #F8EFE0; stroke-width: 3px; stroke-linejoin: round; }

.m-route {
    fill: none; stroke: var(--g); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1 11; opacity: 0; transition: opacity .25s;
}
.m-route.is-visible { opacity: 1; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -24; } }

.m-start__dot { fill: var(--d); stroke: var(--s); stroke-width: 3; }
.m-start__pulse { fill: none; stroke: var(--d); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.m-start__label { fill: var(--d); }
.m-start__text { font: 800 14px var(--sans); fill: var(--s); }
.m-start__text--sub { font-weight: 600; font-size: 13px; }

.m-spot { cursor: pointer; outline: none; }
.m-spot rect { fill: var(--g); stroke: var(--s); stroke-width: 3; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.m-spot text { font-family: var(--sans); font-weight: 800; fill: var(--s); text-anchor: middle; pointer-events: none; }
.m-spot:hover rect, .m-spot:focus-visible rect { transform: scale(1.2); }
.m-spot:focus-visible rect { stroke: var(--d); }
.m-spot.is-active rect { fill: var(--s); stroke: var(--g); stroke-width: 4; transform: scale(1.25); }
.m-spot.is-active text { fill: var(--g); }

.pmap__info { background: var(--s); border: 3px solid var(--g); border-top: 0; padding: 14px 18px; line-height: 1.5; display: grid; gap: 2px; min-height: 76px; }
.pmap__info b { font: 800 1.15rem/1.2 var(--serif); color: var(--g); }

.pmap__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pmap__list button { font: 600 14px/1.2 var(--sans); background: var(--w); color: var(--d); border: 2px solid var(--g); padding: 6px 12px 6px 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pmap__list button i { font: 800 14px/1 var(--sans); font-style: normal; background: var(--g); color: var(--s); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.pmap__list button:hover, .pmap__list button.is-active { background: var(--s); }
.pmap__foot { margin: 10px 0 0; font-size: 13px; color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
    .m-route.is-visible, .m-start__pulse { animation: none; }
    .m-spot rect { transition: none; }
}