/* ====== KAARTPAGINA (kaart.html): de hoeve en het landschap ======
   Kleuren, lettertypen en reset staan in style.css; hier alleen wat deze pagina extra nodig heeft.
   De kaart zelf wordt door kaart.js getekend; alle kleuren van de tekening staan hieronder (geen style="..." in de HTML).
   Breekpunten: alleen 560, 860 en 861 px, zoals overal. */
:root {
  --k-land: #d3dcc3;
  --k-land2: #c9d3b8;
  --k-focus: #7fa072;
  --k-focus2: #6f9262;
  --k-water: #6fa3aa;
  --k-dorp: #dcd6c6;
  --k-weg: #f6f3e8;
  --k-zee: #a9c7c9;
}
.kaart-pagina {
  background: linear-gradient(180deg, #edf1ea, #e6ecdf);
}
.kaart-pagina .wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 92px 28px 60px;
}
.kaart-pagina h1 {
  font-size: var(--kop-sectie);
  max-width: 17ch;
}
.kaart-pagina em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--roest);
}
.k-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gras);
  margin: 18px 0 34px;
}
.k-opzet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 861px) {
  .k-opzet {
    grid-template-columns: 1fr 320px;
  }
}

/* de kaart */
.k-bord {
  position: relative;
  aspect-ratio: 2410/1280;
  border: 3px solid var(--inkt);
  border-radius: 28px;
  overflow: hidden;
  background: var(--k-zee);
  box-shadow: 8px 8px 0 var(--inkt);
}
@media (max-width: 860px) {
  .k-bord {
    aspect-ratio: 4/3;
  }
}
@media (max-width: 560px) {
  .k-bord {
    aspect-ratio: 4/5;
    border-radius: 22px;
    box-shadow: 5px 5px 0 var(--inkt);
  }
}
.k-svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.k-svg:active {
  cursor: grabbing;
}
.k-svg:focus-visible {
  outline: 3px solid var(--roest);
  outline-offset: -6px;
}

