@charset "UTF-8";
/* @import url("fonts/stylesheet.css");*/
@import url("fonts/ebert/stylesheet.css");

html {
    background-color: #fff;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: 'Ebert';
    font-weight: 500;

    /* Farben der Bereiche */
    --wandfarbe-becker: #efe6ef;
    --wandfarbe-gajewski: #fff7d9;
    --wandfarbe-williams: #ceeefb;
    --wandfarbe-demir: #fcead4;
    --wandfarbe-romano: #ccddea;
    --wandfarbe-lohmann: #f5d8e7;
    --wandfarbe-wang: #dbf0ef;

    --hauptfarbe-becker: #5b085a;
    --hauptfarbe-gajewski: #ffcc00;
    --hauptfarbe-williams: #5bc5f2;
    --hauptfarbe-demir: #d70000;
    --hauptfarbe-romano: #005597;
    --hauptfarbe-lohmann: #8d0449;
    --hauptfarbe-wang: #87ccc9;

    --schriftfarbe-becker: #7c397b;
    --schriftfarbe-gajewski: #704500;
    --schriftfarbe-williams: #00567c;
    --schriftfarbe-williams-2: #005d76;
    --schriftfarbe-demir: #a10000;
    --schriftfarbe-romano: #004472;
    --schriftfarbe-lohmann: #6a0337;
    --schriftfarbe-wang: #004847;

    --boden-becker: #884c87;
    --boden-gajewski: #ba8874;
    --boden-williams: #955a4d;
    --boden-demir: #f9cb93;
    --boden-romano: #92bbdb;
    --boden-lohmann: #a59898;
    --boden-wang:  #b7876a;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.infografik_wrapper,
.infografik_wrapper #popups .popup_window,
.infografik_wrapper .modal,
.infografik_wrapper .modal .dialog_content,
.infografik_wrapper .modal .dialog_content .info_wrap_wrap,
.infografik_wrapper .modal .dialog_content .infotext_wrapper,
.infografik_wrapper .modal .dialog_content .infopopup_text,
.infografik_wrapper .einordnung,
.infografik_wrapper .einordnung .einordnung_text_wrapper,
.infografik_wrapper #favoriten,
.infografik_wrapper .favoriten_wrapper,
.infografik_wrapper #popups .popup_window .popup_content,
.infografik_wrapper #popups .popup_window .ui-accordion .ui-accordion-content.ui-accordion-content,
.ui-accordion .ui-accordion-content
{
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */

}


.infografik_wrapper::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window .popup_content::-webkit-scrollbar,
.infografik_wrapper .modal::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .info_wrap_wrap::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .infotext_wrapper::-webkit-scrollbar,
.infografik_wrapper .modal .dialog_content .infopopup_text::-webkit-scrollbar,
.infografik_wrapper .einordnung::-webkit-scrollbar,
.infografik_wrapper .einordnung .einordnung_text_wrapper::-webkit-scrollbar,
.infografik_wrapper #favoriten::-webkit-scrollbar,
.infografik_wrapper .favoriten_wrapper::-webkit-scrollbar,
.infografik_wrapper #popups .popup_window .ui-accordion .ui-accordion-content.ui-accordion-content::-webkit-scrollbar,
.ui-accordion .ui-accordion-content::-webkit-scrollbar {
    width: 0; /* For Chrome, Safari, and Opera */
    display: none;
}


img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-use©r-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
}

span.tooltip {
    text-decoration: underline;
    cursor: pointer;
}

.hintergrund {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    overflow: hidden;
}
.hintergrund img {
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    position: absolute;
}
.hintergrund img.mobile{
    display: none;
}

.hintergrund .hg_skyline {
    width: 100%;
    top: 39%;
}
.hintergrund .haus {
    width: 55%;
    left: 22%;
    top: 11%;
}
.hintergrund .baum {
    width: 8%;
    left: 26.6%;
    top: 43%;
    transform-origin: bottom center;
    animation: baum_wind 5s ease-in-out infinite alternate-reverse;
}
@keyframes baum_wind {
    from {transform: rotate(0); }
    60% {transform: rotate(0); }
    75% {transform: rotate(2deg); }
    90% {transform: rotate(-2deg); }
    to {transform: rotate(0); }
}

.hintergrund .logo {
    bottom: 3.4%;
    right: 2%;
    width: 9%;
    left: unset;
    top: unset;
}

.hintergrund .haus_rauch {
    width: 8%;
    left: 62%;
    top: 6%;
    transform-origin: left bottom;
    animation: haus_rauch 0.7s ease-in-out infinite alternate-reverse;
}
@keyframes haus_rauch {
    from {transform: rotate(-2deg) skewY(-5deg);}
    to {transform: rotate(2deg) skewY(0);}
}


#rotate_animation {
    display: none;
    position: absolute;
    top: 26%;
    width: 30%;
    background: rgba(255, 255, 255, 0.8);
    height: 53%;
    left: 36.5%;
    border-radius: 500px;
    z-index: 10000000;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#rotate_animation img {
    margin: 0 auto;
    width: 90%;
    height: 90%;
}

@media only screen and (max-width: 500px) {
    #rotate_animation {
        display: flex;
    }
}

a[href],
input[type='submit'],
input[type='image'],
label[for],
select,
button,
.pointer {
    cursor: pointer;
}

ul {
    margin:  0;
    padding-left: 5%;
    padding-top: 0;
}

.infografik_wrapper {
    background: transparent;
    background-size: cover;
    max-width: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
    --before-height: 56.25%;
}

.infografik_wrapper::before {
    content: '';
    display: block;
    padding-top: var(--before-height);
}

.infografik_wrapper #backgroundimage {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: #d6dcee;
    position: absolute;
    left: 0;
    top: 0;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: contain;
}
.infografik_wrapper .schaltflaechen {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.infografik_wrapper .schaltflaechen .button {
    position: absolute;
    height: auto;
}
.infografik_wrapper .schaltflaechen .button#favoriten_button {
    position: absolute;
    width: 5.3%;
    right: 5%;
    top: 0;
}
.infografik_wrapper .schaltflaechen .button#favoriten_button > img {
    width: 100%;
}
.infografik_wrapper .schaltflaechen .button#favoriten_button.gefuellt .voll {
    display: block;
}
.infografik_wrapper .schaltflaechen .button#favoriten_button .voll,
.infografik_wrapper .schaltflaechen .button#favoriten_button.gefuellt .leer {
    display: none;
}


.infografik_wrapper .schaltflaechen .button#favoriten_button .hover,
.infografik_wrapper .schaltflaechen .button#favoriten_button:hover .leer,
.infografik_wrapper .schaltflaechen .button#favoriten_button:hover .voll {
    display: none;
}
.infografik_wrapper .schaltflaechen .button#favoriten_button:hover .hover {
    display: block;
}


.infografik_wrapper .schaltflaechen .button#infobutton_start {
    position: absolute;
    width: 7%;
    left: 18%;
    top: 21%;
    animation: infoi 1s ease-in-out infinite alternate-reverse;
}
.infografik_wrapper .schaltflaechen .button#infobutton_start .bg_kreis {
    transition: fill 0.3s ease-in-out;
}
.infografik_wrapper .schaltflaechen .button#infobutton_start:hover .bg_kreis {
    fill: #6da19e;
}

.infografik_wrapper .schaltflaechen .button.haustueren {
    width: 7.0%;
    position: absolute;
    z-index: 10;
    height: auto;
    top: 10%;
}
.infografik_wrapper .schaltflaechen .button.haustueren .grafik_tuer {
    transform: scale(1);
    transition: transform .2s ease-in-out;
    transform-origin: center bottom;
}

