@media only screen and (max-width: 960px)
{

    html {
        overflow: hidden;
        width: 100%;
    }
    body {
        height: 100%;
        position: fixed;
        overflow-y: scroll;

        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .auswahlItem {
        padding: 5px 10px;
        margin-bottom: 5px;
        font-size: 12px;
    }

 :root {

     --abstand: 10px;
     --app-height: 100%;

     --modelheight: min(calc(100vw / 4 * 3.5), calc(var(--app-height) / 2));
 }

    html, body  {
        height: -webkit-fill-available;
        height: var(--app-height);
    }

h1 {
    font-weight: normal;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 3px;

}

        #bodyContainer {
            display: block;

            height: var(--app-height);

        }

        #iframeApplication {
            width:  100vw;

            height: var(--modelheight);
            box-sizing: border-box;
            display:block;

        }

.button {
    padding:10px;
}

    .mobilonly {
        display: block;
    }

#merkliste3 {
    padding:0px;
}

#merkliste3 .button {
    display: block;
    margin-bottom: 0;
}

#interface1 {
    position: absolute;

    height: calc(var(--app-height) - var(--modelheight));

    bottom: 0;
    left:0;
    width:100%;
    overflow: hidden;
    top: var(--modelheight);

}

#containerCompass {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;

}

    #containerCompass img {

        width: 50px;

    }

    #merkliste1 {
    display: none;
}

.ergebnisFilter {
    display: none;
}

    .ergebnisFilter.an {
        display: block;
        position: fixed;
        left:0;
        right: 0;
        top:0;
        bottom:0;
        background-color: rgba(0,0,0,0.8);
        float: none;
        width:100%;
        margin:0;
        padding:0;
        z-index: 500;
    }

    .ergebnisFilterBox {
        background-color: #fff;
        margin:10px;
        padding:30px;
    }

    #topSuche, #sortierung {
        width:100%;
    }

.nomobile {
    display: none;
}

#sucheModalEin.mobilonly {
    display: inline-block;
    background-color: var(--farbe-knopf);
    border-radius: 20px;
    box-shadow: 1px -1px 5px 5px rgba(255,255,255,0.75);
    padding:5px;
    height: 32px;
    width: 32px;
    margin-left:-10px;
    margin-top:8px;
    vertical-align: bottom;
    box-sizing: border-box;
    }

    #sucheModalEin.mobilonly img {
        width:100%;

    }

#objektfensterBackground.an {
    background: rgba(0,0,0,0);
    position: absolute;

    top: var(--modelheight);
    left: 0;
    right: 0;
    width: 100%;

    height: auto;
    z-index: 500;
    display: block;

}

#objektfenster {
    position: absolute;
    width: calc(100vw - var(--abstand) - var(--abstand));

    left: var(--abstand);
    border: 0px solid #ddd;
    margin-bottom: 30px;
    box-sizing: border-box;
}

#objektfensterBackground.anfrage {

    top: 0px;

}

.anfrage #objektfenster {
    width: calc(100vw - var(--abstand) - var(--abstand));
}

#AuswahlFilter {
    display: none;
    position: relative;
}

#filterModalBackground.an #AuswahlFilter {
    display: block;
}

#filterModalEinContainer {
    display: block;
    text-align: right;
}

body {
    --mobile-hauptmodus-size: 42px;
    --mobile-hauptmodus-gap: 21px;
    --mobile-hauptmodus-width: 168px;
    --mobile-hauptmodus-edge-gap: 18px;
    --mobile-hauptmodus-icon-size: 20px;

    --mobile-untermodus-height: 38px;
    --mobile-untermodus-width: 142px;
    --mobile-untermodus-gap: 8px;
}

#modellmodus-slider .wohnungen-unterslider {
    display: none !important;
}

#iconleiste #resetPosition {
    display: none !important;
}

#hauptmodus-navigation.hauptmodus-navigation {
    position: fixed;

    top:
        calc(
            var(--modelheight) -
            var(--mobile-hauptmodus-edge-gap)
        );

    right:
        var(--mobile-hauptmodus-edge-gap);

    bottom: auto;
    left: auto;

    z-index: 620;

    display: flex !important;
    flex-direction: column;
    align-items: flex-end;

    gap:
        var(--mobile-hauptmodus-gap);

    width:
        var(--mobile-hauptmodus-width);

    margin: 0;
    padding: 0;

    transform:
        translateY(-100%);

    isolation: isolate;

    pointer-events: auto;
}

#hauptmodus-navigation.hauptmodus-navigation.eingeklappt {
    top: auto;

    bottom:
        var(--mobile-hauptmodus-edge-gap);

    transform: none;
}

#hauptmodus-navigation.hauptmodus-navigation::before {
    content: "";

    position: absolute;

    top: -7px;
    right: -6px;
    bottom: -7px;

    width:
        calc(
            var(--mobile-hauptmodus-size) +
            12px
        );

    border-radius: 999px;

    background:
        rgba(205, 201, 193, 0.66);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(70, 60, 45, 0.08),
        0 2px 5px rgba(35, 30, 22, 0.08);

    pointer-events: none;

    z-index: 0;
}

#hauptmodus-navigation .hauptmodus-button {
    position: relative;

    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--mobile-hauptmodus-size);

    align-items: stretch;

    width:
        var(--mobile-hauptmodus-size);

    height:
        var(--mobile-hauptmodus-size);

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border:
        1.5px solid
        #b9b4aa;

    border-radius: 999px;

    outline: 0;

    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(70, 60, 45, 0.12),
        0 3px 7px rgba(35, 30, 22, 0.14);

    overflow: hidden;

    cursor: pointer;

    transition:
        width 230ms cubic-bezier(0.22, 0.72, 0.24, 1),
        transform 100ms ease,
        box-shadow 100ms ease,
        filter 120ms ease;

    -webkit-tap-highlight-color: transparent;
}

#hauptmodus-navigation .hauptmodus-button.aktiv {
    width:
        var(--mobile-hauptmodus-width);
}