/* tekening: landschap */
.k-vlak {
  fill: url(#kPatO);
}
.k-p-land {
  fill: var(--k-land);
}
.k-p-land2 {
  fill: var(--k-land2);
}
.k-p-foc {
  fill: var(--k-focus);
}
.k-p-foc2 {
  fill: var(--k-focus2);
}
.k-sloot {
  fill: var(--k-water);
  opacity: 0.75;
}
.k-zee {
  fill: var(--k-zee);
}
.k-route-rand,
.k-route,
.k-route-hit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.k-route-rand {
  stroke: #fff;
  stroke-width: 6px;
  opacity: 0.85;
  pointer-events: none;
}
.k-route {
  stroke: var(--roest);
  stroke-width: 3px;
  stroke-dasharray: 0.1px 7px;
  pointer-events: none;
}
.k-route-hit {
  stroke: transparent;
  stroke-width: 16px;
  cursor: pointer;
  pointer-events: stroke;
}
.k-route-hit.k-sel {
  stroke: rgba(165, 86, 31, 0.22);
}
.k-dijkgroen {
  fill: #a3bd84;
}
.k-water {
  fill: none;
  stroke: var(--k-water);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-plasgroep {
  cursor: pointer;
}
.k-plas {
  fill: #7db4bb;
  stroke: #edf1ea;
  stroke-width: 2;
}
.k-plas-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
}
.k-plasgroep:hover .k-plas {
  fill: #8fc4cb;
}
.k-plasgroep.k-sel .k-plas {
  stroke: var(--roest);
  stroke-width: 5;
}
.k-wt3 {
  stroke-width: 3;
}
.k-wt5 {
  stroke-width: 5;
}
.k-wt8 {
  stroke-width: 8;
}
.k-wt11 {
  stroke-width: 11;
}
.k-wt14 {
  stroke-width: 14;
}
.k-spoor {
  fill: none;
  stroke: #6f6a5f;
  stroke-width: 3;
}
.k-spoor-bielzen {
  fill: none;
  stroke: #6f6a5f;
  stroke-width: 10;
  stroke-dasharray: 2.5 9;
}
.k-dorp {
  fill: var(--k-dorp);
}
.k-huis {
  fill: #c4b9a0;
  stroke: #a39879;
  stroke-width: 1;
}
.k-straat {
  fill: none;
  stroke: var(--k-weg);
  stroke-width: 7;
  opacity: 0.8;
}
.k-weg {
  fill: none;
  stroke: var(--k-weg);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-w22 {
  stroke-width: 22;
}
.k-w12 {
  stroke-width: 12;
}
.k-w9 {
  stroke-width: 9;
  opacity: 0.8;
}
.k-w6 {
  stroke-width: 6;
}
.k-w4 {
  stroke-width: 4;
}
.k-lbl {
  font: 700 26px var(--sans);
  letter-spacing: 0.08em;
  fill: #5d6b60;
  paint-order: stroke;
  stroke: var(--k-land);
  stroke-width: 6px;
  pointer-events: none;
}
.k-lbl-water {
  stroke: var(--k-zee);
}
.k-lbl-dorp {
  font: italic 400 44px var(--serif);
  letter-spacing: 0;
  fill: var(--inkt);
  stroke: var(--k-dorp);
}
.k-lbl-klein {
  font-size: 22px;
}
.k-focus {
  fill: url(#kPatF);
}
.k-kavel {
  stroke: var(--k-water);
  stroke-width: 1.8;
  cursor: pointer;
}
.k-kv0 {
  fill: var(--k-focus);
}
.k-kv1 {
  fill: var(--k-focus2);
}
.k-kv2 {
  fill: var(--k-focus2);
  opacity: 0.8;
}
.k-kavel-stil {
  stroke: var(--k-water);
  stroke-width: 1.8;
}
.k-kavel:hover {
  fill: #a9c66e;
}
.k-kavel.k-sel {
  stroke: var(--roest);
  stroke-width: 5;
}
.k-nummer {
  display: none;
  font: 700 24px var(--sans);
  fill: var(--inkt);
  text-anchor: middle;
  pointer-events: none;
  opacity: 0.7;
}
.k-zoom .k-nummer {
  display: inline;
}

/* tekening: erf */
.k-erf {
  transition: opacity 0.2s;
}
.k-erfvlak {
  fill: #c9b48a;
  opacity: 0.85;
}
.k-boom {
  fill: #3f6b34;
  opacity: 0.9;
}
.k-gebouw {
  cursor: pointer;
  stroke: var(--inkt);
  stroke-width: 3;
  stroke-opacity: 0.45;
}
.k-gebouw:hover,
.k-gebouw.k-sel {
  stroke: var(--roest);
  stroke-opacity: 1;
  stroke-width: 6;
}
.k-g-schuur {
  fill: #6d727a;
}
.k-g-stal {
  fill: #8a8f98;
}
.k-g-bij {
  fill: #4a4d54;
}
.k-g-woon {
  fill: #b0624a;
}
.k-g-silo {
  fill: #26272a;
}
.k-g-mest {
  fill: #b99a66;
}
.k-g-klaver {
  fill: #d7dadb;
}
.k-gebouw-stil {
  stroke: var(--inkt);
  stroke-width: 3;
  stroke-opacity: 0.45;
}
.k-erfnaam {
  font: italic 400 76px var(--serif);
  fill: var(--inkt);
  paint-order: stroke;
  stroke: #edf1ea;
  stroke-width: 14px;
  text-anchor: middle;
  pointer-events: none;
}
.k-paneel {
  fill: #5f6d7e;
  pointer-events: none;
}
.k-dl {
  font: 700 46px var(--sans);
  fill: var(--inkt);
  paint-order: stroke;
  stroke: #edf1ea;
  stroke-width: 12px;
  text-anchor: middle;
  pointer-events: none;
}
.k-ring {
  fill: none;
  stroke: var(--roest);
  stroke-width: 5;
  stroke-dasharray: 14 10;
  cursor: pointer;
}

/* markers */
.k-m {
  cursor: pointer;
}
.k-m:focus-visible {
  outline: none;
}
.k-stip {
  fill: var(--roest);
  stroke: #fff;
  stroke-width: 5;
}
.k-m-punt .k-stip {
  fill: var(--sloot);
}
.k-m:hover .k-stip,
.k-m:focus-visible .k-stip,
.k-m.k-sel .k-stip {
  stroke: var(--inkt);
}
.k-mt {
  font: 700 30px var(--sans);
  fill: var(--inkt);
  paint-order: stroke;
  stroke: #edf1ea;
  stroke-width: 7px;
  stroke-linejoin: round;
}

/* bediening boven de kaart */
.k-schakel {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  border: 3px solid var(--inkt);
  border-radius: 50px;
  overflow: hidden;
  background: var(--zon);
}
.k-schakel button {
  border: none;
  background: transparent;
  color: var(--inkt);
  font: 700 0.85rem var(--sans);
  padding: 8px 16px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.k-schakel button + button {
  border-left: 3px solid var(--inkt);
}
.k-schakel button:hover {
  background: #f0c894;
}
.k-schakel button[aria-pressed="true"] {
  background: var(--inkt);
  color: #fff;
}
.k-schakel button:focus-visible {
  outline: 3px solid var(--inkt);
  outline-offset: -6px;
}
.k-knoppen {
  position: absolute;
  top: 70px;
  right: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-knoppen button {
  width: 40px;
  height: 40px;
  border: 3px solid var(--inkt);
  border-radius: 50%;
  background: #fff;
  color: var(--inkt);
  font: 700 1.3rem var(--sans);
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s;
}
.k-knoppen button:hover {
  background: var(--zon);
}
.k-knoppen button:focus-visible {
  outline: 3px solid var(--roest);
  outline-offset: 2px;
}
.k-noord {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 3px solid var(--inkt);
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 800 0.7rem/1 var(--sans);
  color: var(--roest);
  pointer-events: none;
}
.k-noord span {
  font-size: 0.6rem;
  color: var(--inkt);
}
.k-legenda-knop {
  position: absolute;
  left: 14px;
  bottom: 76px;
  z-index: 4;
  padding: 6px 14px;
  border: 3px solid var(--inkt);
  border-radius: 999px;
  background: #fff;
  color: var(--inkt);
  font: 700 0.8rem var(--sans);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--inkt);
}
.k-legenda-knop[aria-expanded="true"] {
  background: var(--inkt);
  color: #fff;
}
.k-legenda-knop:focus-visible {
  outline: 3px solid var(--inkt);
  outline-offset: 3px;
}
.k-legenda {
  position: absolute;
  left: 14px;
  bottom: 118px;
  z-index: 4;
  max-width: min(240px, calc(100% - 28px));
  padding: 8px 12px 9px;
  border: 3px solid var(--inkt);
  border-radius: 14px;
  background: #fff;
  font: 600 0.75rem/1.2 var(--sans);
  box-shadow: 3px 3px 0 var(--inkt);
}
.k-legenda[hidden] {
  display: none;
}
.k-legenda-titel {
  margin: 0 0 4px;
  font-weight: 800;
}
.k-legenda ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.k-legenda li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 0;
}
.k-sw {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 14px;
  border-radius: 3px;
  box-sizing: border-box;
}
.k-sw-kavel {
  background: var(--k-focus2);
  border: 2px solid var(--k-water);
}
.k-sw-water {
  height: 6px;
  background: var(--k-water);
  border-radius: 3px;
}
.k-sw-plas {
  height: 14px;
  background: #7db4bb;
  border: 2px solid #edf1ea;
  box-shadow: 0 0 0 1px #7db4bb;
  border-radius: 50%;
}
.k-sw-route {
  height: 0;
  border-top: 4px dotted var(--roest);
  border-radius: 0;
}
.k-sw-spoor {
  height: 6px;
  background: repeating-linear-gradient(90deg, #6f6a5f 0 2px, transparent 2px 6px);
  border-top: 2px solid #6f6a5f;
  border-radius: 0;
}
.k-sw-weg {
  height: 8px;
  background: var(--k-weg);
  border: 1px solid #cfc9b6;
}
.k-sw-dorp {
  background: var(--k-dorp);
}
@media (max-width: 560px) {
  .k-legenda {
    font-size: 0.75rem;
  }
}
.k-schaal {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  background: #fff;
  border: 3px solid var(--inkt);
  border-radius: 12px;
  padding: 4px 10px 6px;
  font: 700 0.75rem var(--sans);
  pointer-events: none;
}
.k-schaal i {
  display: block;
  height: 6px;
  margin-top: 3px;
  border: 2px solid var(--inkt);
  border-top: 0;
}
.k-mini {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: 150px;
  aspect-ratio: 2410/1280;
  padding: 0;
  border: 3px solid var(--inkt);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--k-land);
  box-shadow: 3px 3px 0 var(--inkt);
}
.k-mini[hidden] {
  display: none;
}
.k-mini svg {
  display: block;
  width: 100%;
  height: 100%;
}
.k-mini .k-vlak {
  fill: var(--k-land);
}
.k-mini-focus {
  fill: var(--k-focus2);
}
.k-mini-kader {
  fill: none;
  stroke: var(--roest);
  stroke-width: 36;
}
.k-mini:focus-visible {
  outline: 3px solid var(--roest);
  outline-offset: 2px;
}

/* paneel en lijst */
.k-paneel-info {
  border: 3px solid var(--inkt);
  border-radius: 22px;
  background: #fff;
  padding: 22px;
  box-shadow: 6px 6px 0 var(--inkt);
}
.k-foto {
  margin: 0 0 16px;
}
.k-foto[hidden] {
  display: none;
}
.k-foto img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--inkt);
  border-radius: 14px;
}
.k-video {
  margin: 16px 0 0;
}
.k-video[hidden] {
  display: none;
}
.k-video video {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto;
  background: var(--inkt);
  border: 3px solid var(--inkt);
  border-radius: 14px;
}
.k-tag {
  font: 800 0.75rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roest);
}
.k-titel {
  font-size: var(--kop-onderdeel);
  margin: 4px 0 10px;
}
.k-tekst {
  color: #34443a;
}
.k-tekst p + p {
  margin-top: 10px;
}
.k-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--roest);
  font-weight: 700;
}
.k-link[hidden] {
  display: none;
}
.k-lijsttitel {
  margin-top: 26px;
  font: 800 0.8rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gras);
}
.k-lijst {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.k-lijstknop {
  border: 2px solid var(--inkt);
  border-radius: 50px;
  background: #fff;
  color: var(--inkt);
  font: 700 0.85rem var(--sans);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.25s;
}
.k-lijstknop:hover {
  background: var(--zon);
}
.k-lijstknop-hoofd {
  background: var(--roest);
  border-color: var(--roest);
  color: #fff;
}
.k-lijstknop-hoofd:hover {
  background: #8a4519;
  border-color: #8a4519;
}
.k-lijstknop:focus-visible {
  outline: 3px solid var(--roest);
  outline-offset: 2px;
}
.k-voet {
  margin-top: 34px;
  font-size: 0.85rem;
}
.k-voet a {
  color: var(--roest);
  font-weight: 600;
}
.k-voet > a[href="index.html"] {
  font-size: 1rem;
  font-weight: 700;
}
.k-voet-juridisch {
  margin-top: 10px;
}
@media (max-width: 560px) {
  .kaart-pagina .wrap {
    padding: 68px 20px 44px;
  }
  .k-schakel button {
    padding: 6px 9px;
    font-size: 0.72rem;
  }
  .k-mini {
    width: 110px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .k-erf {
    transition: none;
  }
}