.infografik_wrapper .schaltflaechen .button.haustueren .button_content_wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}
.infografik_wrapper .schaltflaechen .button.haustueren .button_content_wrapper > img {
    position: absolute;
    width: 100%;
    z-index: 2;
}
.infografik_wrapper .schaltflaechen .button.haustueren .button_content_wrapper > img.details,
.infografik_wrapper .schaltflaechen .button.haustueren .button_content_wrapper > img.grafik_tuer {
    z-index: 1 !important;
}
.infografik_wrapper .schaltflaechen .button.haustueren .grafik_tuer {
    transition: filter 0.3s ease-in-out;
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .grafik_tuer,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .grafik_tuer {
    filter: brightness(1.14);
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img:not(.grafik_tuer):not(.details):not(.haengepflanze),
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img:not(.grafik_tuer):not(.details):not(.haengepflanze) {
    animation-fill-mode: both;
    animation-name: itembounce;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    transform-origin: center;
}
@keyframes itembounce {
    from { transform: translateY(0);}
    30% { transform: translateY(calc(var(--font-size) * -1.3)) rotate(var(--rotation));}
    to   { transform: translateY(0);}
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.delay-1,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.delay-1 {
   animation-delay: 0.1s;
    --rotation: 20deg;
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.delay-2,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.delay-2 {
    animation-delay: 0.2s;
    --rotation: -20deg;
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.delay-3,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.delay-3 {
    animation-delay: 0.3s;
    --rotation: 16deg;
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.delay-4,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.delay-4 {
    animation-delay: 0.4s;
    --rotation: -15deg;
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.delay-5,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.delay-5 {
    animation-delay: 0.5s;
    --rotation: -8deg;
}
.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.delay-6,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.delay-6 {
    animation-delay: 0.6s;
    --rotation: 10deg;
}

.infografik_wrapper .schaltflaechen .button.haustueren.animation .button_content_wrapper > img.haengepflanze,
.infografik_wrapper .schaltflaechen .button.haustueren:hover .button_content_wrapper > img.haengepflanze {
    transform-origin: top center;
    animation: haengepflanze 1.5s ease-in-out;
}
@keyframes haengepflanze {
    from { transform: rotate(0deg); }
    33% { transform: rotate(-15deg); }
    66% { transform: rotate(8deg); }
    to { transform: rotate(0deg); }
}
/* Positionierung Details Haus*/
/* Tür Dunkelblau */
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau {
    bottom: 10%;
    left: 49.5%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .grafik_tuer {
    width: 47%;
    bottom: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .details {
    width: 110%;
    bottom: 3%;
    left: -37%;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .karton1 {
    width: 30%;
    bottom: 7%;
    left: -20%;
}

.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .karton2 {
    width: 24%;
    bottom: 7%;
    left: -44%;
}

.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .sackkarre {
    width: 31%;
    bottom: 8%;
    left: -7%;
}

.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .katze {
    width: 19%;
    bottom: 24%;
    left: -41%;
    z-index: 5;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .katze_arm {
    width: 12%;
    bottom: 32%;
    left: -27%;
    z-index: 4;
    transform-origin: bottom left;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau .katze_pflanze {
    width: 26%;
    bottom: 28%;
    left: -21%;
    z-index: 3;
}

.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau:hover .katze_arm {
    animation: itembounce 0.6s ease-in-out both,
                winkekatze 0.3s 0.6s ease-in-out infinite alternate;
}
@keyframes winkekatze {
    from {transform: rotate(0deg);}
    to {transform: rotate(10deg);}
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelblau:hover .katze_pflanze {
    animation: itembounce 0.6s both ease-in-out,
                pflanze_wackelt 0.5s 0.6s ease-in-out infinite alternate;
}
@keyframes pflanze_wackelt {
    from {transform: rotate(0deg);}
    to {transform: rotate(13deg);}
}
/* Tür hellblau */
.infografik_wrapper .schaltflaechen .button#tuer_hellblau {
    bottom: 27%;
    left: 49.5%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .grafik_tuer {
    width: 47%;
    bottom: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .details {
    width: 62%;
    bottom: 3%;
    left: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .pflanze {
    width: 20%;
    bottom: 12%;
    left: 5%;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .giesskanne {
    width: 24%;
    bottom: 9%;
    left: -11%;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .schuhschrank {
    width: 20%;
    bottom: 12%;
    left: 75%;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .stiefel {
    width: 10.5%;
    bottom: 12%;
    left: 84%;
}
.infografik_wrapper .schaltflaechen .button#tuer_hellblau .sneaker {
    width: 12%;
    bottom: 12%;
    left: 74%;
}


/* Tür dunkelrot */
.infografik_wrapper .schaltflaechen .button#tuer_dunkelrot {
    bottom: 27%;
    left: 42.4%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelrot .grafik_tuer {
    width: 47%;
    bottom: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelrot .details {
    width: 63%;
    bottom: 3%;
    left: 11%;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelrot .garderobe {
    width: 22%;
    bottom: 23%;
    left: 1%;
}
.infografik_wrapper .schaltflaechen .button#tuer_dunkelrot .roller {
    width: 30%;
    bottom: 12%;
    left: 60%;
}
/* Tür lila */
.infografik_wrapper .schaltflaechen .button#tuer_lila {
    bottom: 43.7%;
    left: 49.5%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_lila .grafik_tuer {
    width: 47%;
    bottom: 12%;
    z-index: 1;
}
.infografik_wrapper .schaltflaechen .button#tuer_lila .details {
    width: 70%;
    bottom: 3%;
    left: 13%;
    z-index: 1;
}
.infografik_wrapper .schaltflaechen .button#tuer_lila .kinderwagen {
    width: 37%;
    bottom: 12%;
    left: -6%;
}
.infografik_wrapper .schaltflaechen .button#tuer_lila .eimer {
    width: 18%;
    bottom: 10%;
    left: 63%;
}
.infografik_wrapper .schaltflaechen .button#tuer_lila .ball {
    width: 16%;
    bottom: 2%;
    left: 47%;
}
/* Tür mint */
.infografik_wrapper .schaltflaechen .button#tuer_mint {
    bottom: 43.7%;
    left: 42.4%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_mint .grafik_tuer {
    width: 47%;
    bottom: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_mint .details {
    width: 63%;
    bottom: 2%;
    left: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_mint .skateboard {
    width: 25%;
    bottom: 12%;
    left: 17%;
}
.infografik_wrapper .schaltflaechen .button#tuer_mint .schirmstaender {
    width: 14%;
    bottom: 10%;
    left: 63%;
}
/* Tür rot */
.infografik_wrapper .schaltflaechen .button#tuer_rot {
    bottom: 60.7%;
    left: 49.5%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_rot .grafik_tuer {
    width: 47%;
    bottom: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_rot .details {
    width: 79%;
    bottom: 4%;
    left: 14%;
}
.infografik_wrapper .schaltflaechen .button#tuer_rot .haengepflanze {
    width: 20%;
    bottom: 66%;
    left: 70%;
}
.infografik_wrapper .schaltflaechen .button#tuer_rot .rollator {
    width: 30%;
    bottom: 13%;
    left: 65%;
}

/* Tür gelb */
.infografik_wrapper .schaltflaechen .button#tuer_gelb {
    bottom: 60.7%;
    left: 42.4%;
    height: 14.5%;
    top: unset;
}
.infografik_wrapper .schaltflaechen .button#tuer_gelb .grafik_tuer {
    width: 47%;
    bottom: 12%;
}
.infografik_wrapper .schaltflaechen .button#tuer_gelb .details {
    width: 65%;
    bottom: 3%;
    left: 3%;
}
.infografik_wrapper .schaltflaechen .button#tuer_gelb .dreirad {
    width: 33%;
    bottom: 13%;
    left: 61%;
}
.infografik_wrapper .schaltflaechen .button#tuer_gelb .kreide {
    width: 12%;
    bottom: 13%;
    left: 11%;
}


.infografik_wrapper .schaltflaechen .button.haustueren:hover .grafik_tuer {
    transform: scale(1.08);
}

.modal.wohnung#popup_familie_becker .dialog_content,
.modal.wohnung#popup_familie_becker::backdrop {
    background-color: var(--wandfarbe-becker);
    background-image: linear-gradient(var(--wandfarbe-becker) 80%, var(--boden-becker) 81%);
}
.modal.wohnung#popup_familie_gajewski .dialog_content,
.modal.wohnung#popup_familie_gajewski::backdrop {
    background-color: var(--wandfarbe-gajewski);
    background-image: linear-gradient(var(--wandfarbe-gajewski) 80%, var(--boden-gajewski) 81%);
}
.modal.wohnung#popup_familie_williams .dialog_content,
.modal.wohnung#popup_familie_williams::backdrop {
    background-color: var(--wandfarbe-williams);
    background-image: linear-gradient(var(--wandfarbe-williams) 80%, var(--boden-williams) 81%);
}
.modal.wohnung#popup_familie_demir .dialog_content,
.modal.wohnung#popup_familie_demir::backdrop {
    background-color: var(--wandfarbe-demir);
    background-image: linear-gradient(var(--wandfarbe-demir) 80%, var(--boden-demir) 81%);
}
.modal.wohnung#popup_familie_romano .dialog_content,
.modal.wohnung#popup_familie_romano::backdrop {
    background-color: var(--wandfarbe-romano);
    background-image: linear-gradient(var(--wandfarbe-romano) 80%, var(--boden-romano) 81%);
}
.modal.wohnung#popup_familie_lohmann .dialog_content,
.modal.wohnung#popup_familie_lohmann::backdrop {
    background-color: var(--wandfarbe-lohmann);
    background-image: linear-gradient(var(--wandfarbe-lohmann) 80%, var(--boden-lohmann) 81%);
}
.modal.wohnung#popup_familie_wang .dialog_content,
.modal.wohnung#popup_familie_wang::backdrop {
    background-color: var(--wandfarbe-wang);
    background-image: linear-gradient(var(--wandfarbe-wang) 80%, var(--boden-wang) 81%);
}


/* Positionierungen der Szenen */
.modal.wohnung .fußboden {
    width: 100%;
    bottom: 0;
    height: 20%;
    position: absolute;
    background-color: var(--boden-farbe);
    z-index: 1;
}
.modal.wohnung .fußboden:before {
    content: '';
    background-color: var(--boden-farbe);
    height: calc((100vh - (100% * 5)) / 2 + 100%);
    position: absolute;
    left: calc((100vw - 100%) / -2);
    width: 100vw;
}

/*.modal.wohnung .fußboden:after {
    content: '';
    background-color: var(--boden-farbe);
    height: 1000vh;
    position: absolute;
    left: -100vw;
    width: 1000vw;
}*/

.modal.wohnung .fußboden,
.modal.wohnung .fußboden:before,
.modal.wohnung .fußboden:after {
    background-color: var(--boden-farbe);
}
.modal.wohnung#popup_familie_becker .fußboden,
.modal.wohnung#popup_familie_becker .fußboden:before,
.modal.wohnung#popup_familie_becker .fußboden:after {
    background-color: var(--boden-becker);
}
.modal.wohnung#popup_familie_gajewski .fußboden,
.modal.wohnung#popup_familie_gajewski .fußboden:before,
.modal.wohnung#popup_familie_gajewski .fußboden:after {
    background-color: var(--boden-gajewski);
}
.modal.wohnung#popup_familie_williams .fußboden,
.modal.wohnung#popup_familie_williams .fußboden:before,
.modal.wohnung#popup_familie_williams .fußboden:after {
    background-color: var(--boden-williams);
}
.modal.wohnung#popup_familie_demir .fußboden,
.modal.wohnung#popup_familie_demir .fußboden:before,
.modal.wohnung#popup_familie_demir .fußboden:after {
    background-color: var(--boden-demir);
}
.modal.wohnung#popup_familie_romano .fußboden,
.modal.wohnung#popup_familie_romano .fußboden:before,
.modal.wohnung#popup_familie_romano .fußboden:after {
    background-color: var(--boden-romano);
}
.modal.wohnung#popup_familie_lohmann .fußboden,
.modal.wohnung#popup_familie_lohmann .fußboden:before,
.modal.wohnung#popup_familie_lohmann .fußboden:after {
    background-color: var(--boden-lohmann);
}
.modal.wohnung#popup_familie_wang .fußboden,
.modal.wohnung#popup_familie_wang .fußboden:before,
.modal.wohnung#popup_familie_wang .fußboden:after {
    background-color: var(--boden-wang);
}



