/* 1.4281729428 */

.zwischenOrt {
    position: absolute;
    background: rgb(255, 255, 255);
    border-radius: 50%;
    width: min(2.45vw, calc(9 * 2.45 * 1px));
    height: min(2.45vw, calc(9 * 2.45 * 1px));
}

.office:hover {
    transform: scale(1.2);
    cursor: pointer;
}

#officeGubrist {
    top: 23.3%;
    left: calc(37.2% * 1.4281729428);
}

#officeGrottino {
    top: 32.6%;
    left: calc(35.7% * 1.4281729428);
}

.office {
    position: absolute;
    background: transparent;
    border-radius: 50%;
    width: min(2.45vw, calc(9 * 2.45 * 1px));
    height: min(2.45vw, calc(9 * 2.45 * 1px));
    border: min(0.4vw, calc(9 * 0.4 * 1px)) solid rgb(255, 255, 255);
}

.zwischenOrt:hover {
    transform: scale(1.2);
    cursor: pointer;
}

#zwischenOrtGubrist {
    top: 21.8%;
    left: calc(49.1% * 1.4281729428);
}

#zwischenOrtGrottino {
    top: 76.2%;
    left: calc(41.8% * 1.4281729428);
}

.zuhause {
    position: absolute;
    background: rgb(255, 255, 255, 0.5);
    border-radius: 50%;
    width: min(2.45vw, calc(9 * 2.45 * 1px));
    height: min(2.45vw, calc(9 * 2.45 * 1px));
}

.zuhause:hover {
    transform: scale(1.2);
    cursor: pointer;
}

#zuhauseGubrist {
    top: 15.7%;
    left: calc(48.8% * 1.4281729428);
}

#zuhauseGrottino {
    top: 31.6%;
    left: calc(37.4% * 1.4281729428);
}

#zuhauseMansarden {
    top: 23.2%;
    left: calc(30.5% * 1.4281729428);
}

.officeUndZwischenOrt {
    position: absolute;
    background: rgb(255, 255, 255);
    box-shadow: 0 0 0 min(0.4vw, calc(9 * 0.4 * 1px)) rgb(81, 88, 187), 0 0 0 min(0.8vw, calc(9 * 0.8 * 1px)) rgb(255, 255, 255);
    border-radius: 50%;
    width: min(2.45vw, calc(9 * 2.45 * 1px));
    height: min(2.45vw, calc(9 * 2.45 * 1px));
}

.officeUndZwischenOrt:hover {
    transform: scale(1.2);
    cursor: pointer;
}

#officeUndZwischenOrtMansarden {
    top: 47.5%;
    left: calc(17.5% * 1.4281729428);
}


[data-tooltip] {
    z-index: 600;
}


#zuhauseGubristOrt {
    position: absolute;
    top: 16.0%;
    left: calc(50.8% * 1.4281729428);
}

#zwischenOrtGubristOrt {
    position: absolute;
    top: 22.3%;
    left: calc(51.1% * 1.4281729428);
}

#officeGubristOrt {
    position: absolute;
    top: 20%;
    left: calc(36.6% * 1.4281729428);
}

#gubristTitel {
    position: absolute;
    top: 18.5%;
    left: calc(41.5% * 1.4281729428);
    width: min(7vw, calc(9 * 7 * 1px));
    text-align: center;
    z-index: 300;
    line-height: min(2vw, calc(9 * 2 * 1px));
}

.textColorGubristNotSelected {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(81, 88, 187) !important;;
}


#zuhauseGrottinoOrt {
    position: absolute;
    top: 31.9%;
    left: calc(39.4% * 1.4281729428);
}

#zwischenOrtGrottinoOrt {
    position: absolute;
    top: 76.5%;
    left: calc(43.8% * 1.4281729428);
}

#officeGrottinoOrt {
    position: absolute;
    top: 32.7%;
    left: calc(30.5% * 1.4281729428);
}

#grottinoTitel {
    position: absolute;
    top: 50.5%;
    left: calc(33.5% * 1.4281729428);
    width: min(15vw, calc(9 * 15 * 1px));
    text-align: center;
    z-index: 300;
    line-height: min(2vw, calc(9 * 2 * 1px));
}

.textColorGrottinoNotSelected {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(81, 88, 187) !important;
}

#zuhauseMansardenOrt {
    position: absolute;
    top: 21.6%;
    left: calc(27.5% * 1.4281729428);
}

#officeUndZwischenOrtMansardenOrt {
    position: absolute;
    top: 48.1%;
    left: calc(20.2% * 1.4281729428);
}

#mansardenTitel {
    position: absolute;
    top: 34.5%;
    left: calc(18.0% * 1.4281729428);
    width: min(16vw, calc(9 * 16 * 1px));
    text-align: center;
    z-index: 300;
    line-height: min(2vw, calc(9 * 2 * 1px));
}

.textColorMansardenNotSelected {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(81, 88, 187) !important;
}

.title {
    font-family: TradeGothicHvCn;
    font-size: min(2.04vw, calc(9 * 2.04 * 1px)) !important;
    font-weight: bold;
}

.title:hover {
    cursor: pointer;
}

.rightPane {
    position: absolute;
    right: 0;
    top: 11%;
    bottom: 0;
    width: 40%;
    margin-right: 3%;
    margin-bottom: 3%;
    margin-top: 3%;
    max-height: 100vw;
    z-index: 700;
}

.ui.cards > .card {
    width: 100%;
}

.ort {
    font-size: min(1.47vw, calc(9 * 1.47 * 1px)) !important;
}

#header {
    width: 100%;
    height: 11%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#header > div {
    margin-left: 30px;
    margin-right: 30px;
}

#header > div > p {
    font-family: TradeGothicHvCn;
    font-weight: bold;
    font-style: italic;
    color: rgb(81, 88, 187);
    font-size: min(4vw, calc(9 * 4 * 1px));
}

.headerTitles {
    text-underline-offset: 5px;
}

.headerTitles:hover {
    cursor: pointer;
    text-decoration: underline !important;
    text-decoration-color: rgb(81, 88, 187) !important;
    text-decoration-thickness: 5px !important;
}

#konzept {
    height: 100%;
}

#szenarien {
    height: 100%;
}

#angebot {
    height: 100%;
}

.closeButton {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -20px;
    right: -20px;
}

.closeButton:hover {
    cursor: pointer;
}

@keyframes pulse {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1.0);
    }
}

.fullscreenimage {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    max-height: 98%;
    max-width: 100vw;
    margin: auto;
    z-index: 10000;
}

.ui.dimmer {
    background-color: rgb(81 88 187 / 85%);
}

[data-tooltip][data-inverted]:after {
    background: white;
    color: rgb(81 88 187);
}

[data-inverted][data-position~=top][data-tooltip]:before, [data-inverted][data-position*="left"][data-tooltip]:before, [data-inverted][data-position*="right"][data-tooltip]:before, [data-inverted][data-position*="bottom"][data-tooltip]:before, [data-inverted][data-position*="center"][data-tooltip]:before {
    background: white;
}


p {
    word-wrap: break-word;
}

#openTagesablaufGubrist {
    display: none;
}

#openTagesablaufMansarden {
    display: none;
}

#openTagesablaufGrottino {
    display: none;
}

@media screen and (min-width: 1200px) {
    #details {
        position: absolute;
        top: 20px;
        bottom: 10px;
        left: 720px;
        max-width: 700px;
    }

    .detailsPage {
        background: white;
        max-height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #openTagesablaufGubrist {
        display: block;
    }

    #openTagesablaufMansarden {
        display: block;
    }

    #openTagesablaufGrottino {
        display: block;
    }
}