#hauptmodus-navigation .hauptmodus-text,
#hauptmodus-navigation .hauptmodus-icon {
    display: flex;
    align-items: center;

    min-width: 0;
    height: 100%;

    box-sizing: border-box;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.06) 24%,
            rgba(0, 0, 0, 0.04) 100%
        ),
        var(--farbe-menue);

    transition:
        background 150ms ease,
        color 150ms ease,
        opacity 120ms ease,
        transform 180ms ease;
}

#hauptmodus-navigation .hauptmodus-text {
    justify-content: flex-start;

    padding:
        0
        11px
        0
        15px;

    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    opacity: 0;

    transform:
        translateX(8px);

    pointer-events: none;
}

#hauptmodus-navigation .hauptmodus-button.aktiv
.hauptmodus-text {
    background:
        #ffffff;

    color:
        var(--farbe-menue);

    font-weight: 700;

    opacity: 1;

    transform:
        translateX(0);

    transition-delay:
        65ms,
        65ms,
        75ms,
        65ms;
}

#hauptmodus-navigation .hauptmodus-icon {
    justify-content: center;

    width:
        var(--mobile-hauptmodus-size);

    flex:
        0
        0
        var(--mobile-hauptmodus-size);

    border-left: 0;
}

#hauptmodus-navigation .hauptmodus-button.aktiv
.hauptmodus-icon {
    border-left:
        1px solid
        rgba(185, 180, 170, 0.65);
}

#hauptmodus-navigation .hauptmodus-icon img {
    display: block;

    width:
        var(--mobile-hauptmodus-icon-size);

    height:
        var(--mobile-hauptmodus-icon-size);

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

#hauptmodus-navigation .hauptmodus-button:active {
    transform:
        translateY(2px);

    box-shadow:
        inset 0 2px 3px rgba(70, 60, 45, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.20),
        0 1px 2px rgba(35, 30, 22, 0.08);
}

#hauptmodus-navigation .hauptmodus-button:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, 0.90);

    outline-offset: 3px;
}

#hauptmodus-navigation #resetPositionDesktop.hauptmodus-reset {
    position: absolute;

    top:
        calc(
            0px -
            var(--mobile-hauptmodus-size) -
            var(--mobile-hauptmodus-gap)
        );

    right: 0;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width:
        var(--mobile-hauptmodus-size);

    height:
        var(--mobile-hauptmodus-size);

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border:
        1.5px solid
        #b9b4aa;

    border-radius:
        50%;

    outline: 0;

    background:
        var(--farbe-knopf);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(70, 60, 45, 0.12),
        0 3px 7px rgba(35, 30, 22, 0.14);

    overflow: hidden;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

#hauptmodus-navigation
#resetPositionDesktop.hauptmodus-reset.hidden {
    display: none !important;
}

#hauptmodus-navigation
#resetPositionDesktop
.hauptmodus-reset-text {
    display: none !important;
}

#hauptmodus-navigation
#resetPositionDesktop
.hauptmodus-reset-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: transparent;

    border: 0;
}

#hauptmodus-navigation
#resetPositionDesktop
.hauptmodus-reset-icon::before {
    content: "";

    width: 19px;
    height: 19px;

    background:
        #ffffff;

    -webkit-mask:
        url("reset.svg")
        center / contain
        no-repeat;

    mask:
        url("reset.svg")
        center / contain
        no-repeat;
}

#hauptmodus-navigation
#resetPositionDesktop:active {
    transform:
        translateY(2px);

    box-shadow:
        inset 0 2px 3px rgba(70, 60, 45, 0.18),
        0 1px 2px rgba(35, 30, 22, 0.08);
}

#iconleiste {
    top:
        calc(
            var(--modelheight) -
            var(--mobile-hauptmodus-edge-gap)
        ) !important;

    bottom: auto !important;

    margin-top: 0 !important;

    left: 50% !important;

    transform:
        translate(-50%, -100%) !important;

    width: auto !important;
    max-width:
        calc(100vw - 20px) !important;

    padding: 0 !important;

    background: transparent !important;

    pointer-events: none;
}

#iconleiste.eingeklappt {
    top: auto !important;

    bottom:
        var(--mobile-hauptmodus-edge-gap) !important;

    margin-top: 0 !important;

    transform:
        translateX(-50%) !important;
}

#modellmodus-slider.modellmodus-slider {
    position: relative;

    display: block;

    width: auto !important;
    max-width:
        calc(100vw - 20px) !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none;
}

#modellmodus-slider .wohnungs-unterkategorien {
    position: relative;

    z-index: 25;

    display: flex !important;
    align-items: center;
    justify-content: center;

    gap:
        var(--mobile-untermodus-gap);

    width: auto;
    min-height:
        var(--mobile-untermodus-height);

    margin: 0;
    padding: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(5px)
        scale(0.985);

    transform-origin:
        50% 100%;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
}

#modellmodus-slider
.wohnungs-unterkategorien.sichtbar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 0s;
}

#modellmodus-slider .wohnungs-unterkategorie-pille {
    display: flex;
    align-items: center;

    width:
        var(--mobile-untermodus-width);

    height:
        var(--mobile-untermodus-height);

    box-sizing: border-box;

    margin: 0;
    padding:
        3px
        3px
        3px
        10px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.08) 22%,
            rgba(0, 0, 0, 0.04) 100%
        ),
        var(--farbe-menue);

    border:
        1.5px solid
        #b9b4aa;

    border-radius:
        999px;

    box-shadow:
        0 0 0 4px rgba(205, 201, 193, 0.66),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(70, 60, 45, 0.16),
        0 2px 4px rgba(35, 30, 22, 0.08);

    pointer-events: auto;
}

#modellmodus-slider .wohnungs-unterkategorie-text {
    flex:
        1 1 auto;

    min-width: 0;

    color: #ffffff;

    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    transition:
        opacity 150ms ease;
}