.modal.wohnung .dialog_content > img {
    position: absolute;
    width: 50%;
    left: 0;
    top: 0;
    z-index: 10;
}
/* Familie Romano*/
.modal.wohnung#popup_familie_romano .dialog_content .gegenstaende {
    width: auto;
    height: 82.2%;
    left: 17%;
}
.modal.wohnung#popup_familie_romano .dialog_content .lampe {
    width: auto;
    height: 25%;
    top: -6%;
    z-index: 10;
    left: 60%;
    transform-origin: top center;
    animation: lampe 2s ease-in-out alternate-reverse infinite;
}
@keyframes lampe {
    from {transform: rotate(-3deg);}
    to {transform: rotate(3deg);}
}
.modal.wohnung#popup_familie_romano .dialog_content .details_hg {
    width: 38%;
    bottom: 20%;
    top: unset;
    left: 29%;
}
.modal.wohnung#popup_familie_romano .dialog_content .chris {
    width: 14%;
    left: 29%;
    bottom: 13%;
    top: unset;
}
.modal.wohnung#popup_familie_romano .dialog_content .marco {
    width: 27%;
    left: 62%;
    top: unset;
    bottom: 10%;
}
/* Familie William*/
.modal.wohnung#popup_familie_williams .dialog_content .bettkopfteil {
    width: auto;
    height: 47.2%;
    left: 25.2%;
    top: 9%;
}
.modal.wohnung#popup_familie_williams .dialog_content .bettteil {
    width: auto;
    height: 35.2%;
    left: 24%;
    top: 47%;
    z-index: 12;
}
.modal.wohnung#popup_familie_williams .dialog_content .einkauf {
    width: auto;
    height: 18%;
    left: 65.5%;
    top: 21.8%;
}
.modal.wohnung#popup_familie_williams .dialog_content .wasserflasche {
    width: auto;
    height: 15%;
    left: 64.5%;
    top: 24.2%;
    transform-origin: bottom center;
    animation: flaschekippeln 5s ease-in-out infinite;
}
@keyframes flaschekippeln {
    0%   { transform: rotate(0deg); }
    5%   { transform: rotate(-6deg); }
    10%  { transform: rotate(4deg); }
    15%  { transform: rotate(-5deg); }
    20%  { transform: rotate(3deg); }
    25%  { transform: rotate(-2.5deg); }
    30%  { transform: rotate(2deg); }
    35%  { transform: rotate(-1.5deg); }
    40%  { transform: rotate(1deg); }
    45%  { transform: rotate(-0.5deg); }
    50%  { transform: rotate(0.3deg); }
    55%  { transform: rotate(-0.2deg); }
    60%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}


.modal.wohnung#popup_familie_williams .dialog_content .kuechenzeile {
    width: auto;
    height: 67.2%;
    left: 63%;
    top: 14.5%;
}
.modal.wohnung#popup_familie_williams .dialog_content .details_hg {
    width: 36%;
    bottom: 20%;
    top: unset;
    left: 24%;
}
.modal.wohnung#popup_familie_williams .dialog_content .elisabeth {
    width: 14%;
    left: 27.4%;
    bottom: 53%;
    top: unset;
}
.modal.wohnung#popup_familie_williams .dialog_content .jolanda {
    width: 12%;
    left: 74.2%;
    top: unset;
    bottom: 17.5%;
}
.modal.wohnung#popup_familie_williams .dialog_content .ania {
    width: 14%;
    left: 15.7%;
    top: unset;
    bottom: 18%;
    z-index: 11;
}
/* Familie Lohmann*/
.modal.wohnung#popup_familie_lohmann .dialog_content .pflanzen {
    width: auto;
    height: 88.2%;
    left: 21.2%;
    top: 0%;
}
.modal.wohnung#popup_familie_lohmann .dialog_content .haengepflanze {
    width: auto;
    height: 33.2%;
    left: 22.2%;
    top: -6%;
    transform-origin: top center;
    animation: lampe 2s ease-in-out alternate-reverse infinite;
}
.modal.wohnung#popup_familie_lohmann .dialog_content .stuehle {
    width: auto;
    height: 42.2%;
    left: 25.7%;
    top: 41%;
}
.modal.wohnung#popup_familie_lohmann .dialog_content .tisch {
    width: auto;
    height: 28.5%;
    left: 34.9%;
    top: 51.7%;
}
.modal.wohnung#popup_familie_lohmann .dialog_content .details_hg {
    width: 36%;
    bottom: 20%;
    top: unset;
    left: 24%;
}
.modal.wohnung#popup_familie_lohmann .dialog_content .nele {
    width: 12%;
    left: 41.9%;
    bottom: 18.2%;
    top: unset;
}
.modal.wohnung#popup_familie_lohmann .dialog_content .micha {
    width: 16%;
    left: 55.3%;
    bottom: 18.8%;
    top: unset;
}
/* Familie Becker*/
.modal.wohnung#popup_familie_becker .dialog_content .stuhl {
    width: auto;
    height: 39.6%;
    left: 68.5%;
    top: 47.4%;
}
.modal.wohnung#popup_familie_becker .dialog_content .stuhl_links {
    width: auto;
    height: 39.6%;
    left: 25.7%;
    top: 47.4%;
    transform-origin: bottom left;
    animation: stuhlkippeln 5s ease-in-out infinite;
}
@keyframes stuhlkippeln {
    0%   { transform: rotate(0); }
    42%  { transform: rotate(0); }
    45.5% { transform: rotate(-5deg); }
    49%  { transform: rotate(-3deg); }
    52.5% { transform: rotate(-4deg); }
    56%  { transform: rotate(0deg); }
    57%  { transform: rotate(-2deg); }
    60%  { transform: rotate(0deg); }
    63%  { transform: rotate(-1.5deg); }
    66%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.modal.wohnung#popup_familie_becker .dialog_content .tisch {
    width: auto;
    height: 43.7%;
    left: 25.7%;
    top: 43.4%;
}
.modal.wohnung#popup_familie_becker .dialog_content .spielzeug {
    width: auto;
    height: 18.2%;
    left: 21.7%;
    top: 78%;
}
.modal.wohnung#popup_familie_becker .dialog_content .bauklotz {
    position: absolute;
    width: auto;
    height: 5%;
    left: 56%;
    top: 91%;
    z-index: 100;
    transform-origin: center center;
    animation: bauklotz_bewegung 4s ease-in-out alternate-reverse infinite;
}
.modal.wohnung#popup_familie_becker .dialog_content .bauklotz svg {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: bauklotz 4s ease-in-out alternate-reverse infinite;
}
@keyframes bauklotz_bewegung {
    from {transform: translateX(0); }
    40% {transform: translateX(0); }
    50% {transform: translateX(100%); }
    80% {transform: translateX(100%); }
    100% {transform: translateX(200%); }
}
@keyframes bauklotz {
    from {transform: rotate(0deg); }
    40% {transform: rotate(0deg); }
    50% {transform: rotate(90deg); }
    80% {transform: rotate(90deg); }
    100% {transform: rotate(180deg); }
}
.modal.wohnung#popup_familie_becker .dialog_content .kind_1 {
    width: auto;
    height: 22.5%;
    left: 24.9%;
    top: 68.7%;
}
.modal.wohnung#popup_familie_becker .dialog_content .kind_2 {
    width: auto;
    height: 19.5%;
    left: 39.9%;
    top: 71.7%;
}
.modal.wohnung#popup_familie_becker .dialog_content .details_hg {
    width: 49%;
    bottom: 20%;
    top: unset;
    left: 23%;
}
.modal.wohnung#popup_familie_becker .dialog_content .ricarda {
    width: 21%;
    left: 37.9%;
    bottom: 15.8%;
    top: unset;
}
.modal.wohnung#popup_familie_becker .dialog_content .luis {
    width: 19%;
    left: 58.2%;
    top: unset;
    bottom: 14.5%;
}
/* Familie Wang*/
.modal.wohnung#popup_familie_wang .dialog_content .sofa {
    width: auto;
    height: 39.6%;
    left: 42.5%;
    top: 40.4%;
}
.modal.wohnung#popup_familie_wang .dialog_content .blume {
    width: auto;
    height: 10%;
    left: 22.9%;
    top: 30%;
    transform-origin: bottom center;
    animation: blumeimwind 4s ease-in-out alternate-reverse infinite;
}
@keyframes blumeimwind {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(4deg); }
    30%  { transform: rotate(-3deg); }
    45%  { transform: rotate(5deg); }
    60%  { transform: rotate(-4deg); }
    75%  { transform: rotate(3deg); }
    90%  { transform: rotate(-2deg); }
    94% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}


.modal.wohnung#popup_familie_wang .dialog_content .teppich {
    width: auto;
    height: 15%;
    left: 29.7%;
    top: 82.4%;
}
.modal.wohnung#popup_familie_wang .dialog_content .tisch {
    width: auto;
    height: 15.2%;
    left: 37.7%;
    top: 81%;
}
.modal.wohnung#popup_familie_wang .dialog_content .liam {
    width: auto;
    height: 31.5%;
    left: 24.9%;
    top: 63.4%;
}
.modal.wohnung#popup_familie_wang .dialog_content .pflanze {
    width: auto;
    height: 26.5%;
    left: 80.9%;
    top: unset;
    bottom: 1%;
}
.modal.wohnung#popup_familie_wang .dialog_content .details_hg {
    width: 58%;
    bottom: 20%;
    top: unset;
    left: 19%;
}
.modal.wohnung#popup_familie_wang .dialog_content .dagmar {
    width: 24.9%;
    left: 60.6%;
    bottom: 15.6%;
    top: unset;
}
.modal.wohnung#popup_familie_wang .dialog_content .robert {
    width: 14.5%;
    left: 45.8%;
    top: unset;
    bottom: 14.6%;
}
/* Familie Demir*/
.modal.wohnung#popup_familie_demir .dialog_content .pflanze {
    width: auto;
    height: 39.6%;
    left: 75%;
    top: -6%;
    transform-origin: top center;
    animation: lampe 3s ease-in-out alternate-reverse infinite;
}
.modal.wohnung#popup_familie_demir .dialog_content .rollator {
    width: auto;
    height: 31%;
    left: 51.4%;
    top: 49.3%;
}
.modal.wohnung#popup_familie_demir .dialog_content .yanis {
    width: auto;
    height: 43.5%;
    left: 33.9%;
    top: 29.4%;
}
.modal.wohnung#popup_familie_demir .dialog_content .details_hg {
    width: 23%;
    bottom: 15%;
    top: unset;
    left: 25%;
}
.modal.wohnung#popup_familie_demir .dialog_content .mara {
    width: 13.9%;
    left: 43.6%;
    bottom: 16.6%;
    top: unset;
    z-index: 10;
}
.modal.wohnung#popup_familie_demir .dialog_content .nachbar {
    width: 7.5%;
    left: 68.8%;
    top: unset;
    bottom: 16.6%;
}
/* Familie Gajewski*/
.modal.wohnung#popup_familie_gajewski .dialog_content .kind {
    width: auto;
    height: 35%;
    left: 30%;
    top: 45%;
    z-index: 11;
}
.modal.wohnung#popup_familie_gajewski .dialog_content .seifenblase {
    width: auto;
    height: 3%;
    left: 49%;
    top: 45%;
    z-index: 10;
    animation: seifenblase 8s ease-in-out infinite;
    animation-fill-mode: both;
}
@keyframes seifenblase {
    0% { top: 70%; left: 49%; opacity: 1;}
    40% { top: 59%; left: 50%; opacity: 1; }
    70% { top: 53%; left: 49%; opacity: 1; }
    90% { top: 45%; left: 50%; opacity: 1; }
    100% { top: 42%; left: 49%; opacity: 0; }
}
.modal.wohnung#popup_familie_gajewski .dialog_content .handtuch {
    width: auto;
    height: 21%;
    left: 51.3%;
    top: 24%;
    z-index: 10;
    transform-origin: top center;
    animation: lampe 1.8s ease-in-out alternate-reverse infinite;
}
.modal.wohnung#popup_familie_gajewski .dialog_content .lampe {
    width: auto;
    height: 24%;
    left: 33%;
    top: -6%;
    z-index: 10;
}
.modal.wohnung#popup_familie_gajewski .dialog_content .anna {
    width: auto;
    height: 58%;
    left: 61.4%;
    top: 25.3%;
}
.modal.wohnung#popup_familie_gajewski .dialog_content .jarek {
    width: auto;
    height: 44.5%;
    left: 29.9%;
    top: 37%;
    z-index: 20;
}
.modal.wohnung#popup_familie_gajewski .dialog_content .details_hg {
    width: 64%;
    bottom: 20%;
    top: unset;
    left: 21%;
}

