body {
    height: 100vh;
    max-height: 1180px;
}

.page-cont::-webkit-scrollbar {
  display: none;
}

.disNone {
    display: none !important;
}

.audio-block {
  position: relative;
  z-index: 5;
  filter: drop-shadow(0px 14px 28px rgba(255, 255, 255, 0.5));
  min-height: 238px !important;
}

.map {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 80%;
    background-image: url('../images/station3/interaktive-karte320.svg');
    background-repeat: no-repeat;
    background-position: 65.55% -91px;
    background-color: #F9F4E9;
    margin-top: -91px;
    position: relative;
}

.map .advice {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
}

.map .advice p {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}

@media only screen and (min-width: 375px) {
    .audio-block {
        background-color: transparent !important;
    }
  
    .map {
      min-height: unset !important;
      height: 894px;
    }

    .page-cont .map .legend {
        display: flex;
        flex-direction: column;
        row-gap: 2px;
        position: absolute;
        top: 104px;
        left: 35px;
    }

    .page-cont .map .legend .bar {
        display: flex;
        align-items: center;
        column-gap: 10px;
    }

    .page-cont .map .legend .bar img {
        width: 15.36px;
        height: auto;
    }

    .page-cont .map .legend p {
        font-weight: 400;
    }

    .page-cont .map .legend .separator {
        width: 100%;
        height: 2px;
        background-color: black;
    }

    .page-cont .map .top {
        width: 375px;
        height: 1120px;
        position: relative;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    .page-cont .map .top .crown {
        width: 30px;
        height: 24px;
        position: absolute;
        z-index: 5000;
        background-image: none; /* url('/fileadmin/templates/images/station3/map-icons/krone_schwarz.svg'); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-color: transparent;
        border: none;
        z-index: 5000000;
    }

    /* .page-cont .map .top .crown.katholic {
        background-image: url('/fileadmin/templates/images/station3/map-icons/krone_schwarz.svg');
    }

    .page-cont .map .top .crown.protestantism {
        background-image: url('/fileadmin/templates/images/station3/map-icons/krone_rot.svg');
    }

    .page-cont .map .top .crown.orthodox {
        background-image: url('/fileadmin/templates/images/station3/map-icons/krone_gruen.svg');
    } */

    .page-cont .map .top .crown.katholic.bishop {
        width: 32.82px;
        height: 46.58px;
        background-image: none;
    }

    .page-cont .map .top .crown.crown-clicked {
        width: 49px;
        height: 41px;
        transform: translate(-14%, -20%);
        background-image: url('../images/interaktive-karte/crowns/clicked-crown.svg') !important;
    }

    .page-cont .map .top .crown.katholic.bishop.crown-clicked {
        background-image: url('../images/interaktive-karte/crowns/clicked-bishop.svg') !important;
        transform: translate(-2%, 0);
    }

    .page-cont .map .top .crown[data-crown-index='0'] {
        left: 82px;
        top: 334px;
    }

    .page-cont .map .top .crown[data-crown-index='1'] {
        left: 140px;
        top: 327px;
    }

    .page-cont .map .top .crown[data-crown-index='2'] {
        left: 195px;
        top: 273px;
    }

    .page-cont .map .top .crown[data-crown-index='3'] {
        left: 276px;
        top: 209px;
    }

    .page-cont .map .top .crown[data-crown-index='4'] {
        left: 246px;
        top: 330px;
    }

    .page-cont .map .top .crown[data-crown-index='5'] {
        left: 95px;
        top: 393px;
    }

    .page-cont .map .top .crown[data-crown-index='6'] {
        left: 277px;
        top: 418px;
    }

    .page-cont .map .top .crown[data-crown-index='7'] {
        left: 180.5px;
        top: 334px;
    }

    .page-cont .map .top .crown[data-crown-index='8'] {
        left: 329px;
        top: 457px;
    }

    .bubbles {
        width: 375px;
        height: fit-content;
        position: relative;
        z-index: 5000;
    }

    .bubbles .bubble-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(100% - 16.18px);
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 8.09px;
        filter: drop-shadow(0px 14px 28px rgba(255 255 255 / 0.5));
        box-sizing: border-box;
        z-index: 4;
    }

    .bubbles .bubble-cont[bubble-index="0"] {
       height: 527.2px;
    }

    .bubbles .bubble-cont[bubble-index="1"] {
       height: 534.2px;
    }

    .bubbles .bubble-cont[bubble-index="2"] {
       height: 588.2px;
    }

    .bubbles .bubble-cont[bubble-index="3"] {
       height: 652.2px;
    }

    .bubbles .bubble-cont[bubble-index="4"] {
       height: 531.2px;
    }

    .bubbles .bubble-cont[bubble-index="5"] {
       height: 468.2px;
    }

    .bubbles .bubble-cont[bubble-index="6"] {
       height: 433.2px;
    }

    .bubbles .bubble-cont[bubble-index="7"] {
       height: 513.422px;
    }

    .bubbles .bubble-cont[bubble-index="8"] {
       height: 404.2px;
    }

    .bubbles .bubble-cont .bubble {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        position: relative;
        background-color: white;
        padding-top: 18px;
        overflow: hidden;
    }

    .bubbles .bubble-cont[bubble-index="0"] .bubble {
        clip-path: polygon(87.3798px 0px, 204.57px 271.193px, 366.91px 271.193px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 271.193px, 154.25px 271.193px);
    }

    .bubbles .bubble-cont[bubble-index="1"] .bubble {
        clip-path: polygon(145.391px 0px, 204.57px 278.196px, 366.91px 278.196px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 278.196px, 154.25px 278.196px);
    }

    .bubbles .bubble-cont[bubble-index="2"] .bubble {
        clip-path: polygon(200.391px 0px, 204.57px 332.188px, 366.91px 332.188px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 332.188px, 154.25px 332.188px);
    }

    .bubbles .bubble-cont[bubble-index="3"] .bubble {
        clip-path: polygon(290.38px 0px, 204.57px 393.9px, 366.91px 393.9px, 366.91px 870.11px, 8.09px 870.11px, 8.09px 393.9px, 154.25px 393.9px, 249.39px 118.59px, 199.95px 90.32px, 252.14px 111.12px);
        // clip-path: polygon(281.386px 0px, 204.57px 396.193px, 366.91px 396.193px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 396.193px, 154.25px 396.193px);
        // clip-path: polygon(260.25px 0px, 204.57px 270.63px, 366.91px 270.63px, 366.91px 746.83px, 8.09px 746.83px, 8.09px 270.63px, 154.25px 270.63px, 242.6px 45.05px, 198.35px 17.51px, 244.71px 36.76px);
    }

    .bubbles .bubble-cont[bubble-index="4"] .bubble {
        clip-path: polygon(260.25px 0px, 204.57px 270.63px, 366.91px 270.63px, 366.91px 746.83px, 8.09px 746.83px, 8.09px 270.63px, 154.25px 270.63px, 242.6px 45.05px, 198.35px 17.51px, 244.71px 36.76px);
    }

    .bubbles .bubble-cont[bubble-index="5"] .bubble {
        clip-path: polygon(100.391px 0px, 204.57px 212.188px, 366.91px 212.188px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 212.188px, 154.25px 212.188px);
    }

    .bubbles .bubble-cont[bubble-index="6"] .bubble {
        clip-path: polygon(282.38px 0px, 204.57px 187.188px, 366.91px 187.188px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 187.188px, 154.25px 187.188px);
    }

    .bubbles .bubble-cont[bubble-index="7"] .bubble {
        clip-path: polygon(188.588px 0px, 204.57px 257.401px, 366.91px 257.401px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 257.401px, 154.25px 257.401px);
    }

    .bubbles .bubble-cont[bubble-index="8"] .bubble {
        clip-path: polygon(334.383px 0px, 204.57px 148.196px, 366.91px 148.196px, 366.91px 1371.82px, 0px 1371.82px, 0px 1371.82px, 0px 148.196px, 154.25px 148.196px);
    }

    .bubbles .bubble-cont .bubble .bubble-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        width: 98%;
        height: 280px;
        bottom: -24px;
        left: 0;
        overflow-y: scroll;
    }

    .bubbles .bubble-cont .bubble .close-bubble {
        width: 12.4px;
        height: 11.91px;
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 500;
    }

    .bubbles .bubble-cont .bubble .bubble-inner h2 {
        width: fit-content;
        font-family: 'framboisier', Verdana, sans-serif;
        text-transform: uppercase;
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-center {
        display: flex;
        justify-content: center;
        width: 308px;
        border-top: 2px solid black;
        padding-top: 23px;
        column-gap: 20px;
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-center .left,
    .bubbles .bubble-cont .bubble .bubble-inner .bubble-center .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-center .left p,
    .bubbles .bubble-cont .bubble .bubble-inner .bubble-center .right p {
        font-family: 'oxygen-regular', Verdana, sans-serif;
        font-size: 17px;
        text-align: center;
        font-weight: 400;
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-center .separator {
        width: 2px;
        height: 87%;
        background-color: black;
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-bottom {
        display: flex;
        justify-content: center;
        width: calc(29600%/358.82);
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-bottom, .bubbles .bubble-cont .bubble .bubble-inner .bubble-bottom p {
        padding-bottom: 20px;
    }

    .bubbles .bubble-cont .bubble .bubble-inner::-webkit-scrollbar {
        width: 9px;
        height: 90%;
        left: 0;
    }

    .bubbles .bubble-cont .bubble .bubble-inner .bubble-bottom p {
        margin-top: 10px;
    }

    .bubbles .bubble-cont .bubble .bubble-inner::-webkit-scrollbar-track {
        width: 9px;
        height: 10%;
        position: absolute;
        background: transparent;
    }

    .bubbles .bubble-cont .bubble .bubble-inner::-webkit-scrollbar-thumb {
        border-radius: 0;
        background-color: #B59A76 !important;
    }
}

@media only screen and (min-width: 768px) {
    .audio-block {
        min-height: 238px;
    }
  
    .map {
      background-image: url('/fileadmin/templates/images/station3/interaktive-karte768.svg');
      background-position: 7px -91px;
    }

    .page-cont .map .top .crown[data-crown-index='7'] {
        left: 181.5px;
    }
}

@media only screen and (min-width: 1139px) {
    .map {
      background-image: url('/fileadmin/templates/images/station3/interaktive-karte1139.svg');
      background-position: 0 -91px;
    }
}