#modellmodus-slider .wohnungs-unterkategorie-schalter {
    flex:
        0
        0
        42px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 28px;

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius:
        999px;

    outline: 0;

    background:
        rgba(255, 255, 255, 0.15);

    color:
        #ffffff;

    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;

    box-shadow:
        0 3px 0 rgba(70, 60, 45, 0.24),
        0 4px 7px rgba(35, 30, 22, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    cursor: pointer;

    transform:
        translateY(-1px);

    transition:
        background 130ms ease,
        color 130ms ease,
        box-shadow 100ms ease,
        transform 100ms ease;

    -webkit-tap-highlight-color:
        transparent;
}

#modellmodus-slider
.wohnungs-unterkategorie-schalter.aktiv {
    background:
        #ffffff;

    color:
        var(--farbe-menue);

    border-color:
        #d0c8ba;
}

#modellmodus-slider
.wohnungs-unterkategorie-pille.gesperrt
.wohnungs-unterkategorie-text {
    opacity: 0.68;
}

#modellmodus-slider
.wohnungs-unterkategorie-schalter:disabled {
    cursor: default;
    opacity: 0.72;
}

#modellmodus-slider
.wohnungs-unterkategorie-schalter.kurz-gedrueckt {
    animation:
        wohnungs-untermodus-druecken-mobile
        180ms
        ease-out;
}

@keyframes wohnungs-untermodus-druecken-mobile {

    0%,
    100% {
        transform:
            translateY(-1px);

        box-shadow:
            0 3px 0 rgba(70, 60, 45, 0.24),
            0 4px 7px rgba(35, 30, 22, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    45% {
        transform:
            translateY(2px);

        box-shadow:
            0 1px 0 rgba(70, 60, 45, 0.20),
            0 1px 2px rgba(35, 30, 22, 0.08),
            inset 0 2px 3px rgba(70, 60, 45, 0.16);
    }
}

#modellmodus-slider .sonnenstand-unterslider {
    width:
        min(
            286px,
            calc(100vw - 34px)
        ) !important;

    max-width:
        calc(100vw - 34px) !important;

    z-index: 35 !important;

    pointer-events: none;
}

#modellmodus-slider
.sonnenstand-unterslider.sichtbar {
    pointer-events: auto;
}

#modellmodus-slider .sonnenstand-zeitregler {
    bottom:
        calc(
            100% +
            58px
        ) !important;
}

#modellmodus-slider .sonnenstand-datumslider {
    bottom:
        calc(
            100% +
            14px
        ) !important;
}

#modellmodus-slider
.sonnenstand-unterslider-inhalt {
    min-height:
        32px !important;

    grid-template-columns:
        52px
        minmax(0, 1fr) !important;

    column-gap:
        7px !important;

    padding:
        4px
        8px !important;

    border-width:
        1.5px !important;
}

#modellmodus-slider
#sonnenstand-uhrzeit,
#modellmodus-slider
#sonnenstand-datum {
    width:
        52px !important;

    min-width:
        52px !important;

    font-size:
        11px !important;
}

#modellmodus-slider
.sonnenstand-unterslider::after {
    top: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    left: -4px !important;

    border-width:
        4px !important;
}

#filterModalBackground.an #filterModalContainer {

    box-sizing: border-box;
    min-width: auto;
    width: calc(100vw - var(--abstand) - var(--abstand));

}

.floatright {

    margin-right: 2px;
    margin-top: 1px;
}

.closeSortierung{
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    padding-top: 0px;
    position: absolute;
    margin-top: -20px;
    right: 20px;
    z-index: 600;
}

.checkoxenContainer  {
       font-size:12px;
}

#filterModalBackground.an .closeButtonFilter {

    margin-top: 15px;

}

#filterModalEinContainer {

    position: absolute;
    right:5px;

    bottom:8px;
    z-index: 400;
}

    .mfp-content .contentseite {
    width:100%;
    min-width: auto;
        box-sizing: border-box;
        border:8px #000 solid;
        margin:0;
}

button.mfp-close, button.mfp-arrow {

}

#filterModalContainer {

}

#logomodel {
    content: url(https://app.visionside.at/elements/NavIcon_mobile.png);
}

#logomodel, #logomodel.eingeklappt {
    left:10px;
    top:10px;
    width:70px;
}

#einausklappen    {
    left:10px;
    top: var(--modelheight);
    border-radius: 10px 10px 0px 0px;
    margin-top:-22px;
    padding:5px;
    padding-bottom:2px;
}
#einausklappen img {
    transform: rotate(0deg);
}

    #einausklappen.eingeklappt {
        bottom:0;
        margin-top:0;
        top: auto;
        left:10px;
    }

    #einausklappen.eingeklappt img {
        transform: rotate(-180deg);
    }

#iframeApplication.eingeklappt {
    width: 100vw;
    height: var(--app-height);
}

:root {
    --fusszeile: 20px;
}

#footer {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--fusszeile);
    box-sizing: border-box;
    padding: 0 10px;
    line-height: var(--fusszeile);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

#filterKnoepfe,
#aktiveFilter {
    display: none;
}

@media only screen and (max-width: 359px) {
    #footer {
        padding: 0 4px;
        font-size: 9px;
    }
}

#interface1 {
    bottom: var(--fusszeile);
    height: calc(var(--app-height) - var(--modelheight) - var(--fusszeile));
}

#iframeApplication.eingeklappt {
    height: calc(var(--app-height) - var(--fusszeile));
}

#einausklappen.eingeklappt {
    bottom: var(--fusszeile);
}

#iconleiste {
    top: var(--modelheight);
    bottom: auto;

    margin-top: -50px;

    left: 50%;
    transform: translateX(-50%);

    width: auto;
    max-width: none;

    box-sizing: border-box;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0;

    white-space: nowrap;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#iconleiste #resetPosition {
    bottom: calc(100% + 12px) !important;
}

#iconleiste.eingeklappt {
    top: auto;
    bottom: 10px;
    margin-top: 0;

    left: 50%;
    transform: translateX(-50%);
}

