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

    html {
        overflow: hidden;
        width: 100%;
    }
    body {
        height: 100%;
        position: fixed;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .auswahlItem {
        padding: 5px 10px;
        margin-bottom: 5px;
        font-size: 12px;
    }

 :root {

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

     --modelheight: calc(100vw / 4 * 3.5);
 }


    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: 100vh;*/
            height: var(--app-height);


        }


        #iframeApplication {
            width:  100vw;
            /*height: calc(100vh - 400px);*/
            /*height: calc(var(--app-height) - 400px);*/
            height: var(--modelheight);
            box-sizing: border-box;
            display:block;

        }

.button {
    padding:10px;
}

    .mobilonly {
        display: block;
    }

#merkliste3 {
    padding:0px;

    position: relative;
    top: -20px;
}

#interface1 {
    position: absolute;
    /*height: 400px;*/

    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(--farbe1);
    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%;
    /* min-height: 830px; */
    height: auto;
    z-index: 500;
    display: block;

}

#objektfenster {
    position: absolute;
    width: calc(100vw - var(--abstand) - var(--abstand));
    /*top: calc(100vh - 400px);*/
    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;
}

#filterModalBackground.an #filterModalContainer {

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

    /*left: var(--abstand);*/
    /*position: absolute !important; */
}

.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: 0px;

}

#filterModalEinContainer {

    position: absolute;
    right:5px;
    bottom:25px;
    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, #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);
}

#footer {
    /*display: none;*/
}

#iconleiste {
    top: var(--modelheight);
    bottom:auto;
    margin-top:-44px;
    left: calc(50% - 106px);
    font-size:10px;
}

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

#filterModalBackground.an #filterModalContainer {
    overflow: scroll;
    height: calc(100vh - var(--abstand)  - 60px);

}

.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)
{
    #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: 1120px) {*/
@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;
    }

}