/* ----------------------------------------------------------
   1. BASIS Fietssport-look (altijd actief)
---------------------------------------------------------- */
.leaflet-tile {
    filter: brightness(1.15) saturate(0.46) contrast(0.83) hue-rotate(-5deg);
}

/* ----------------------------------------------------------
   2. START-ZOOM demping (rustiger bij laden)
---------------------------------------------------------- */
.leaflet-container.startzoom-10 .leaflet-tile,
.leaflet-container.startzoom-11 .leaflet-tile,
.leaflet-container.startzoom-12 .leaflet-tile,
.leaflet-container.startzoom-13 .leaflet-tile {
    filter: brightness(1.05) saturate(0.28) contrast(0.74) hue-rotate(-3deg);
}

/* ----------------------------------------------------------
   3. HOGE ZOOMLEVELS (zoom 14+)
---------------------------------------------------------- */
.leaflet-container.zoom-14 .leaflet-tile,
.leaflet-container.zoom-15 .leaflet-tile,
.leaflet-container.zoom-16 .leaflet-tile,
.leaflet-container.zoom-17 .leaflet-tile,
.leaflet-container.zoom-18 .leaflet-tile,
.leaflet-container.zoom-19 .leaflet-tile,
.leaflet-container.zoom-20 .leaflet-tile {
    filter: brightness(1.12) saturate(0.35) contrast(0.80) hue-rotate(-4deg);
}

/* ----------------------------------------------------------
   4. Fade-in effect voor rustige kaartopbouw (tiles)
---------------------------------------------------------- */
.leaflet-tile {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.leaflet-tile-loaded {
    opacity: 1;
}

/* ----------------------------------------------------------
   5. Fade-in voor GPX-lijn, pijlen, km-bolletjes en iconen
---------------------------------------------------------- */
.wr-route-fade {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.wr-route-fade.loaded {
    opacity: 1;
}

/* ----------------------------------------------------------
   6. Z-index fix — kaarten mogen nooit boven de header komen
---------------------------------------------------------- */
.leaflet-container {
    position: relative;
    z-index: 1; /* lager dan header */
}

/* Als jouw thema header een andere class heeft, kun je die hier toevoegen */
header, .site-header, .elementor-header {
    position: relative;
    z-index: 1000;
}

/* ----------------------------------------------------------
   7. Km-marker styling (jouw bestaande stijl)
---------------------------------------------------------- */
.km-marker div {
    background: #FFD700;
    border: 2px solid #000;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}

/* ----------------------------------------------------------
   8. Start/Finish iconen
---------------------------------------------------------- */
.wr-start-icon,
.wr-finish-icon {
    background: #FFD700;
    border: 2px solid #000;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
/* ----------------------------------------------------------
   9. Fade‑out effect bij verlaten fullscreen
---------------------------------------------------------- */
.wr-fadeout {
    transition: opacity 0.35s ease-in-out;
    opacity: 0.4;
}

.wr-fadeout-end {
    opacity: 1;
}
/* ----------------------------------------------------------
   10. Fade‑in effect bij ingaan fullscreen
---------------------------------------------------------- */
.wr-fadein {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
}

.wr-fadein-end {
    opacity: 1;
}
/* Kaart-wrappers mogen nooit boven de header komen */
.elementor-widget-container,
.elementor-section,
.elementor-column {
    z-index: 1 !important;
    position: relative;
}