#modellmodus-slider.modellmodus-slider {
    width: auto !important;
    max-width: calc(100vw - 54px) !important;
}

#modellmodus-slider .wohnungen-unterslider {
    left:
        calc(
            2px +
            (100% - 4px) / 6
        ) !important;

    bottom: calc(100% + 9px) !important;

    width: 32.2% !important;
}

#modellmodus-slider .wohnungen-unterslider::after {
    top: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    left: -3px !important;

    border-width: 4px !important;
}

#modellmodus-slider .wohnungen-unterslider::before {
    content: none !important;
    display: none !important;
}

#modellmodus-slider .wohnungen-unterslider-labels {
    width: 100% !important;

    padding: 1.5px !important;

    border-width: 1px !important;
}

#modellmodus-slider .wohnungen-unterslider-labels::before {
    top: 1.5px !important;
    bottom: 1.5px !important;
    left: 1.5px !important;

    width:
        calc(
            (100% - 3px) / 2
        ) !important;
}

#modellmodus-slider .wohnungen-unterslider-label {
    flex: 1 1 0 !important;

    min-width: 0 !important;
    width: auto !important;

    height: 23px !important;

    padding-left: 4px !important;
    padding-right: 4px !important;

    font-size: 9.5px !important;
}

#filterModalBackground.an #filterModalContainer {
    overflow: scroll;

    height: calc(var(--app-height) - 20px);

    max-height: calc(var(--app-height) - 20px);

}

.sliderHeader {padding-top: 0;}

#AuswahlFilter {

        padding-top: var(--abstand);
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--abstand);

    }

}

@media only screen and (max-height: 790px)
{

#filterModalBackground.an {
    display:block;
    height: auto;
    padding:var(--abstand);
    overflow:scroll;
    overflow-y: hidden
    }

#filterModalScroller {
     position:absolute;
     transform: translate3d(0,0,0);
}

#filterModalContainer    {
    width: calc(100vw - var(--abstand) - var(--abstand));

}

}

@media only screen
and (max-width: 960px)
and (orientation : landscape)
and (pointer: coarse)
{
    #landscape {
        display: flex;
        position: fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;

        z-index: 9000;
        background-color: rgba(0,0,0,0.8);
        color:#fff;

        text-align: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

    }
    #landscape div{
        text-align: center;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    #landscape img {
        width:48px;
        margin-right: 16px;
        vertical-align: middle;
    }

}

@media only screen and (max-width: 960px) {

    .wrapper {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .wrapper .wrapper{

        padding-left: 0px;
        padding-right: 0px;

    }

    .row-wrapper-100 .wrapper, .breit .wrapper {

        padding-left: 15px;
        padding-right: 15px;

    }

    .wrapper2 {
        margin-left: -15px;
        margin-right: -15px;
    }

    .column {
        padding-left: 15px;
        padding-right: 15px;

    }

    .col-md-1 {
        width: 100%;
    }
    .col-md-2 {
        width: 100%;
    }
    .col-md-3 {
        width: 100%;
    }
    .col-md-4 {
        width: 100%;
    }
    .col-md-5 {
        width: 100%;
    }
    .col-md-6 {
        width: 100%;
    }
    .col-md-7 {
        width: 100%;
    }
    .col-md-8 {
        width: 100%;
    }
    .col-md-9 {
        width: 100%;
    }
    .col-md-10 {
        width: 100%;
    }
    .col-md-11 {
        width: 100%;
    }
    .col-md-12 {
        width: 100%;
    }

    .margin-left-md-1, .margin-left-md-2, .margin-left-md-3, .margin-left-md-4, .margin-left-md-5, .margin-left-md-6, .margin-left-md-7, .margin-left-md-8, .margin-left-md-9, .margin-left-md-10, .margin-left-md-11, .margin-left-md-12 {
        margin-left: 0;
    }

    .margin-right-md-1, .margin-right-md-2, .margin-right-md-3, .margin-right-md-4, .margin-right-md-5, .margin-right-md-6, .margin-right-md-7, .margin-right-md-8, .margin-right-md-9, .margin-right-md-10, .margin-right-md-11, .margin-right-md-12 {
        margin-right: 0;
    }

    .startvideo {
        margin-top: 100px;
    }

}

@media only screen and (max-width: 960px) {

body {
    --mobile-hauptmodus-size: 42px;
    --mobile-hauptmodus-gap: 16px;
    --mobile-hauptmodus-width: 166px;

    --mobile-untermodus-height: 31px;
    --mobile-untermodus-width: 122px;
    --mobile-untermodus-gap: 6px;
}

#mobile-hauptmodus-menue-toggle.mobile-hauptmodus-menue-toggle {
    position: relative;

    z-index: 4;

    flex:
        0 0
        var(--mobile-hauptmodus-size);

    order: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    width:
        var(--mobile-hauptmodus-size);

    height:
        var(--mobile-hauptmodus-size);

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    border:
        1.5px solid
        #b9b4aa;

    border-radius:
        50%;

    outline: 0;

    background:
        var(--farbe-menue);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(70, 60, 45, 0.12),
        0 3px 7px rgba(35, 30, 22, 0.16);

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform 100ms ease,
        box-shadow 100ms ease,
        filter 120ms ease;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-punkte {
    display: grid;

    grid-template-columns:
        repeat(3, 4px);

    grid-template-rows:
        repeat(3, 4px);

    gap: 3px;

    align-items: center;
    justify-items: center;

    transition:
        opacity 100ms ease,
        transform 140ms ease;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-punkte i {
    display: block;

    width: 4px;
    height: 4px;

    border-radius:
        50%;

    background:
        #ffffff;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen {
    position: absolute;

    inset: 0;

    display: block;

    opacity: 0;

    transform:
        rotate(-35deg)
        scale(0.75);

    transition:
        opacity 100ms ease,
        transform 160ms ease;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen::before,
#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 19px;
    height: 2px;

    border-radius:
        999px;

    background:
        #ffffff;

    transform-origin:
        50% 50%;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}

#hauptmodus-navigation.mobile-menue-offen
#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-punkte {
    opacity: 0;

    transform:
        rotate(30deg)
        scale(0.72);
}

#hauptmodus-navigation.mobile-menue-offen
#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen {
    opacity: 1;

    transform:
        rotate(0)
        scale(1);
}

#mobile-hauptmodus-menue-toggle:active {
    transform:
        translateY(2px);

    box-shadow:
        inset 0 2px 3px rgba(70, 60, 45, 0.18),
        0 1px 2px rgba(35, 30, 22, 0.08);
}