/* Positionierung der Buttons - Sprechblasen */
.schaltflaechen button.button.sprechblasen {
    position: absolute;
    width: 9%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 20;
    animation: zoomIn .4s 1s ease-in-out;
    animation-fill-mode: both;
}
.schaltflaechen button.button.sprechblasen:focus,
.schaltflaechen button.button.sprechblasen:focus-visible,
.schaltflaechen button.button.sprechblasen > img:focus,
.schaltflaechen button.button.sprechblasen > img:focus-visible {
    outline-color: transparent;
    outline-width: 0;
    outline-style: unset;
}

.schaltflaechen button.button.sprechblasen > img:not(.punkt) {
    position: absolute;
}
.schaltflaechen button.button.sprechblasen .punkt {
    width: 9%;
    z-index: 5;
    margin-top: -30%;
    margin-left: -4%;
    margin-right: 10%;
    animation: punkt_bounce 3s ease-in-out infinite;
}
.schaltflaechen button.button.sprechblasen.links .punkt {
    margin-top: -25%;
    margin-left: -11%;
    margin-right: 17%;
}
.schaltflaechen button.button.sprechblasen.gedankenblase.links .punkt {
    margin-top: -25%;
    margin-left: -11%;
    margin-right: 17%;
}
.schaltflaechen button.button.sprechblasen .punkt.p2 {
    animation-delay: 0.3s;
}
.schaltflaechen button.button.sprechblasen .punkt.p3 {
    animation-delay: 0.6s;
}

@keyframes punkt_bounce {
    from { transform: translateY(0); }
    50% {transform: translateY(0); }
    65% {transform: translateY(-100%); }
    100% {transform: translateY(0); }
}


/* Familie Romano*/
.sprechblasen#sprechblase_chris {
    top: 22%;
    left: 39%;
}
.sprechblasen#sprechblase_mario {
    top: 31%;
    left: 69%;
}
/* Familie Williams*/
.sprechblasen#sprechblase_jolanda {
    top: 16%;
    left: 67%;
    width: 11%;
}
.sprechblasen#gedankenblase_jolanda {
    top: 12%;
    left: 82%;
}
.sprechblasen#gedankenblase_ania {
    top: 11%;
    left: 11%;
}
.sprechblasen#gedankenblase_elisabeth {
    top: 24%;
    left: 38%;
}
/* Familie Lohmann*/
.sprechblasen#sprechblase_nele {
    top: 32%;
    left: 38%;
    z-index: 100;
}
.sprechblasen#sprechblase_micha {
    top: 36%;
    left: 57%;
    width: 10%;
    z-index: 100;
}
/* Familie Becker*/
.sprechblasen#sprechblase_ricarda {
    top: 24%;
    left: 54%;
}
.sprechblasen#sprechblase_luis {
    top: 38%;
    left: 62%;
}
/* Familie Wang*/
.sprechblasen#sprechblase_dagmar {
    top: 27%;
    left: 67%;
}
.sprechblasen#sprechblase_robert {
    top: 25%;
    left: 57%;
    width: 11%;
}
.sprechblasen#gedankenblase_liam {
    top: 59%;
    left: 25%;
}
/* Familie Demir*/
.sprechblasen#sprechblase_mara {
    top: 27%;
    left: 51%;
    width: 11.5%;
}
.sprechblasen#gedankenblase_yanis {
    top: 25%;
    left: 29%;
}
.sprechblasen#sprechblase_hildebrandt {
    top: 26%;
    left: 63%;
}
/* Familie Gajewksi*/
.sprechblasen#sprechblase_jarek {
    top: 38%;
    left: 39%;
}
.sprechblasen#sprechblase_anna {
    top: 24%;
    left: 54%;
}


/* Szenen Einordnungen */
.wohnung .einordnung {
    position: absolute;
    right: -5%;
    bottom: -2%;
    width: 34%;
    height: auto;
    background-color: #fff;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: 3px 3px 8px rgba(0,0,0,.5);
    z-index: 100000000;
    overflow: hidden;
    color: #000;
}
.wohnung .einordnung .einordnung_text_wrapper {
    overflow: scroll;
    width: 100%;
    height: calc(var(--font-size) * 20 );
    padding: 3% 8% calc(var(--font-size) * 2.4) 7%;
    font-size: 100%;
    box-sizing: border-box;
    transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.wohnung .einordnung.closed .einordnung_text_wrapper {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.wohnung .einordnung.closed .einordnung_text_wrapper p {
    height: 0;
    padding: 0;
    margin: 0;
    font-weight: 0;
}

.wohnung .einordnung .einklappen {
    width: 4%;
    right: 6%;
    left: unset;
    top: calc(var(--font-size) * 0.5);
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
}

.wohnung .einordnung .einklappen:hover {
    transform: rotate(90deg) translateX(30%);
}
.wohnung .einordnung .einklappen.closed {
    transform: rotate(-90deg);
}
.wohnung .einordnung .einklappen.closed:hover {
    transform: rotate(-90deg) translateX(-30%);
}

#popup_familie_gajewski.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #fc0;
    --titelschrift: #000;
    color: var(--schriftfarbe-gajewski);
    background-color: var(--hg-farbe);
}
#popup_familie_demir.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #d70000;
    --titelschrift: #fff;
    color: var(--schriftfarbe-demir);
    background-color: var(--hg-farbe);
}
#popup_familie_wang.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #87ccc9;
    --titelschrift: #fff;
    color: var(--schriftfarbe-wang);
    background-color: var(--hg-farbe);
}
#popup_familie_becker.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #5b085a;
    --titelschrift: #fff;
    color: var(--schriftfarbe-becker);
    background-color: var(--hg-farbe);
}
#popup_familie_lohmann.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #8d0449;
    --titelschrift: #fff;
    color: var(--schriftfarbe-lohmann);
    background-color: var(--hg-farbe);
}
#popup_familie_williams.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #5bc5f2;
    --titelschrift: #fff;
    color: var(--schriftfarbe-williams);
    background-color: var(--hg-farbe);
}
#popup_familie_romano.wohnung .einordnung {
    --hg-farbe: #fff;
    --head-farbe: #005597;
    --titelschrift: #fff;
    color: var(--schriftfarbe-romano);
    background-color: var(--hg-farbe);
}

#popup_familie_gajewski.wohnung .einordnung p,
#popup_familie_gajewski.wohnung .einordnung p a{
    color: var(--schriftfarbe-gajewski);
}
#popup_familie_demir.wohnung .einordnung p,
#popup_familie_demir.wohnung .einordnung p a {
    color: var(--schriftfarbe-demir);
}
#popup_familie_wang.wohnung .einordnung p,
#popup_familie_wang.wohnung .einordnung p a {
    color: var(--schriftfarbe-wang);
}
#popup_familie_becker.wohnung .einordnung p,
#popup_familie_becker.wohnung .einordnung p a {
    color: var(--schriftfarbe-becker);
}
#popup_familie_lohmann.wohnung .einordnung p,
#popup_familie_lohmann.wohnung .einordnung p a {
    color: var(--schriftfarbe-lohmann);
}
#popup_familie_williams.wohnung .einordnung p,
#popup_familie_williams.wohnung .einordnung p a {
    color: var(--schriftfarbe-williams);
}
#popup_familie_romano.wohnung .einordnung p,
#popup_familie_romano.wohnung .einordnung p a {
    color: var(--schriftfarbe-romano);
}

.wohnung .einordnung .einklappen svg path {
    fill: var(--titelschrift) !important;
}
.wohnung .einordnung h3 {
    font-size: 120%;
    font-weight: 600;
    margin: 0;
    background-color: var(--head-farbe);
    padding: 3% 7%;
    color: var(--titelschrift);
}
.wohnung .einordnung::before {
    content: '';
    opacity: 1;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(0deg, var(--hg-farbe) 10%, rgba(255,255,255, 0));
    height: calc(var(--font-size) *5 );
    transition: opacity 0.2s ease-in-out;
}
.wohnung .einordnung.closed::before{
    opacity: 0;
}




.shakehover:not(:focus):hover {
    -webkit-animation: headShake 1s infinite !important;
    animation: headShake 1s infinite !important;
}
.button:focus {
    outline: none;
}

