/* ==========================================================
   HEGAU24 — MAP
========================================================== */

.hegau-map {
    padding-bottom: 16px;
}

.hegau-map__surface {
    position: relative;
    height: 285px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.42), transparent 50%),
        #e7eee9;
}

/* Decorative map terrain */

.hegau-map__surface::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background:
        linear-gradient(32deg, transparent 47%, rgba(190,201,194,.7) 48%, transparent 49%),
        linear-gradient(112deg, transparent 42%, rgba(203,211,205,.8) 43%, transparent 44%),
        repeating-linear-gradient(
            18deg,
            transparent 0,
            transparent 42px,
            rgba(255,255,255,.55) 43px,
            rgba(255,255,255,.55) 45px
        );
}

.hegau-map__lake {
    position: absolute;
    right: -5%;
    top: 3%;
    width: 32%;
    height: 90%;
    border-radius: 48% 35% 42% 55%;
    transform: rotate(10deg);
    background: rgba(119, 184, 222, .38);
}

.hegau-map__road {
    position: absolute;
    height: 5px;
    border-radius: 999px;
    background: rgba(238, 177, 68, .55);
    transform-origin: left center;
    box-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.hegau-map__road--one {
    width: 85%;
    left: 5%;
    top: 62%;
    transform: rotate(-13deg);
}

.hegau-map__road--two {
    width: 70%;
    left: 12%;
    top: 34%;
    transform: rotate(17deg);
}

.hegau-map__road--three {
    width: 55%;
    left: 31%;
    top: 80%;
    transform: rotate(-30deg);
}

/* Markers */

.hegau-map__marker {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #172f4b;
    text-decoration: none;
    transform: translate(-50%, -50%);
}

.hegau-map__marker span {
    width: 17px;
    height: 17px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    transition: transform .2s ease;
}

.hegau-map__marker strong {
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 3px 12px rgba(30,50,70,.10);
    font-size: 11px;
    white-space: nowrap;
}

.hegau-map__marker:hover span {
    transform: scale(1.3);
}

.hegau-map__marker--blue span { background: #1877d2; }
.hegau-map__marker--green span { background: #38ad69; }
.hegau-map__marker--orange span { background: #ef962f; }
.hegau-map__marker--purple span { background: #8b63d8; }
.hegau-map__marker--red span { background: #e65b61; }
.hegau-map__marker--yellow span { background: #e2b536; }

.hegau-map__label {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    color: rgba(30,64,88,.10);
    font-size: 42px;
    font-weight: 900;
    letter-spacing: .12em;
}

/* Filters */

.hegau-map__filters {
    display: flex;
    gap: 7px;
    padding: 13px 16px 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hegau-map__filters::-webkit-scrollbar {
    display: none;
}

.hegau-map__filters button {
    flex: 0 0 auto;
    border: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4f7fa;
    color: #33475d;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.hegau-map__filters button:hover,
.hegau-map__filters button.is-active {
    background: #e5f0ff;
    color: #1268c4;
}

.hegau-map__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 8px 18px 0;
    color: #8290a0;
    font-size: 11px;
}

.hegau-map__bottom a {
    flex: 0 0 auto;
    color: #1268c4;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 700px) {
    .hegau-map__surface {
        height: 250px;
    }

    .hegau-map__bottom span {
        display: none;
    }

    .hegau-map__bottom {
        justify-content: center;
    }
}