.leaflet-tile-pane {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

.leaflet-container img.leaflet-tile {
    mix-blend-mode: normal;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    width: 100% !important;
}

.leaflet-container a::after {
    content: unset !important;
    margin-right: 0px !important;
}

.leaflet-container a {
    margin-right: unset !important;
}

.leaflet-touch .leaflet-bar a {
    width: 30px !important;
}

.leaflet-container img.leaflet-tile {
    /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 
        TL;DR: Fixt aktuell dünne weiße Linien, die sonst zwischen Tiles erscheinen würden.
    */
    mix-blend-mode: normal !important;
}

img.leaflet-tile, img.leaflet-marker-icon, img.leaflet-marker-shadow {
    /* work-around from here: https://github.com/Leaflet/Leaflet/issues/161 */
    /* work-around from here: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
    mix-blend-mode: normal;
}

.leaflet-photomarker-img {
    transition: width 200ms, height 200ms, margin-left 200ms, margin-top 200ms;
}

.shape-circle {
    box-sizing: border-box;
    display: block;
    transform: scale(1);
    width: 16px !important;
    height: 16px !important;
    margin-top: 10px;
    border-radius: 100px;
    /*background: #ff3c00; Farbe wird nun in LEAFLETMAP gesetzt */
    border: 2.5px solid #fff;
    box-shadow: 3px 3px 10px #888;
}

.leaflet-marker-photo {
    box-sizing: initial;
}

.leaflet-marker-icon i {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1);
    width: 16px !important;
    height: 16px !important;
    margin-top: 10px;
}

.leaflet-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.leaflet-marker-icon img {
    
    object-fit: cover;
    overflow-clip-margin: unset;
    /* 
    Wenn object-fit benutzt wird, um ein Bild signifikant herunterzuskalieren,
    scheinen Chrome Browser zum simplen Nearest Neighbour zurückzufallen. Mit overflow-clip-margin ist das aktuell behebbar.
    In Zukunft lässt sich aber bestimmt die 'image-rendering' property benutzen: 
    https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering 
    */
}

.leaflet-marker-icon svg, .leaflet-marker-icon span {
    box-sizing: unset !important;
    margin-top: 8px;
}

/* Zentriert den Text der Cluster Circles */
.cluster-circle > * {
    position: absolute;
    inset: 50% 0 0 50%;
    margin: unset;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* Zentriert Font Awesome SVGs, auch bei unterschiedlichen Browser Zoom-Stufen */
.fa-layers svg {
    inset: 50% 0 0 50% !important;
    margin: unset !important;
    transform: translate(-50%, -50%);
}

.leaflet-photomarker-img {
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px #888;
}

.leaflet-control-locate-location svg {
    margin-top: 0px;
}

.fa-exclamation-triangle path {
    stroke: white;
    stroke-width: 30px;
}

/* Show/Hide Photo Button */
.hide {
    /*visibility: hidden;*/
    opacity: 0;
    /*transition: opacity 0.2s ease-in;*/
}

.pointer-events--disable {
    pointer-events: none !important;
}

.pointer-events--enable {
    pointer-events: all !important;
}

.remove-border {
    border: 2px solid transparent !important;
    box-shadow: unset !important;
    /*transition: opacity 0.3s, border 0.2s, box-shadow 0.2s;*/
}

.show {
    opacity: 1;
}

/* Leaflet Popup Position Fix */
.leaflet-popup {
    margin-bottom: unset;
}

/* Leaflet Popup Close Button Position Fix */
.leaflet-popup-close-button {
    position: absolute !important;
}

/* Attribution Font Fix */
.leaflet-control-attribution {
    font-family: "Baton Turbo", Arial, sans-serif;
}

/* Custom Cluster */
.cluster-circle {
    display: flex; 
    width: 24px;
    height: 24px;
    margin-left: -13.5px !important;
    margin-top: -13.5px !important;
    font: 14px "Baton Turbo", Arial, sans-serif;
    text-align: center;
    font-weight: 900;
    color: white;
    /*background-color: #ff3c00;*/ /* Clusterfarbe wird nun durch SecondaryColor und MainColor bestimmt */
    border: 2.5px solid #fff;
    border-radius: 150px;
    box-shadow: 3px 3px 10px #888;
    box-sizing: unset;
    align-items: center;
    justify-content: center;
    align-content: center;
}

/* Umgedrehte Popups */
.leaflet-popup {
    top: 20px;
}

.leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    left: 50%;
    top: -17.2px;
    margin-left: -18px;
    overflow: hidden;
    pointer-events: none;
    transform: rotate(180deg);

    /* Schatten für umgedrehten Tip */
    filter: drop-shadow(1px -1px 6px rgba(0, 0, 0, 0.4));
    clip-path: inset(1px -100px -100px -100px);
}

.leaflet-popup-tip {
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}

/* Leaflet.MarkerCluster.js Default Animations */
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
    /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
    -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
    -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
    -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
    transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* Leaflet.EasyButton.js CSS */
.leaflet-bar button,
.leaflet-bar button:hover {
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
}

.leaflet-bar button {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
}

.leaflet-bar button:hover {
    background-color: #f4f4f4;
}

.leaflet-bar button:first-of-type {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.leaflet-bar button:last-of-type {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
}

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
    cursor: default;
    pointer-events: none;
    opacity: .4;
}

.easy-button-button .button-state {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}


.leaflet-touch .leaflet-bar button {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

/* Leaflet.Fullscreen CSS */

/* Safari still needs this vendor-prefix: https://caniuse.com/mdn-css_selectors_fullscreen */
/* stylelint-disable-next-line selector-no-vendor-prefix */
.leaflet-container:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}

.leaflet-container:fullscreen {
    width: 100% !important;
    height: 100% !important;
    z-index: 99999;
}

.leaflet-pseudo-fullscreen {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99999;
}

/* Attribution */

.leaflet-container .leaflet-control-attribution {
    background: unset;
}

/* Background OSM Tiles */

.leaflet-osm-tile-pane {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.attribution-details {
    min-height: 20px;
    padding: 2px 20px 2px 0px;
    background: #fff;
    margin: 10px;
    border-radius: 11px;
}

.attribution-details-summary {
    list-style: none;
    display: inline-block;
    position: absolute;
    right: 0;
    margin-right: 17px;
    bottom: 11px; /* makes info icon stay at the bottom if attribution is multiple lines*/
}

.attribution-details-content {
    display: inline-block;
    padding: 0 5px 0 5px;
}