.dauerpulsieren {
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

.pulsehover:hover {
    animation: pulse .6s;
    -webkit-animiation: pulse .6s;
}

.infografik_wrapper #infografik-titel {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0%;
    padding: 0 2%;
    box-sizing: border-box;
    top: 2.8%;
    z-index: 14;
}

.infografik_wrapper #infografik-titel h1 {
    font-family: 'Ebert Headline';
    color: #951250;
    text-transform: none;
    font-size: 100%;
    text-align: left;
    margin: 0;
    line-height: 1;
}

.infografik_wrapper #infografik-titel h2 {
    font-family: 'Ebert';
    color: #951250;
    text-transform: none;
    font-size: 80%;
    font-weight: 500;
    text-align: left;
    margin: 0;
    margin-top: 0.8%;
    line-height: 1;
}

.infografik_wrapper h2 {
    font-size: 100%;
    margin: 0;
    text-align: left;
}

.infografik_wrapper h3 {
    font-size: 140%;
    margin: 0;
    text-align: left;
}
.infografik_wrapper .interactive_wrapper {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
    box-sizing: border-box;
}

.hidden {
    display: none;
    visibility: hidden;
}

button.infobutton {
    width: 5%;
    left: 0;
    position: absolute;
}

button.infobutton svg {
    width: 100%;
}

.schaltflaechen button.button,
button.infobutton {
    border: 0;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    position: relative;
    box-sizing: border-box;
    font-family: Ebert;
    font-size: 140%;
}

button.infobutton {
    width: calc(var(--font-size) * 4.1);
    left: calc(var(--font-size) * 2);
    position: fixed;
    top: calc(var(--font-size) * 1.5);
}

button.infobutton svg {
    width: 100%;
}
/* To extend clickable area */
.schaltflaechen button.button::after {
    content: '';
    position: absolute;
    left: 0;
    top: -7%;
    width: 100%;
    height: 115%;
}

#contents {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.modal {
    border: 0;
    background: transparent;
    padding: 0;
    position: relative !important;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding-left: 0;
    overflow: visible;
}
.modal.open {
    display: flex;
}

.modal .dialog_content {
    box-sizing: border-box;
    padding: 0;
    height: 90%;
    width: 90%;
    color: #000;
    position: relative;
    /*display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;*/
    overflow: visible;
    margin: auto;
    flex-shrink: 0;
}

.modal.wohnung .dialog_content > img:not(.details_hg):not(.bettkopfteil):not(.bettteil) {
    animation: fadeInDown 0.3s ease-in-out;
    animation-fill-mode: both;
    transform-origin: bottom;
}
.modal.wohnung .dialog_content > img:nth-of-type(1) {
    animation-delay: 0.2s !important;
}
.modal.wohnung .dialog_content > img:nth-of-type(2) {
    animation-delay: 0.35s !important;
}
.modal.wohnung .dialog_content > img:nth-of-type(3) {
    animation-delay: 0.5s !important;
}
.modal.wohnung .dialog_content > img:nth-of-type(4) {
    animation-delay: 0.6s !important;
}
.modal.wohnung .dialog_content > img:nth-of-type(5) {
    animation-delay: 0.8s !important;
}
.modal.wohnung .dialog_content > img:nth-of-type(6) {
    animation-delay: 0.4s !important;
}



.modal .dialog_content p,
.modal .dialog_content li {
    margin: 0;
    font-size: 120%;
    line-height: 1.3;
    margin-bottom: 2%;
}

.modal .dialog_content li {
    margin-bottom: 1%;
}

.modal .dialog_content p b,
.modal .dialog_content li b {
    font-weight: 600;
}

.modal .dialog_content .schmal p {
    line-height: 1.5;
}

.modal .dialog_content li ul li {
    margin-bottom: 1%;
}

.modal .dialog_content ol {
    padding-left: 5%;
}

::backdrop {    /* Modal Backdrop */
    opacity: 1;
    pointer-events: none;
}

#favoriten::backdrop,
#infopopup::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 1;
}

.modal.gedankenblase::backdrop,
.modal.sprechblase::backdrop {
    opacity: 1;
    background: rgba(0,0,0,0.4);
}

.contentpopup::backdrop {
    opacity: 1;
    background-color: rgba(0,0,0,.3);
}

.closemodal_wrapper {
    position: absolute;
    bottom: 3%;
    width: 100%;
    height: 13%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 2%;
}

.closemodal_wrapper .popup_titel {
    font-size: 320%;
    color: #fff;
    font-family: 'Ebert Headline', Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.closemodal {
    border: 0;
    position: absolute;
    width: 2.3%;
    height: auto;
    background: transparent;
    z-index: 99;
    outline: 0 !important;
    padding: 0;
    right: 0;
    top: 0;
}

.wohnung .closemodal {
    width: 12%;
    top: -2%;
    right: -2%;
}

.infopopup .closemodal,
.contentpopup .closemodal {
    position: absolute;
    right: 4%;
    top: calc(var(--font-size) * 1.5);
    margin-right: 0;
    width: 3%;
}
.infopopup .closemodal line {
    stroke: #fff !important;
}

.closemodal::before {
    content: '';
    display: block;
    position: absolute;
    left: -15%;
    width: 130%;
    top: -15%;
    height: 130%;
    outline: 0 !important;
}

.closemodal::before:focus,
.closemodal:focus::before,
.closemodal:focus {
    outline: 0 !important;
}

.gedankenblase .closemodal,
.sprechblase .closemodal {
    position: absolute;
    right: 12%;
    top: 13%;
    margin-right: 0;
    width: 5.5%;
    background-color: #fff;
    padding: 1.2%;
    box-sizing: border-box;
    border-radius: 1000px;
    font-size: 0;
    box-shadow: 3px 3px 10px rgba(0,0,0,.2);
}
.gedankenblase .closemodal {
    right: 25%;
    top: 15%;
}

.sprechblase .closemodal {
    right: 1%;
    top: 1%;
    width: 5.9%;
    box-shadow: 1px 1px 10px rgba(0,0,0,.3);
}



.infobutton {
    position: absolute;
    right: 2%;
    top: 3%;
    width: 3.8%;
    z-index: 100000;
    border: 0 !important;
    background: transparent;
}
.infobutton img {
    width: 100%;
}
.modal.favoriten.open,
.modal.infopopup.open {
    display: flex;
}

.modal.favoriten .dialog_content,
.modal.infopopup .dialog_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    height: 90%;
    background: #ffffff;
    border-radius: 0;
    margin: auto;
    flex-grow: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.favoriten .infotext_wrapper,
.infopopup .infotext_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    height: auto;
    margin: auto;
    padding: 4% 5% 4.5% 5%;
    font-size: 110%;
    color: var(--formate-hauptfarbe-hex);
}
.infopopup h2 {
    font-size: 180%;
}
.favoriten .infotext_wrapper .empty_text {
    font-size: 140%;
}
.infopopup .dialog_content p {
    font-size: 130%;
}
.infopopup .dialog_content p.infobox {
    border-radius: 0;
    background-color: var(--wandfarbe-wang);
    padding: 3% 4%;
    box-sizing: border-box;
    margin: 0.7% 0 2% 0;
}

.infopopup .dialog_content p.cta {
    font-size: 150%;
    font-weight: 600;
    margin-top: 4%;
}

.infopopup .dialog_content p.bullet {
   line-height: 1.5;
}

.infopopup .closemodal {
    right: calc(var(--font-size) * 2);
    top: calc(var(--font-size) * 1.8);
    width: calc(var(--font-size) * 1.8);
}

.favoriten .closemodal {
    right: calc(var(--font-size) * 2);
    top: calc(var(--font-size) * 1.7);
    width: calc(var(--font-size) * 1.7);
}

.favoriten .closemodal .closemodal_path {
    stroke: #fff !important;
}

.modal.infopopup .info_wrap_wrap,
.modal.favoriten .info_wrap_wrap {
    width: 100%;
    height: 100%;
}

.modal.infopopup h2,
.modal.favoriten h2 {
    font-size: 200%;
    width: 100%;
    padding: 2% 4%;
    color: #fff;
    background-color: #e76666;
    box-sizing: border-box;
}
.modal.infopopup h2 {
    background-color: #86bfbb;
}

.infopopup .infotext_wrapper,
.favoriten .infotext_wrapper {
    padding: 0 !important;
    width: 100%;
    height: 100%;
}

.infopopup .infopopup_text,
.favoriten .favoriten_wrapper {
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    overflow: scroll;
}

.infopopup .infopopup_text {
    padding: 4% 5%;
}

/* Accordion */
.accordion.ui-accordion.ui-widget {
    margin-bottom: 5%;
    height: 100%;
    opacity: 1;
}

.accordion .accordion_title {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 0 !important;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    font-size: 140%;
    font-family: 'Ebert', Helvetica, Arial, sans-serif;
    padding: 1.6% 4%;
    margin: 0;
    display: block;
    position: relative;
    width: auto;
    max-width: 100%;
    border-bottom: 1px solid #000;
}
.accordion span.accordion_title:last-of-type {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.accordion .accordion_title:not(.ui-state-active) {
    margin-top: 0.3%;
}

.accordion .accordion_title:first-child {
    margin-top: 0 !important;
}
.accordion .ui-accordion-header {
    min-height: 4.4%;
    font-size: 160% !important;
    padding: 1% !important;
}

.ui-accordion .ui-accordion-content {
    padding: 3% 5%;
}

.accordion .ui-accordion-header.ui-state-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: transparent;
}

.ui-accordion .ui-accordion-content.ui-accordion-content-active {
    background: transparent;
    padding: 1.5% 2%;
    border: 0;
}

