/* Erweiterung */
div#head a.mobile {
    display: none;
    border-radius: 0 10px 0px 0px;
}

div#metanavi a,
div#sitefunc a {
    position: relative;
}
div#metanavi a,
div#metanavi a + a,
div#sitefunc a + a {
    margin-left: 12px;
}

div#metanavi a:before,
div#metanavi a + a:before,
div#sitefunc a + a:before {
    content: "";
    border-left: 1px solid #B8C4E2;
    position: absolute;
    top: 1px;
    left: -8px;
    height: 10px;
}

@media (max-width: 3000px) {
    
    /* Allgemein */
    *,::after,::before {
        box-sizing: border-box
    }
    div#homepage {
        max-width: 980px;
        width: 100%;
        padding: 15px;
    }
    div#main {
        padding: 0;
    }
    
    /* Startseite */
    div#contenthome {
        width: calc(100% - 270px)!important;
        min-height: 360px;
        padding-top: 30px;
        margin: 0;
    }

    div#sitehead {
        padding-left: 23px;
    }
    
    /* Teaser */
    div#teaser {
        background-color: #4466C6;
        padding: 20px 15px;
        border-radius: 10px 10px;
        margin-top: 30px;
        margin-right: 30px;
    }
    div.teaserboxtop,
    div.teaserboxbottom {
        display: none;
    }
    div.teaserbox {
        padding: 0;
    }
    
    /* Contentseite */
    div#sitehead {
        padding-top: 30px;
    }
    div#content {
        width: calc(100% - 300px)!important;
        margin-left: 23px;
    }
    div#content + div#teaser {
        margin-top: 0;
    }
    
    /* Bausteine */
    .hp-box {
        width: 48%;
        margin: 0!important;
    }
    
    .hp-box + .hp-box {
        margin-left: 4%!important;
        margin-right:  0;
    }
    .hp-box-image {
        left: inherit;
        bottom: inherit;
        top: -40px;
        right: 15px;
    }
    
    /* Kontaktformular */
    div.radioButtonListWrapper, div.plzort, div.captcha div {
        width: 288px;
    }
    input.zipcode {
            width: 65px;
    }
    
    /* Footer */
    div#contentinhalt {
        padding: 22px;
        border-radius: 10px;
    }
    div#footer {
        padding: 0 25px;
        border-radius: 0px 0px 10px 10px;
        background-color: #0E3194;
    }
    img#footerleft,
    img#footerright,
    div#contenthead,
    div#contentfoot {
        display: none;
    }
    div#sitefunc {
        height: 25px;
        width: 30%;
    }
    div#metanavi {
        height: 25px;
        width: 70%;
    }
    
}
@media (max-width: 1200px) and (min-width: 768px) {}
@media (max-width: 1200px) and (min-width: 650px) {}
@media (max-width: 991px) {
    /* Allgemein */
    div#content,
    div#teaser {
        width: 100%;
    }
    div#teaser {
        margin: 0 30px 40px;
        width: calc(100% - 60px);
    }
    div#content {
        margin: 0;
        margin-bottom: 20px;
    }
    
    div#head a {
        background: #fff;
        position: relative;
    }
    div#head a:before {
        content: "";
        display: block;
        width: 50px;
        height: 100%;
        position: absolute;
        right: 100%;
        background: rgba(255,255,255,0);
        background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }
    
    div#contenthome.alternate {
        padding-right: 30px;
        width: 100%!important;
    }
    
    /* Bausteine */
    .box-wrapper {
        margin: 0;
    }
    h1 + .box-wrapper {
        margin-top: 30px;
    }
    .box-wrapper + .box-wrapper {
        margin-top: 70px;
    }

    /* Startseite */
    div#contenthome {
        width: calc(100% - 100px)!important;
        margin-bottom: 30px;
    }
    
    img#animation {
        top: inherit;
        left: inherit;
        bottom: 15px;
        right: -100px;
    }
    
    /* Contentseite */
    div#content {
        width: calc(100% - 300px)!important;
        margin-left: 23px;
    }
    div#content + div#teaser {
        width: 220px;
        margin-left: 0;
    }
}
@media (max-width: 991px) and (min-width: 768px) {}
@media (max-width: 920px) {
    div#head a img {
        padding-right: 88px;
    }
}
@media (max-width: 840px) {
    div#head {
        background: url(../img/system/home_ohne_text.jpg) 0 0 no-repeat;
        border-radius: 10px 10px 0px 0px;
    }
}
@media (max-width: 767px) {
    div#contenthome {
        background-size:  auto;
        width: 100%!important;
    }
    
    #sitemaphome {
        min-height: inherit;
        display: inline-block;
    }
    
    img#animation {
        display: none;
    }
    
    /* Bausteine */
    .hp-box {
        width: 100%;
    }
    
    .hp-box + .hp-box {
        margin-left: 0 !important;
        margin-top: 40px !important;
    }
    .box-wrapper + .box-wrapper {
        margin-top: 40px !important;
    }
    
    /* Contentseite */
    div#content {
        margin: 0 30px 30px;
        width: calc(100% - 60px)!important;
    }
    div#content + div#teaser {
        margin: 0 30px 40px;
        width: calc(100% - 60px);
    }
}
@media (max-width: 600px) {
    div#head {
        background-position: 65%;
    }
    div#contenthome {
        padding: 30px 0 0;
        background: inherit!important;
        min-height: inherit;
    }
}
@media (max-width: 550px) {
    div#footer {
        padding: 10px 25px;
    }
    div#metanavi,
    div#sitefunc {
        width: 100%;
        height: auto;
    }
    
    div#metanavi span, div#metanavi a, div#sitefunc a {
        width: 100%;
        display: block;
        text-align: center;
        margin: 0!important;
        padding: 5px;
    }
    
    div#metanavi a:before, div#metanavi a + a:before, div#sitefunc a + a:before {
        display: none;
    }
    
    .sitemapbox {
        width: 100%;
    }
    
    /* Kontaktformular */
    input.text, textarea.text, select.text,
    div.radioButtonListWrapper, div.plzort, div.captcha div {
        width: 100%;
    }
    
    .row {
        width: 100%;
    }
    
    fieldset {
        width: 100%;
    }
    input.zipcode {
        width: 25%;
    }
    
    input.city {
        width: 73%;
    }
}
@media (max-width: 500px) {
    body {
        padding: 0;
    }
    div#head {
        background: #fff;
    }
    div#head a.mobile {
        float: inherit;
        text-align: center;
        border-radius: 10px 10px 0px 0px;
    }
    .mobilebutton {
        top: 40px!important;
    }
    .mobilenav-open .mobilebutton {
        top: 27px!important;
    }
    
    div#head a:before {
        display: none;
    }
    div#contenthome {
        padding: 15px !important;
    }
    div#content,
    div#content + div#teaser,
    div#teaser {
        margin: 0 15px 40px;
        width: calc(100% - 30px)!important;
    }
    div#head a img {
        padding: 0;
        float: left;
        border-radius: 10px 10px 0px 0px;
    }
    img.imgleft {
        margin: 0 auto 15px;
        width: 100%;
        max-width: 150px;
        float: none;
        display: block;
    }
    span.fliesstext {
        float: left;
    }
}
@media (max-width: 370px) {
    div#head a.mobile {
        max-width: 190px;
        padding: 17px 0px;
    }
    div#head a img {
        padding: 0;
        width: 100%;
    }

}
@media (max-width: 340px) {
    nav#mobilenav {
        width: 100%;
    }
    .mobilenav-open .mobilebutton {
        right: inherit;
        left: 21px;
    }
    
    /* Kontaktformular */
    .privacy input {
            margin-bottom: 75px;
    }
}


/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

/* Landscape */
@media only screen and (min-device-width: 480px) and (max-device-width: 640px) and (orientation: landscape) {}