*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body,#panel{
    display: table;
    width: 100%;
    height: 100%;
}
img,.img-responsive{
    max-width: 100%;
    height: auto;
}
.mobile-menu{
    display: none;
    position: absolute;
    top: 7px;
    right: 15px;
}
#images {
    width: 100%;
    height: auto;
}
#logo{
    height: auto;
}
.zentriert{
    position: relative;
}
.zentriert,
.zentriert,
#footercontent{
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 978px !important;
}
#teaser1{
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 1240px !important;
}
#header_flex{
    display: flex;
    flex-wrap: wrap;
    background: url(../upload/design/schatten.png) right bottom no-repeat;
    padding-bottom: 35px;
}
#transpbox {
    position: relative;
    top: -3px;
    width: 300px;
    height: auto;
    left: 0;
    float: left;
    background-image: none;
    background-color: rgba(255,255,255,1.0);
    padding-bottom: 25px;
}
#images{
    width: calc(100% - 300px) !important;
    height: auto !important;
    float: left;
    background-image: none !important;
    padding: 0px !important;
}
#images .img-responsive{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#teaser1 .element{
    width: 25%;
    margin-right: 0px;
}

#tel{
    left: -125px !important;
}
#tel:hover{
    left: 0px !important;
}
@media (max-width: 767px){

    :root{
        --container-width: 500px;
    }
    .mobile-menu{
        position: fixed !important;
        z-index: 100;
        display: block !important;
        right: auto !important;
        left: calc(50% - var(--container-width)/2) !important;
        top: 18px !important;
    }
    .mobile-menu svg{
        width: 30px !important;
    }
    #tel {
        top: 610px
    }
    #hauptnavi{
        left: 0px;
        right: auto;
    }
    #hauptnavi ul.mainnavi{
        display: none;
    }
    .zentriert,
    .zentriert,
    #footercontent{
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 500px !important;
    }

    #teaser1{
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100% !important;
    }

    #header_flex{
        background-image: none;
        margin-bottom: 30px;
    }

    #logo{
        width: 200px;
        right: 0px;
        left: auto;
    }

    #transpbox{
        padding-top: 30px;
        order: 2;
        width: 100% !important;
        box-shadow: 0px 10px 7px 0px rgba(0,0,0,0.3);
    }
    #images{
        width: 100% !important;
    }
    #teaser1{
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }
    #teaser1 .element {
        width: 100%;
        height: auto !important;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    #teaser1 .element h2{
        height: auto !important;
    }
    #teaser1 .element p{
        display: block !important;
    }
    .tpl_bxslider_image_v2{
        min-height: 600px;
    }
    #content table{
        width: 100% !important;
        height: auto;
    }
    table.table-responsive{
        width: 100%;
    }
    .table-responsive tr td{
        display: block;
        width: 100%;
        padding: 0px 0px 10px 0px !important;
    }
    .table-responsive tr td:nth-child(2){
        margin-bottom: 20px !important;
    }
}
@media (max-width: 541px){
    .mobile-menu{
        left: 20px !important;
    }
    .zentriert,
    .zentriert,
    #footercontent{
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
    }
    #teaser1{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #logo {
        right: 20px;
        width: 180px;
    }

    #content{
        background-image: none;
        padding-left: 0px;
        padding-right: 0px;
    }
    #footerbutton{
        right: 20px;
    }
    .tpl_bxslider_image_v2{
        min-height: 400px;
    }

    .tpl-TMPL_Impressum #content h1{
        font-size: 24px;
    }
}

@media (max-width: 459px) {
    #logo {
        width: 160px;
    }
}

@media (max-width: 359px) {
    #logo {
        width: 140px;
    }
}

@media (min-width: 768px) and (max-width: 991px){

    #logo {
        width: 200px;
    }
    .zentriert,
    #footercontent{
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 750px !important;
    }

    #transpbox{
        padding-top: 70px;
    }
    #images .img-responsive{
        height: 100%;
        object-fit: cover;
        object-position: -70px;
    }
    .mainnavi li {
        margin: 0px 14px 0 14px !important;
    }
    #teaser1{
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100% !important;
    }
    #teaser1 .element{
        scale:0.8;
    }
    .tpl_bxslider_image_v2{
        min-height: 300px;
    }
}
@media (min-width: 992px) and (max-width: 1241px){
    #teaser1{
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100% !important;
    }
    #teaser1 .element{
        scale:0.95;
    }
    .tpl_bxslider_image_v2{
        min-height: 400px;
    }
}
@media (min-width: 1241px) and (max-width: 1679px){

    .tpl_bxslider_image_v2{
        min-height: 400px;
    }
}
@media (min-width: 1680px) {
    #header_flex{
        background-position-x: 30px;
        margin-bottom: 30px;
    }
    .zentriert,
    #footercontent{
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 1250px !important;
    }
    #teaser1{
        width: 1450px !important;
    }

    .tpl_bxslider_image_v2{
        min-height: 400px;
    }
}