.ui-accordion .ui-accordion-content.ui-accordion-content {
    font-family: 'Ebert', Helvetica, Arial, sans-serif;
    line-height: 1.4;
    font-size: 118%;
    font-weight: 300;
    color: #000;
    overflow: scroll;
    overflow-x: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 3%;
    margin-bottom: 1%;
    max-height: calc( var(--font-size) * 17);
}
#popup_lohmann_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_lohmann_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_lohmann_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_lohmann_1.modal.contentpopup p,
#popup_lohmann_1.modal.contentpopup p a,
#popup_lohmann_2.modal.contentpopup p,
#popup_lohmann_2.modal.contentpopup p a {
    color: var(--schriftfarbe-lohmann);
    text-decoration-color: var(--schriftfarbe-lohmann);
}
#popup_romano_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_romano_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_romano_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_romano_1.modal.contentpopup p,
#popup_romano_1.modal.contentpopup p a,
#popup_romano_2.modal.contentpopup p,
#popup_romano_2.modal.contentpopup p a {
    color: var(--schriftfarbe-romano);
    text-decoration-color: var(--schriftfarbe-romano);
}
#popup_wang_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_wang_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_wang_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_wang_1.modal.contentpopup p,
#popup_wang_1.modal.contentpopup p a,
#popup_wang_2.modal.contentpopup p,
#popup_wang_2.modal.contentpopup p a,
#popup_wang_3.modal.contentpopup p,
#popup_wang_3.modal.contentpopup p a {
    color: var(--schriftfarbe-wang);
    text-decoration-color: var(--schriftfarbe-wang);
}
#popup_becker_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_becker_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_becker_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_becker_1.modal.contentpopup p,
#popup_becker_1.modal.contentpopup p a,
#popup_becker_2.modal.contentpopup p,
#popup_becker_2.modal.contentpopup p a {
    color: var(--schriftfarbe-becker);
    text-decoration-color: var(--schriftfarbe-becker);
}
#popup_demir_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_demir_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_demir_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_demir_1.modal.contentpopup p,
#popup_demir_1.modal.contentpopup p a,
#popup_demir_2.modal.contentpopup p,
#popup_demir_2.modal.contentpopup p a,
#popup_demir_3.modal.contentpopup p,
#popup_demir_3.modal.contentpopup p a {
    color: var(--schriftfarbe-demir);
    text-decoration-color: var(--schriftfarbe-demir);
}
#popup_gajewski_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_gajewski_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_gajewski_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_gajewski_1.modal.contentpopup p,
#popup_gajewski_1.modal.contentpopup p a,
#popup_gajewski_2.modal.contentpopup p,
#popup_gajewski_2.modal.contentpopup p a {
    color: var(--schriftfarbe-gajewski);
    text-decoration-color: var(--schriftfarbe-gajewski);
}
#popup_williams_info.modal.contentpopup .accordion .ui-accordion-header,
#popup_williams_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content,
#popup_williams_info.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_williams_1.modal.contentpopup p,
#popup_williams_1.modal.contentpopup p a,
#popup_williams_2.modal.contentpopup p,
#popup_williams_2.modal.contentpopup p a,
#popup_williams_3.modal.contentpopup p,
#popup_williams_3.modal.contentpopup p a,
#popup_williams_4.modal.contentpopup p,
#popup_williams_4.modal.contentpopup p a {
    color: var(--schriftfarbe-williams);
    text-decoration-color: var(--schriftfarbe-williams);
}
#popup_williams_info_2.modal.contentpopup .accordion .ui-accordion-header,
#popup_williams_info_2.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content a,
#popup_williams_info_2.modal.contentpopup .ui-accordion .ui-accordion-content.ui-accordion-content {
    color: var(--schriftfarbe-williams-2);
    text-decoration-color: var(--schriftfarbe-williams-2);
}

.modal.gedankenblase .dialog_content, .modal.sprechblase .dialog_content {
    width: 50%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: zoomIn 0.5s ease-in-out;
    padding: 4% 5%;
    background-color: #fff;
    border-radius: calc(var(--font-size) * 5);
    margin-bottom: 6%;
}
.modal.sprechblase .dialog_content {

}
.modal.sprechblase .dialog_content::before {
    content: '';
    background-image: url('bilder/sprechblasen/sprechblase_ecke.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: calc(var(--font-size) * -3.9);
    width: 20%;
    height: calc(var(--font-size) * 4);
    left: 13%;
    transform: rotate(180deg);
}
.modal.sprechblase.rechts .dialog_content::before {
    right: 13%;
    left: unset;
    transform: scaleX(-1) rotate(180deg);
}


.modal.gedankenblase .dialog_content {
    background-image: url("bilder/sprechblasen/wolke_popup.svg");
    background-size: contain;
    height: 90%;
    padding: 0 22% 2% 17%;
    background-color: unset;
    width: 78%;

}



.modal.gedankenblase.open,
.modal.sprechblase.open {
    display: flex;
}
.modal.gedankenblase .dialog_content p,
.modal.sprechblase .dialog_content p {
    font-size: 140%;
    font-style: italic;
}


.modal.wohnung .themeninfos {
    position: absolute;
    left: 21%;
    bottom: 10%;
    width: 8%;
    height: 15%;
    z-index: 5;
    animation: infoi 1s ease-in-out alternate-reverse infinite;
    transform: scale(1);
    z-index: 1000;
    top: unset;
}
@keyframes infoi {
    from {transform: scale(1);}
    to {transform: scale(1.1);}
}

#popup_familie_wang.modal.wohnung .themeninfos {
    bottom: unset;
    top: 35%;
    left: 31%;
}
#popup_familie_becker.modal.wohnung .themeninfos {
    bottom: unset;
    top: 22%;
    left: 21%;
}

.modal.wohnung .themeninfos svg,
.modal.wohnung .themeninfos img {
    width: 100%;
}
.modal.wohnung .themeninfos#romano_infobutton .bg_kreis {
    fill: var(--hauptfarbe-romano);
}
.modal.wohnung .themeninfos#becker_infobutton .bg_kreis {
    fill: var(--hauptfarbe-becker);
}
.modal.wohnung .themeninfos#demir_infobutton .bg_kreis {
    fill: var(--hauptfarbe-demir);
}
.modal.wohnung .themeninfos#gajewski_infobutton .bg_kreis {
    fill: var(--hauptfarbe-gajewski);
}
.modal.wohnung .themeninfos#lohmann_infobutton .bg_kreis {
    fill: var(--hauptfarbe-lohmann);
}
.modal.wohnung .themeninfos#wang_infobutton .bg_kreis {
    fill: #6eccc8;
}
.modal.wohnung .themeninfos#williams_infobutton .bg_kreis {
    fill: var(--hauptfarbe-williams);
}
.modal.wohnung .themeninfos#williams_infobutton_2 .bg_kreis {
    fill: var(--schriftfarbe-williams-2);
}
.modal.wohnung .themeninfos .bg_kreis {
    transition: filter 0.2s;
}
.modal.wohnung .themeninfos:hover .bg_kreis {
    filter: brightness(0.85);
}


.modal.contentpopup.themeninfos .dialog_content {
    width: 77%;
    height: auto;
    margin: auto;
    background-color: #fff;
    border-radius: 0;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}
.modal.contentpopup.open.themeninfos {
    display: flex;
}

.modal.contentpopup.themeninfos .dialog_content .accordion_wrapper {
    padding: 3%;
}

.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: #000;
    padding: 2.3% 5% 2% 5%;
    color: #fff;
    font-size: 180%;
    width: 105%; /* Hilfe gegen den weißen Blitzer? */
    box-sizing: border-box;
}
#popup_lohmann_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-lohmann);
}
#popup_romano_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-romano);
}
#popup_wang_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-wang);
}
#popup_becker_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-becker);
}
#popup_demir_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-demir);
}
#popup_gajewski_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-gajewski);
}
#popup_williams_info.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: var(--schriftfarbe-williams);
}
#popup_williams_info_2.modal.contentpopup.themeninfos .dialog_content .popup_titel {
    background-color: #00708d;
}

.modal.contentpopup.themeninfos .closemodal .closemodal_pfad {
    stroke: #fff !important;
}

.modal.wohnung .themeninfos#williams_infobutton {
    top: 27%;
    left: 10%;
    z-index: 30;
}
.modal.wohnung .themeninfos#williams_infobutton_2 {
    top: 63%;
    right: 33%;
    z-index: 30;
    left: unset;
}



.accordion .links + div li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}

.accordion .links + div li::before {
    content: '';
    position: absolute;
    left: calc(var(--font-size) * -2.5);
    margin-top: calc(var(--font-size) * 0.3);
    width: 2.3%;
    height: 100%;
    background-image: url('bilder/navigation/externer_link.svg');
    background-position: top center;
    background-repeat: no-repeat;
}

button.button.favoriten_merken {
    width: calc(var(--font-size) * 2.3);
    display: flex;
    flex-direction: row;
    font-size: 100% !important;
    right: 0;
    position: relative !important;
    height: 100% !important;
    justify-content: stretch;
    align-items: center;
    flex-grow: 0;
}

button.button.favoriten_merken .tooltip {
    opacity: 0;
    color: #e76666;
    margin-right: 3%;
    border: 1px solid #e76666;
    padding: 3% 15%;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    right: 115%;
}
button.button.favoriten_merken:not(.gemerkt):hover .tooltip {
    opacity: 1;
}
button.button.favoriten_merken .active,
button.button.favoriten_merken:hover .idle {
    display: none;
}
button.button.favoriten_merken:hover .active {
    display: block;
}

button.button.favoriten_merken.gemerkt .active,
button.button.favoriten_merken.gemerkt:hover .idle {
    display: block;
}
button.button.favoriten_merken.gemerkt .idle,
button.button.favoriten_merken.gemerkt:hover .active{
    display: none;
}

button.button.favoriten_merken > img {
    height: 100%;
    width: auto;
    flex-shrink: 0;
    max-height: calc(var(--font-size) * 2.4);
}
.accordion .links + div li a {
    flex-grow: 1;
    flex-shrink: 0;
    width: 90%;
    margin-right: 5%;
}

button.button.favoriten_merken .gemerkt_animation {
    position: absolute;
    animation: fadeOutUp 1.2s ease-in-out;
    animation-fill-mode: both;
}


#favoriten .favoriten_wrapper .item {
    background-color: #f5f5f5;
    padding: 1.8% 3%;
    border-radius: 0;
    margin-bottom: 1%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#favoriten .favoriten_wrapper .item:hover {
    background-color: #dddddd;
}
#favoriten .favoriten_wrapper .item:hover a {
    text-decoration: underline;
}

#favoriten .favoriten_wrapper .item a:before {
    background-image: url('bilder/navigation/externer_link.svg');
    background-size: contain;
    background-repeat: no-repeat;
    height: calc(var(--font-size) * 1.3);
    width: calc(var(--font-size) * 2);
    content: '';
    position: relative;
    display: inline-block;
}