#hauptmodus-navigation.hauptmodus-navigation {
    width:
        var(--mobile-hauptmodus-size);

    gap:
        var(--mobile-hauptmodus-gap);

    overflow:
        visible;
}

#hauptmodus-navigation:not(.mobile-menue-offen)
.hauptmodus-button,
#hauptmodus-navigation:not(.mobile-menue-offen)
#resetPositionDesktop {
    display:
        none !important;
}

#hauptmodus-navigation:not(.mobile-menue-offen)::before {
    display:
        none !important;
}

#hauptmodus-navigation.hauptmodus-navigation.mobile-menue-offen {
    width:
        var(--mobile-hauptmodus-width);
}

#hauptmodus-navigation.hauptmodus-navigation.mobile-menue-offen::before {
    display: block !important;

    top: -7px;
    right: -6px;
    bottom: -7px;

    width:
        calc(
            var(--mobile-hauptmodus-size) +
            12px
        );
}

#hauptmodus-navigation.mobile-menue-offen
.hauptmodus-button {
    display:
        grid !important;

    flex:
        0 0
        var(--mobile-hauptmodus-size);
}

#hauptmodus-navigation.mobile-menue-offen
#resetPositionDesktop.hauptmodus-reset:not(.hidden) {
    position:
        relative;

    top: auto;
    right: auto;

    order: -10;

    flex:
        0 0
        var(--mobile-hauptmodus-size);

    display:
        flex !important;
}

#hauptmodus-navigation
.hauptmodus-button[data-index="0"] {
    order: 0;
}

#hauptmodus-navigation
.hauptmodus-button[data-index="1"] {
    order: 1;
}

#hauptmodus-navigation
.hauptmodus-button[data-index="2"] {
    order: 2;
}

#modellmodus-slider
.wohnungs-unterkategorien {
    gap:
        var(--mobile-untermodus-gap);
}

#modellmodus-slider
.wohnungs-unterkategorie-pille {
    width:
        var(--mobile-untermodus-width);

    height:
        var(--mobile-untermodus-height);

    padding:
        2px
        2px
        2px
        8px;

    border-width:
        1px;

    box-shadow:
        0 0 0 3px rgba(205, 201, 193, 0.66),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(70, 60, 45, 0.16),
        0 2px 4px rgba(35, 30, 22, 0.08);
}

#modellmodus-slider
.wohnungs-unterkategorie-text {
    font-size:
        9px;
}

#modellmodus-slider
.wohnungs-unterkategorie-schalter {
    flex:
        0
        0
        35px;

    width:
        35px;

    height:
        23px;

    font-size:
        8px;

    box-shadow:
        0 2px 0 rgba(70, 60, 45, 0.24),
        0 3px 5px rgba(35, 30, 22, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#modellmodus-slider
.sonnenstand-zeitregler {
    bottom:
        calc(
            100% +
            50px
        ) !important;
}

#modellmodus-slider
.sonnenstand-datumslider {
    bottom:
        calc(
            100% +
            10px
        ) !important;
}

body {
    --mobile-hauptmodus-size: 38px;
    --mobile-hauptmodus-gap: 14px;
    --mobile-hauptmodus-width: 150px;
    --mobile-hauptmodus-edge-gap: 14px;
    --mobile-hauptmodus-icon-size: 17px;

    --mobile-untermodus-height: 28px;
    --mobile-untermodus-width: 108px;
    --mobile-untermodus-gap: 5px;
}

#hauptmodus-navigation.hauptmodus-navigation {
    pointer-events: none !important;
}

#hauptmodus-navigation .hauptmodus-button,
#hauptmodus-navigation #resetPositionDesktop,
#mobile-hauptmodus-menue-toggle {
    pointer-events: auto !important;
}

#hauptmodus-navigation .hauptmodus-button {
    grid-template-columns:
        minmax(0, 1fr)
        var(--mobile-hauptmodus-size);

    width:
        var(--mobile-hauptmodus-size);

    height:
        var(--mobile-hauptmodus-size);

    border-width:
        1px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(70, 60, 45, 0.10),
        0 2px 5px rgba(35, 30, 22, 0.13);
}

#hauptmodus-navigation .hauptmodus-button.aktiv {
    width:
        var(--mobile-hauptmodus-width);
}

#hauptmodus-navigation .hauptmodus-text {
    padding:
        0
        9px
        0
        13px;

    font-size:
        10.5px;
}

#hauptmodus-navigation .hauptmodus-icon {
    width:
        var(--mobile-hauptmodus-size);

    flex:
        0
        0
        var(--mobile-hauptmodus-size);
}

#hauptmodus-navigation .hauptmodus-icon img {
    width:
        var(--mobile-hauptmodus-icon-size);

    height:
        var(--mobile-hauptmodus-icon-size);
}

#hauptmodus-navigation.hauptmodus-navigation.mobile-menue-offen::before {
    top: -5px;
    right: -5px;
    bottom: -5px;

    width:
        calc(
            var(--mobile-hauptmodus-size) +
            10px
        );
}

