.mm-map-wrap {
    position: relative;
}

.mm-map-svg {
    display: block;
    width: 100%;
    height: auto;
}

.mm-map-overlay {
    position: absolute;
    inset: 0;
}

.mm-icon-cluster {
    position: absolute;
    transform: translate(-50%, -50%);
}

.mm-icon-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-icon-bubble {
    border: 0;
    background-color: transparent;
    position: relative;
    flex: 0 0 auto;
    transition: transform 220ms ease, margin 220ms ease;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    margin: 0 5px;
}

.mm-icon-bubble:hover, .mm-icon-bubble.is-open {
    transform: scale(1.2);
    transition: transform 220ms ease;
}

.cat-pyramiden {
    background-image: url(../Icons/pyramiden.svg);
}

.cat-wasserwelten {
    background-image: url(../Icons/wasserwelten.svg);
}

.cat-natur {
    background-image: url(../Icons/natur.svg);
}

.cat-kulinarik {
    background-image: url(../Icons/kulinarik.svg);
}

.cat-spiritualitaet {
    background-image: url(../Icons/spiritualitaet.svg);
}

.cat-luxus {
    background-image: url(../Icons/luxus.svg);
}

.cat-tierwelt {
    background-image: url(../Icons/tierwelt.svg);
}

.cat-aktivitaet {
    background-image: url(../Icons/aktivitaet.svg);
}

.cat-kunst {
    background-image: url(../Icons/kunst.svg);
}

.mm-icon-cluster.is-collapsed .mm-icon-bubble {
    margin-left: calc(var(--mm-overlap, 35px) * -1);
}

.mm-icon-cluster.is-collapsed .mm-icon-bubble:first-child {
    margin-left: 0;
}

.mm-icon-cluster.is-expanded .mm-icon-bubble {
    margin-left: 0; /* normaler Abstand */
}

.mm-icon-cluster.is-expanded .mm-icon-bubble:first-child {
    margin-left: 0;
}

/* Popover Layout */
.mm-popover {
    width: 350px;
    max-width: 350px;
    height: 500px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    padding: 2rem 1.5rem;
    border-radius: 3px;
}

.mm-popover .popover-content {
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* Bild oben */
.mm-popover-img-wrap {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.mm-popover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Titel */
.mm-popover-title {
    font-weight: 600;
    padding: 1rem 0 0;
}

/* Text */
.mm-popover-text {
    line-height: 1.4;
}

.popover.mm-popover {
    position: absolute !important;
}

.mm-popover .arrow {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    border: none;
}

.mm-popover-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mm-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

.mm-popover-category {
    opacity: 0.7;
}

.mm-popover-close {
    background: none;
    border: 0;
    font-size: 40px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    padding: 0;
}

/* Overlay liegt optisch oben, aber ist "durchklickbar" */
.mm-map-overlay {
    pointer-events: none;
}

/* Alles, was wirklich klickbar sein soll, bekommt wieder Events */
.mm-map-overlay .mm-icon-cluster,
.mm-map-overlay .mm-icon-bubble,
.mm-map-overlay .mm-icon-bubble * {
    pointer-events: auto;
}

.mm-region-link:hover g rect {
    fill: #6e55a0;
}

.mm-region-link:hover path {
    fill: #fff;
}

.map-mobil {
    display: none;
}

.mm-mobile-accordion-target .panel-group {
    margin: 1rem;
}

.mm-strand-link:hover g path {
    fill: #6e55a0;
}

@media (max-width: 991px) {
    .mm-map-wrap .mm-map-overlay,
    .mm-map-wrap .mm-icon-cluster,
    .mm-map-wrap .mm-region-button,
    .map-desktop {
        display: none !important;
    }

    .mm-map-wrap svg.map-mobil .mm-region-shape {
        cursor: pointer;
    }

    .mm-map-wrap svg.map-mobil .mm-region-shape {
        transition: fill .2s ease;
    }

    .mm-map-wrap svg.map-mobil .mm-region-shape {
        opacity: 0.48;
    }
    .mm-map-wrap svg.map-mobil .mm-region-shape.is-active {
        opacity: 1;
        fill: #FFAA00 !important;
    }

    .beach-link .mm-hitbox { pointer-events: all; }

    .beach-link:hover path {
        fill: #000 !important;
    }

    .map-mobil {
        display: block;
    }

    .mm-region-panel {
        padding: 0;
        margin-top: 1rem;
    }

    .mm-region-panel .panel-body {
        padding: 1rem;
    }

    .mm-region-title a.collapsed .mm-region-title-inner {
        background-color: #ffaa00;
    }

    .mm-region-title a:not(.collapsed) .mm-region-title-inner {
        background-color: #6e55a0;
        color: #fff;
    }

    .mm-region-title a:hover, .mm-region-title a:focus {
        text-decoration: none;
        outline: none;
        outline-offset: 0;
    }

    .mm-region-title-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 55px;
        padding: 0 1rem;
    }

    .mm-region-icons {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .mm-region-icon, .mm-slide-icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    }

    .mm-region-icon + .mm-region-icon {
        margin-left: -20px;
    }

    .mm-region-icon-more {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        background: #eee;
    }

    .mm-slide-card {
        position: relative;
    }

    .mm-slide-card .mm-slide-icon {
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: 55px;
        height: 55px;
    }

    .mm-region-slider {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 0 0 8px;
    }

    .mm-region-slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}