#favoriten .favoriten_wrapper .item a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
    font-size: 110%;
    display: block;
    flex-shrink: 0;
    flex-grow: 1;
    max-width: 88%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 2%;
    box-sizing: border-box;
}

#favoriten .favoriten_wrapper .item .button.remove {
    position: relative;
    width: auto;
    height: auto;
    padding: 0.4% 1%;
    background-color: transparent;
    border: 1px solid #e76666;
    color: #e76666;
    font-size: 100%;
    border-radius: 0;
}
#favoriten .favoriten_wrapper .item .button.remove:hover {
    background-color: #e76666;
    color: #fff;
}

#favoriten .favoriten_wrapper .bereich_titel {
    font-size: 150%;
    font-weight: 600;
    margin-bottom: 2%;
}


#favoriten .favoriten_wrapper .bereich_titel.demir {
    color: var(--schriftfarbe-demir);
}
#favoriten .favoriten_wrapper .bereich_titel.romano {
    color: var(--schriftfarbe-romano);
}
#favoriten .favoriten_wrapper .bereich_titel.wang {
    color: var(--schriftfarbe-wang);
}
#favoriten .favoriten_wrapper .bereich_titel.gajewski {
    color: var(--schriftfarbe-gajewski);
}
#favoriten .favoriten_wrapper .bereich_titel.lohmann {
    color: var(--schriftfarbe-lohmann);
}
#favoriten .favoriten_wrapper .bereich_titel.becker {
    color: var(--schriftfarbe-becker);
}
#favoriten .favoriten_wrapper .bereich_titel.williams {
    color: var(--schriftfarbe-williams);
}
#favoriten .favoriten_wrapper .bereich_titel.williams2 {
    color: var(--schriftfarbe-williams-2);
}

#favoriten .favoriten_wrapper .bereich_titel:not(:first-of-type) {
    margin-top: 4%;
}

#favoriten button.button.pdf_generieren {
    background-color: #fff;
    padding: 1%;
    border-radius: 0;
    position: absolute;
    top: 2.4%;
    right: 13%;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e76666;
    font-weight: 600;
}
#favoriten button.button.pdf_generieren:hover {
    background-color: #ededed;
}

/* Styling für das jQuery UI Tooltip */
.ui-tooltip, .arrow:after {
    background: white;

}
.ui-widget.ui-tooltip {
    padding: 0.8% 1.2% !important;
    z-index: 100000001;
    border-radius: calc(var(--font-size) * 0.5) !important;
    font-size: calc(var(--font-size) * 1.25) !important;
    font-family: 'Ebert', sans-serif !important;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
    box-shadow: 0 0 7px rgba(0,0,0,0.5) !important;
    background: white !important;
    max-width: calc(var(--font-size) * 35) !important;
}

#popup_familie_williams .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_williams_info .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_williams_info_2 .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-williams);
}
#popup_familie_lohmann .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_lohmann_info .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-lohmann);
}
#popup_familie_gajewski .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_gajewski_info .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-gajewski);
}
#popup_familie_romano .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_romano_1 .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_romano_2 .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_romano_info .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-romano);
}
#popup_familie_wang .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_wang_info .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-wang);
}
#popup_familie_becker .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_becker_info .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-becker);
}
#popup_familie_demir .ui-widget.ui-tooltip .ui-tooltip-content,
#popup_demir_info .ui-widget.ui-tooltip .ui-tooltip-content {
    color: var(--schriftfarbe-demir);
}

.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}