#mobile-hauptmodus-menue-toggle.mobile-hauptmodus-menue-toggle {
    flex:
        0 0
        var(--mobile-hauptmodus-size);

    width:
        var(--mobile-hauptmodus-size);

    height:
        var(--mobile-hauptmodus-size);

    border-width:
        1px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(70, 60, 45, 0.10),
        0 2px 5px rgba(35, 30, 22, 0.14);
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-punkte {
    grid-template-columns:
        repeat(3, 3px);

    grid-template-rows:
        repeat(3, 3px);

    gap:
        2.5px;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-punkte i {
    width: 3px;
    height: 3px;
}

#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen::before,
#mobile-hauptmodus-menue-toggle
.mobile-hauptmodus-menue-schliessen::after {
    width:
        16px;

    height:
        1.5px;
}

#hauptmodus-navigation #resetPositionDesktop.hauptmodus-reset {
    width:
        var(--mobile-hauptmodus-size);

    height:
        var(--mobile-hauptmodus-size);

    flex-basis:
        var(--mobile-hauptmodus-size);

    border-width:
        1px;
}

#hauptmodus-navigation
#resetPositionDesktop
.hauptmodus-reset-icon::before {
    width:
        16px;

    height:
        16px;
}

#modellmodus-slider
.wohnungs-unterkategorien {
    gap:
        var(--mobile-untermodus-gap);

    min-height:
        var(--mobile-untermodus-height);
}

#modellmodus-slider
.wohnungs-unterkategorie-pille {
    width:
        var(--mobile-untermodus-width);

    height:
        var(--mobile-untermodus-height);

    padding:
        2px
        2px
        2px
        7px;

    border-width:
        1px;

    box-shadow:
        0 0 0 2.5px rgba(205, 201, 193, 0.64),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(70, 60, 45, 0.14),
        0 1px 3px rgba(35, 30, 22, 0.08);
}

#modellmodus-slider
.wohnungs-unterkategorie-text {
    font-size:
        8px;
}

#modellmodus-slider
.wohnungs-unterkategorie-schalter {
    flex:
        0
        0
        31px;

    width:
        31px;

    height:
        20px;

    font-size:
        7px;

    border-width:
        1px;

    box-shadow:
        0 2px 0 rgba(70, 60, 45, 0.22),
        0 2px 4px rgba(35, 30, 22, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#modellmodus-slider .sonnenstand-unterslider {
    width:
        min(
            248px,
            calc(100vw - 28px)
        ) !important;

    max-width:
        calc(100vw - 28px) !important;
}

#modellmodus-slider .sonnenstand-zeitregler {
    bottom:
        calc(
            100% +
            44px
        ) !important;
}

#modellmodus-slider .sonnenstand-datumslider {
    bottom:
        calc(
            100% +
            8px
        ) !important;
}

#modellmodus-slider
.sonnenstand-unterslider-inhalt {
    min-height:
        27px !important;

    grid-template-columns:
        45px
        minmax(0, 1fr) !important;

    column-gap:
        5px !important;

    padding:
        3px
        6px !important;

    border-width:
        1px !important;
}

#modellmodus-slider
#sonnenstand-uhrzeit,
#modellmodus-slider
#sonnenstand-datum {
    width:
        45px !important;

    min-width:
        45px !important;

    font-size:
        9px !important;
}

#modellmodus-slider
.sonnenstand-unterslider::after {
    top: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    left: -3px !important;

    border-width:
        3px !important;
}

    #mobile-hauptmodus-menue-toggle.mobile-hauptmodus-menue-toggle {
        display: flex !important;
    }
}

@media only screen and (max-width: 960px) {

    #modellmodus-slider
    .wohnungs-unterkategorie-pille {
        padding:
            2px;
    }

    #modellmodus-slider
    .wohnungs-unterkategorie-text {
        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;

        padding:
            0
            3px;

        font-size:
            9px;
    }
}

@media only screen and (max-width: 960px) {

    #containerCompass {
        z-index: 2500 !important;
        pointer-events: auto !important;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }

    #containerCompass img {
        pointer-events: none !important;
        user-select: none;
        -webkit-user-select: none;
    }
}

@media only screen and (max-width: 960px) {

    #modellmodus-slider
    .wohnungs-unterkategorie-pille.gesperrt {
        opacity: 0.68;
        filter: grayscale(0.55);
        cursor: not-allowed;
    }

    #modellmodus-slider
    .wohnungs-unterkategorie-pille.gesperrt
    .wohnungs-unterkategorie-text {
        opacity: 1;
    }

    #modellmodus-slider
    .wohnungs-unterkategorie-pille.gesperrt
    .wohnungs-unterkategorie-schalter {
        opacity: 0.86;
        cursor: not-allowed;
    }
}

@media only screen and (max-width: 960px) {

    .ergebnisFilter.an {
        z-index: 2147483646 !important;
    }

    body:has(.ergebnisFilter.an)
    #containerCompass,

    body:has(.ergebnisFilter.an)
    body:has(.ergebnisFilter.an)
    #hauptmodus-navigation.hauptmodus-navigation {
        z-index: 1 !important;
        pointer-events: none !important;
    }
}

@media only screen and (max-width: 960px) {

    #filterModalBackground.an {
        z-index: 2147483647 !important;
        pointer-events: auto !important;
    }

    body.mobile-filter-popup-offen
    #containerCompass,

    body.mobile-filter-popup-offen
    body.mobile-filter-popup-offen
    #hauptmodus-navigation.hauptmodus-navigation,

    body.mobile-filter-popup-offen
    #mobile-hauptmodus-menue-toggle {
        z-index: 0 !important;
        pointer-events: none !important;
    }

    body.mobile-filter-popup-offen
    #containerCompass img {
        pointer-events: none !important;
    }
}

@media only screen and (max-width: 960px) {

    #hauptmodus-navigation
    #resetPositionDesktop.hauptmodus-reset:not(.hidden) {
        display:
            flex !important;

        position:
            absolute !important;

        top:
            calc(
                0px -
                var(--mobile-hauptmodus-size) -
                var(--mobile-hauptmodus-gap)
            ) !important;

        right:
            0 !important;

        left:
            auto !important;

        order:
            initial !important;

        flex:
            none !important;

        width:
            var(--mobile-hauptmodus-size) !important;

        height:
            var(--mobile-hauptmodus-size) !important;

        z-index:
            5 !important;

        pointer-events:
            auto !important;
    }

    #hauptmodus-navigation:not(.mobile-menue-offen)
    #resetPositionDesktop.hauptmodus-reset:not(.hidden) {
        display:
            flex !important;
    }

    #hauptmodus-navigation.mobile-menue-offen
    #resetPositionDesktop.hauptmodus-reset:not(.hidden) {
        position:
            absolute !important;

        top:
            calc(
                0px -
                var(--mobile-hauptmodus-size) -
                var(--mobile-hauptmodus-gap)
            ) !important;

        right:
            0 !important;

        order:
            initial !important;

        flex:
            none !important;
    }
}

@media only screen and (min-width: 961px) and (max-height: 790px) {

    #filterModalBackground.an {

        box-sizing: border-box;
        height: 100%;
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    #filterModalScroller {

        position: relative;

        width: 100%;
        max-height: 100%;

        display: flex;
        justify-content: center;
    }

    #filterModalBackground.an #filterModalContainer {
        box-sizing: border-box;
        max-height: 100%;
    }
}

@media only screen and (max-width: 960px) {

    #filterModalBackground.an #filterModalContainer {
        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    #filterModalBackground.an #AuswahlFilter {
        flex: 1 1 auto;
        min-height: 0;

        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width: 960px) {

    #objektfensterBackground.an.anfrage #objektfenster {
        max-height: calc(100% - 20px);
    }
}

@media only screen and (max-width: 960px) {

    #listeAuswahl,
    #merklisteListe {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 960px) {

    .objektfensterUe {
        display: flex;
        align-items: center;
        gap: 10px;

        padding-top: 14px;
        padding-bottom: 10px;

        padding-right: 45px;
    }

    .objektfensterUe h2 {
        order: 1;

        margin: 0;
        min-width: 0;
    }

    .objektfensterUe .iconAddMerkliste {
        order: 2;

        float: none;
        flex: 0 0 auto;
        margin: 0;
    }

    #objektfensterBackground.an .objektfenster > .closeButton {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 960px) {

    #objektfensterBackground.an:not(.anfrage) #objektfenster {
        max-height: none;
        display: block;

        padding-bottom: var(--abstand);
    }

    #objektfensterBackground.an:not(.anfrage) .objektfenster {
        max-height: none;
        display: block;
    }

    #objektfensterBackground.an:not(.anfrage) .objektfenster > .button {
        box-shadow: none;
    }
}

@media only screen and (max-width: 960px) {

    #hauptmodus-navigation.hauptmodus-navigation:not(.eingeklappt) {
        position: absolute;
    }
}

@media only screen and (max-width: 960px) {

    .objektTable td[colspan="2"] {
        padding-right: 0;
    }
}

@media only screen and (max-width: 960px) {

    .ergebnisFilter.an {
        background-color: rgba(0, 0, 0, 0.2);

        display: flex;

        align-items: flex-end;
        justify-content: center;

        box-sizing: border-box;
        padding: var(--abstand);

        height: var(--app-height);
        min-height: var(--app-height);
        max-height: var(--app-height);
    }

    .ergebnisFilterBox {

        position: relative;

        width: 100%;
        max-height: 100%;
        box-sizing: border-box;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    .ergebnisFilterBox h2 {
        margin: 0;
        padding: 14px 45px 10px var(--abstand);

        border-bottom: 2px #ddd solid;
    }

    .ergebnisFilterBox #topSuche,
    .ergebnisFilterBox #sortierung {
        box-sizing: border-box;
        width: auto;
        margin: 14px var(--abstand) 0;
    }

    .ergebnisFilterBox #buttonSortierung {
        box-sizing: border-box;
        width: 100%;
        margin: 14px 0 0;
    }

    .closeSortierung {
        right: 10px;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 960px) {

    #filterModalBackground.an {

        box-sizing: border-box;

        height: var(--app-height);
        min-height: var(--app-height);
        max-height: var(--app-height);
    }
}