@media( max-width: 900px) {
    .mobile .modal.gedankenblase .dialog_content,
    .mobile .modal.sprechblase .dialog_content {
        width: 85%;
    }
    .mobile .modal.gedankenblase .dialog_content p,
    .mobile .modal.sprechblase .dialog_content p {
        font-size: 400% !important;
    }
    .mobile .modal.contentpopup.themeninfos .dialog_content {
        width: 95%;
    }
    .mobile .modal.contentpopup.themeninfos .dialog_content .popup_titel {
        font-size: 450%;
        width: 101%;
        padding: 1.6% 12% 1.6% 3%;
    }
    .mobile .modal.contentpopup.themeninfos .closemodal {
        top: calc(var(--font-size) * 2);
        width: 5%;
    }
    .modal.contentpopup.themeninfos .dialog_content .accordion_wrapper {
        padding: 4%;
    }

    .mobile .accordion .ui-accordion-header {
        font-size: 420% !important;
    }
    .mobile .modal .dialog_content p, .modal .dialog_content li,
    .mobile .ui-accordion .ui-accordion-content.ui-accordion-content {
        font-size: 200% !important;
    }

    .mobile .wohnung .einordnung p {
        font-size: 210% !important;
    }

    .mobile .ui-accordion .ui-accordion-content.ui-accordion-content {
        max-height: calc( var(--font-size) * 80);
    }
    .mobile .accordion .links + div li::before {
        left: calc(var(--font-size) * -3.9);
        width: 4.3%;
    }
    .accordion .links + div li a {
        width: 80%;
    }
    .mobile .sprechblase .closemodal {
        right: -3%;
        top: -3%;
        width: 8%;
        padding: 1.8%;
    }
    .mobile .wohnung .einordnung h3 {
        font-size: 400%;
    }
    .mobile .wohnung .einordnung .einordnung_text_wrapper {
        height: calc(var(--font-size) * 45);
        font-size: 190%;
        padding: 3% 4% calc(var(--font-size) * 2.4) 5%;
    }
    .mobile .wohnung .einordnung .einklappen {
        width: 4%;
        top: 3%;
        left: unset;
        right: 8%;
        position: absolute !important;
    }
    .mobile .wohnung .einordnung.closed .einklappen {
        top: 20%;
    }
    .mobile .wohnung .einordnung.closed .einordnung_text_wrapper {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .mobile .wohnung .einordnung.closed .einordnung_text_wrapper p {
        height: 0;
        padding: 0;
        margin: 0;
        font-weight: 0;
    }

    .mobile .modal.gedankenblase .dialog_content {
        width: 100%;
        top: 25%;
        background-size: 162%;
        background-position: 25%;
        height: auto;
        padding: 9%;
        overflow: visible;
        background-image: unset;
        background-color: #fff;
        margin: auto !important;
        border-radius: 0;
        position: fixed;
        animation: fadeInDown 0.5s ease-in-out;
    }
    .mobile .modal.gedankenblase .dialog_content::before {
        content: '';
        position: absolute;
        top: calc(var(--font-size) * -19.9);
        width: 100%;
        height: calc(var(--font-size) * 20);
        background-image: url("bilder/sprechblasen/wolke_popup_oben.svg");
        background-repeat: no-repeat;
        background-size: 102%;
        background-position: bottom center;
    }
    .mobile .modal.gedankenblase .dialog_content::after {
        content: '';
        position: absolute;
        bottom: calc(var(--font-size) * -19.9);
        width: 100%;
        height: calc(var(--font-size) * 20);
        background-image: url("bilder/sprechblasen/wolke_popup_unten.svg");
        background-repeat: no-repeat;
        background-size: 102%;
        background-position: top center;
    }
    .mobile .gedankenblase .closemodal {
        right: 2%;
        top: -6%;
        width: 7%;
        padding: 1.6%;
    }
    .mobile .modal.gedankenblase .dialog_content p {
        font-size: 400% !important;
    }
    .mobile .favoriten .infotext_wrapper .empty_text {
        font-size: 360% !important;
    }
    .mobile .modal.infopopup .dialog_content {
        width: 85%;
        height: auto;
    }
    .mobile .infopopup .dialog_content p {
        font-size: 360% !important;
    }
    .mobile .accordion.ui-accordion.ui-widget {
        margin-bottom: 0;
    }
    .mobile button.button.favoriten_merken > img {
        max-height: calc(var(--font-size) * 5);
    }
    .mobile button.button.favoriten_merken {
        width: calc(var(--font-size) * 5);;
    }

    /* Mobile Smarthpone Special */
    .mobile .hintergrund .hg_skyline {
        width: 223%;
        top: 41%;
        left: -61%;
    }

    .mobile .hintergrund .haus {
        width: 130%;
        left: -17%;
        top: 16%;
    }

    .mobile .hintergrund .baum {
        width: 18%;
        left: -5.4%;
        top: 42%;
    }

    .mobile .hintergrund .haus_rauch {
        width: 17%;
        left: 76%;
        top: 13%;
    }
    .mobile .hintergrund .logo {
        width: 19%;
    }

    .mobile .infografik_wrapper .schaltflaechen .button#infobutton_start {
        width: 14%;
        left: 7%;
        top: 5%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#favoriten_button {
        width: 13.3%;
        right: 4%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button.haustueren {
        width: 17.5%;
        height: 11.2% !important;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#tuer_gelb {
        bottom: 62.7%;
        left: 30.4%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#tuer_rot {
        bottom: 62.7%;
        left: 46.5%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#tuer_mint {
        bottom: 50.1%;
        left: 30.4%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#tuer_dunkelrot {
        bottom: 37%;
        left: 30.4%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#tuer_lila {
        bottom: 49.9%;
        left: 46.5%;
    }
    .mobile .infografik_wrapper .schaltflaechen .button#tuer_hellblau {
        bottom: 37%;
        left: 46.5%;
    }
    .mobile  .infografik_wrapper .schaltflaechen .button#tuer_dunkelblau {
        bottom: 24.8%;
        left: 46.5%;
    }

    .mobile .wohnung .closemodal {
        width: 29%;
        right: 3%;
        top: 3%;
        position: fixed;
    }
    .mobile .wohnung .einordnung {
        width: 90%;
        bottom: 5%;
        right: 5%;
        position: fixed;
    }
    .mobile .modal.gedankenblase .dialog_content,
    .mobile .modal.sprechblase .dialog_content {
        margin-bottom: 20%;
    }

    .mobile .modal.infopopup h2,
    .mobile .modal.favoriten h2 {
        font-size: 440%;
        padding: 2% 10% 2% 4%;
    }
    .mobile .infopopup .closemodal,
    .mobile .favoriten .closemodal {
        right: calc(var(--font-size) * 2.3);
        top: calc(var(--font-size) * 2.3);
        width: calc(var(--font-size) * 3.5);
    }
    .mobile .modal.favoriten .dialog_content {
        width: 90%;
    }
    .mobile #favoriten button.button.pdf_generieren {
        font-size: 250%;
        width: 35%;
        top: 1.4%;
    }
    .mobile .favoriten .favoriten_wrapper {
        padding: 3.2%;
    }
    .mobile .infopopup .infopopup_text {
        padding: 5.5%;
    }
    .mobile #favoriten .favoriten_wrapper .bereich_titel {
        font-size: 350%;
    }
    .mobile #favoriten .favoriten_wrapper .item {
        padding: 3% 2% 3% 4%;
    }
    .mobile #favoriten .favoriten_wrapper .item a {
        font-size: 310%;
        max-width: 80%;
        white-space: unset;
    }
    .mobile #favoriten .favoriten_wrapper .item a::before {
        height: calc(var(--font-size) * 3);
        width: calc(var(--font-size) * 4);
    }
    .mobile #favoriten .favoriten_wrapper .item .button.remove {
        font-size: 230%;
    }
    .mobile #favoriten .favoriten_wrapper .bereich_titel:not(:first-of-type) {
        margin-top: 11%;
    }

    .mobile .schaltflaechen button.button.sprechblasen {
        width: 16%;
        z-index: 1000;
    }
    .mobile .modal.wohnung .themeninfos {
        left: 5%;
        bottom: 8%;
        width: 25%;
        height: 25%;
    }

    /* Szenen Mobile Positionierung*/
    /* Familie Romano*/
    .mobile #romano_infobutton {
        bottom: unset;
        top: -50%;
    }

    .mobile .modal.wohnung#popup_familie_romano .dialog_content .details_hg {
        width: 65%;
        left: 11%;
    }
    .mobile .modal.wohnung#popup_familie_romano .dialog_content .lampe {
        height: auto;
        top: 0;
        left: 56%;
        position: fixed;
        width: 3.2%;
    }
    .mobile .modal.wohnung#popup_familie_romano .dialog_content .gegenstaende {
        height: 150%;
        left: -1%;
        top: -66%;
    }
    .mobile .modal.wohnung#popup_familie_romano .dialog_content .chris {
        width: 23%;
        left: 20%;
    }
    .mobile .modal.wohnung#popup_familie_romano .dialog_content .marco {
        width: 43%;
        left: 55%;
        bottom: 6%;
    }
    .mobile .sprechblasen#sprechblase_mario {
        top: 7%;
        left: 66%;
    }
    .mobile .sprechblasen#sprechblase_chris {
        top: -17%;
        left: 36%;
    }

    /* Familie Williams*/
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .details_hg {
        width: 50%;
        left: 12%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .kuechenzeile {
        height: 81.2%;
        left: 65%;
        top: 1.5%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .einkauf {
        height: 24%;
        left: 66.5%;
        top: 7.8%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .wasserflasche {
        height: 20%;
        left: 66.5%;
        top: 12%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .jolanda {
        width: 14%;
        left: 78.2%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .bettkopfteil {
        height: 60.2%;
        left: 16.8%;
        top: -7%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .bettteil {
        height: 43.2%;
        left: 16%;
        top: 42%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .elisabeth {
        width: 18%;
        left: 20.6%;
        bottom: 57.2%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .ania {
        width: 16%;
        left: 7.7%;
    }
    .mobile .modal.wohnung#popup_familie_williams .dialog_content .ania {
        width: 17%;
        left: 6.7%;
        top: 3.5%;
    }
    .mobile .sprechblasen#sprechblase_jolanda {
        top: 5%;
        left: 65%;
        width: 18%;
    }
    .sprechblasen#gedankenblase_jolanda {
        top: -9%;
        left: 84%;
    }
    .mobile .sprechblasen#gedankenblase_elisabeth {
        top: 17%;
        left: 35%;
    }
    .mobile .sprechblasen#gedankenblase_ania {
        top: -6%;
        left: 1%;
    }

    /* Familie Lohmann*/
    .mobile #lohmann_infobutton {
        bottom: unset;
        top: 26%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .details_hg {
        width: 58%;
        left: 11%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .haengepflanze {
        height: auto;
        left: 16.2%;
        top: 0;
        position: fixed;
        width: 15%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .stuehle {
        height: 63.2%;
        left: 15.7%;
        top: 17%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .tisch {
        height: 49.5%;
        left: 27.9%;
        top: 31.9%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .nele {
        width: 20%;
        left: 38.9%;
        bottom: 19.2%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .micha {
        width: 27%;
        left: 58.3%;
        bottom: 18.8%;
    }
    .mobile .modal.wohnung#popup_familie_lohmann .dialog_content .pflanzen {
        width: auto;
        height: 130%;
        left: 12%;
        top: -29%;
        z-index: 20;
    }
    .mobile .sprechblasen#sprechblase_micha {
        top: 3%;
        left: 60%;
        width: 18%;
    }
    .mobile .sprechblasen#sprechblase_nele {
        top: 2%;
        left: 33%;
    }

    /* Familie Becker*/
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .details_hg {
        width: 74%;
        left: -3%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .stuhl {
        height: 65.6%;
        left: 80.5%;
        top: 33.4%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .luis {
        width: 31%;
        left: 64.2%;
        bottom: 4.5%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .stuhl_links {
        height: 65.6%;
        left: 6.7%;
        top: 33.4%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .tisch {
        height: 70.7%;
        left: 9.7%;
        top: 27.4%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .ricarda {
        width: 31%;
        left: 26.9%;
        bottom: 14.8%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .spielzeug {
        height: 42.2%;
        left: -28.3%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .bauklotz {
        height: 11%;
        left: 52%;
        top: 109%;
        z-index: 2;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .kind_1 {
        height: 36.5%;
        left: 9.9%;
        top: 96.7%;
    }
    .mobile .modal.wohnung#popup_familie_becker .dialog_content .kind_2 {
        height: 32.5%;
        left: 32.9%;
        top: 101.7%;
    }
    .mobile .sprechblasen#sprechblase_ricarda {
        top: 0%;
        left: 54%;
    }
    .mobile .sprechblasen#sprechblase_luis {
        top: 22%;
        left: 68%;
    }

    /* Familie Wang*/
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .details_hg {
        width: 90%;
        bottom: 20%;
        left: 2%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .blume {
        height: 19%;
        left: 6.9%;
        top: 0%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .dagmar {
        width: 35.9%;
        left: 58.6%;
        bottom: 10.5%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .sofa {
        height: 53.6%;
        left: 36.5%;
        top: 26.4%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .robert {
        width: 22%;
        left: 40.8%;
        bottom: 6.6%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .pflanze {
        height: 50.5%;
        left: 80.9%;
        bottom: -3%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .teppich {
        height: 27%;
        left: unset;
        right: 0;
        top: 90.4%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .tisch {
        height: 25.2%;
        left: 34.7%;
        top: 87%;
    }
    .mobile .modal.wohnung#popup_familie_wang .dialog_content .liam {
        height: 46.5%;
        left: 16.9%;
        top: 61.4%;
    }
    .mobile .sprechblasen#sprechblase_robert {
        top: 0%;
        left: 57%;
        width: 18%;
    }
    .mobile .sprechblasen#sprechblase_dagmar {
        top: 14%;
        left: 69%;
        width: 13%;
    }
    .mobile .sprechblasen#gedankenblase_liam {
        top: 55%;
        left: 13%;
    }

    /* Familie Demir*/
    .mobile #demir_infobutton {
        bottom: unset;
        top: 30%;
        left: 6%;
    }
    .mobile .modal.wohnung#popup_familie_demir .dialog_content .details_hg {
        width: 40%;
        bottom: 11%;
        left: 17%;
    }
    .mobile .modal.wohnung#popup_familie_demir .dialog_content .pflanze {
        height: auto;
        left: 45%;
        top: 0;
        position: fixed;
        width: 13%;
    }
    .mobile .modal.wohnung#popup_familie_demir .dialog_content .rollator {
        height: 47%;
        left: 58.4%;
        top: 34.3%;
    }
    .mobile .modal.wohnung#popup_familie_demir .dialog_content .yanis {
        height: 72.5%;
        left: 30.9%;
        top: -4.6%;
    }
    .mobile .modal.wohnung#popup_familie_demir .dialog_content .mara {
        width: 23.9%;
        left: 47.6%;
        bottom: 16.6%;
        z-index: 11;
    }
    .mobile .modal.wohnung#popup_familie_demir .dialog_content .nachbar {
        width: 13%;
        left: 80.8%;
    }
    .mobile .sprechblasen#sprechblase_mara {
        top: -8%;
        left: 60%;
        width: 18%;
    }
    .mobile .sprechblasen#sprechblase_hildebrandt {
        top: -24%;
        left: 71%;
        width: 15%;
    }
    .mobile .sprechblasen#gedankenblase_yanis {
        top: -11%;
        left: 25%;
        width: 13%;
    }

    /* Familie Gajewski*/
    .mobile #gajewski_infobutton {
        bottom: unset;
        top: -2%;
        left: 7%;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .details_hg {
        width: 95%;
        left: unset;
        right: 0;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .lampe {
        height: 50%;
        left: 33%;
        top: -111%;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .handtuch {
        height: 40%;
        left: 51%;
        top: -2%;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .kind {
        height: 55%;
        left: 23%;
        top: 26%;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .seifenblase {
        height: 5%;
        left: 49%;
        top: 150%;
        z-index: 10;
        animation: seifenblase 8s ease-in-out infinite;
        animation-fill-mode: both;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .anna {
        height: 88%;
        left: 73.4%;
        top: 0.3%;
    }
    .mobile .modal.wohnung#popup_familie_gajewski .dialog_content .jarek {
        height: 69.5%;
        left: 23.9%;
        top: 14.3%;
    }
    .mobile .sprechblasen#sprechblase_jarek {
        top: 24%;
    }
    .mobile .sprechblasen#sprechblase_anna {
        top: 5%;
        left: 62%;
        width: 17%;
    }
    .mobile .modal.wohnung .fußboden:before {
        content: '';
        background-color: var(--boden-farbe);
        height: calc((100vh - (100% * 5)) / 2 + 100%);
        position: absolute;
        left: 0;
        width: 100vw;
    }
    .mobile .ui-widget.ui-tooltip {
        font-size: calc(var(--font-size) * 3.98) !important;
        line-height: 1.1;
        max-width: 94vw !important;
        margin-left: 1vw;
        padding: 1.2% 1.9% !important;
    }


}