@media only screen and (max-width: 960px) {

    #ladeseite {
        position: relative;
        height: var(--app-height, 100vh);

        display: flex;
        flex-direction: column;
    }

    .ladeseiteKopf {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        flex: none;
        padding: 0;
        min-height: 0;
        pointer-events: none;
    }

    .ladeseiteLogo {
        display: block;
        margin: calc(14px + env(safe-area-inset-top, 0px)) 0 0 14px;
        padding: 8px 10px;
        max-width: 140px;
        max-height: 44px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .ladeseiteBilder {
        flex: 0 0 46%;
    }

    .ladeseiteText {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    .ladeseiteWorteRahmen {
        margin: 0;
    }

    .ladeseiteWorte {
        padding: 32px 20px;
    }

    .ladeseiteFuss {
        margin: 0;
        padding: 10px 20px 10px 20px;
        background: #f3f5f8;
        border-top: 1px solid #e3e8ee;
    }

    .ladeseiteFortschrittKopf {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .ladeseiteVortitel {
        margin-bottom: 12px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    h1.ladeseiteTitel {
        font-size: 26px;
        line-height: 1.25;
    }

    .ladeseiteFliesstext {
        margin-top: 16px;
        font-size: 15px;
    }

    .ladeseiteHinweis {
        margin-top: 8px;
        font-size: 12px;
    }

    .ladeseiteRecht {
        margin-top: 8px;
        font-size: 11px;
    }

    .ladeseiteBilder:after {
        height: 110px;
    }

    .ladeseiteBlaettern {
        left: 16px;
        bottom: 14px;
    }

    .ladeseiteZaehler {
        font-size: 12px;
    }

    .ladeseiteBalken {
        margin-left: 14px;
    }

    .ladeseiteBalkenStueck {
        width: 24px;
    }

}

@media only screen and (max-width: 960px) and (max-height: 700px) {

    .ladeseiteBilder {
        flex: 0 0 36%;
    }

    .ladeseiteLogo {
        margin: calc(10px + env(safe-area-inset-top, 0px)) 0 0 10px;
        padding: 6px 8px;
        max-width: 120px;
        max-height: 36px;
    }

    .ladeseiteWorteRahmen::before,
    .ladeseiteWorteRahmen::after {
        height: 20px;
    }

    .ladeseiteWorte {
        padding: 20px 20px;
    }

    .ladeseiteFuss {
        padding: 8px 20px 8px 20px;
    }

    h1.ladeseiteTitel {
        font-size: 22px;
    }

    .ladeseiteFliesstext {
        margin-top: 12px;
        font-size: 14px;
    }

    .ladeseiteRecht {
        margin-top: 6px;
    }

}

@media only screen and (max-width: 960px) {

    body {
        --mobile-infozeile-hoehe: 20px;
    }

    #hauptmodus-navigation.hauptmodus-navigation.eingeklappt {
        bottom:
            calc(
                var(--mobile-hauptmodus-edge-gap) +
                var(--mobile-infozeile-hoehe)
            );
    }

    #iconleiste.eingeklappt {
        bottom:
            calc(
                var(--mobile-hauptmodus-edge-gap) +
                var(--mobile-infozeile-hoehe)
            ) !important;
    }
}

@media only screen and (max-width: 960px) {

    .ladeseiteSteuerung {
        left: 16px;
        right: 16px;
        bottom: 44px;
        transform: none;
        max-width: none;
        padding: 0;
        white-space: normal;
        font-size: 11px;
        line-height: 1.25;
    }

    .ladeseiteSteuerungPunkt {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        gap: 7px;
        padding: 8px 4px;
    }

    .ladeseiteZeichen {
        width: 22px;
        height: 22px;
    }

}

@media only screen and (max-width: 960px) {

    body.wf-werbeleiste {
        --werbeleiste-hoehe: 36px;
        --werbeleiste-abstand: 8px;
    }

    #werbeLeiste,
    #werbeLeiste.eingeklappt {

        top: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: none;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 8px 4px 10px;
        border-radius: 0;
        font-size: 11px;
        line-height: 1.25;
        text-align: left;
        white-space: normal;
    }

    .werbeLeisteKnopf {
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 11px;
    }

    body.wf-werbeleiste #logomodel,
    body.wf-werbeleiste #containerCompass {
        margin-top: var(--werbeleiste-hoehe);
    }

}

@media only screen and (max-width: 960px) {

    .einausklappenText {
        display: none;
    }

    body.klappVor #einausklappen,
    body.klappVor #iconleiste,
    body.klappVor #hauptmodus-navigation {
        will-change: translate;
    }

    body.klappt #einausklappen,
    body.klappt #iconleiste,
    body.klappt #hauptmodus-navigation {
        transition: translate var(--klappdauer) ease-in-out !important;
        pointer-events: none;
    }
}

@media only screen and (max-width: 960px) {

    #modellmodus-slider .wohnungs-unterkategorien.untermodus-gruppe {
        gap: 4px;
        min-height: 0;
        padding: 4px;
        border-radius: 999px;
        background: rgba(205, 201, 193, 0.66);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(70, 60, 45, 0.08),
            0 2px 5px rgba(35, 30, 22, 0.08);
    }

    #modellmodus-slider .untermodus-knopf {
        position: relative;
        display: flex;
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 1.5px solid #b9b4aa;
        border-radius: 50%;
        outline: 0;
        background: transparent;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            inset 0 -1px 0 rgba(70, 60, 45, 0.12),
            0 2px 5px rgba(35, 30, 22, 0.14);
        overflow: hidden;
        cursor: pointer;
        font-family: inherit;
        transition: opacity 150ms ease, filter 120ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    #modellmodus-slider .untermodus-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    #modellmodus-slider .untermodus-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background:
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.18) 0%,
                rgba(255, 255, 255, 0.06) 24%,
                rgba(0, 0, 0, 0.04) 100%
            ),
            var(--farbe-menue);
        color: #ffffff;
        transition: background 150ms ease, color 150ms ease;
    }

    #modellmodus-slider .untermodus-icon:before {
        content: "";
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
    }

    #modellmodus-slider .untermodus-knopf.aktiv .untermodus-icon {
        background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
        color: var(--farbe-menue);
    }

    #modellmodus-slider .untermodus-knopf:disabled {
        opacity: 0.68;
        filter: grayscale(0.55);
        cursor: not-allowed;
    }

    #modellmodus-slider .untermodus-knopf.kurz-gedrueckt {
        animation: untermodus-druck 180ms ease-out;
    }
}

@media only screen and (max-width: 960px) {

    #hauptmodus-navigation #resetPositionDesktop.hauptmodus-reset {
        background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    }

    #hauptmodus-navigation #resetPositionDesktop .hauptmodus-reset-icon::before {
        width: 22px;
        height: 22px;
        background: var(--farbe-menue);
        -webkit-mask: url("kamera-zurueck.svg") center / contain no-repeat;
        mask: url("kamera-zurueck.svg") center / contain no-repeat;
    }
}

@media only screen and (max-width: 960px) {

    .rechtliches {
        width: calc(100% + 16px);
        max-width: none;
        height: var(--app-height, 100vh);
        max-height: none;
        margin: 0 -8px;
        box-shadow: none;
    }

    .rechtlichesKopf {
        padding: 14px 45px 10px 20px;
    }

    .rechtlichesInhalt {
        padding: 6px 20px 20px;
    }

    body.rechtlichesSeite {
        position: static;
        height: auto;
        overflow: auto;
    }

    body.rechtlichesSeite .rechtliches {
        width: 100%;
        height: auto;
        margin: 0;
    }
}

@media only screen and (max-width: 960px) {

    #gdpr-cookie-message {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
        padding: 16px 20px;
    }

    #gdpr-cookie-message button {
        display: block;
        width: 100%;
        margin: 8px 0 0;
    }
}

@media only screen and (max-width: 960px) {
    #hauptmodus-navigation.nur-reset::before {
        display: none !important;
    }

    #hauptmodus-navigation.nur-reset #resetPositionDesktop.hauptmodus-reset:not(.hidden) {
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }
}