@media (hover: none) {
   
}


@media (max-width: 1360px){
    .hnavi > li + li {
        margin-left: 20px;
    }

    .hnavi li.termin a::after{
        display: none;
    }
}

@media (max-width: 1230px){
    .hnavi li.termin {
        right: -40%;
    }
}

@media (max-width: 1200px) {
   /* -- mobile Navi -- */
    .mob_button {
        position: absolute;
        right: calc(50% - 30px);
        top: 10px;
        z-index: 5;
        margin: 0;
        width: 60px;
        height: 60px;
        cursor: pointer;
        transition: var(--standardtransition);
    }

    .mob_button span {
        background-color: var(--weiss);
        height: 3px;
        left: 7px;
        margin-top: -1px;
        position: absolute;
        top: 50%;
        width: 45px;
        transition: all 0.3s ease 0.3s;
    }

    .mob_button span::after, .mob_button span::before {
        backface-visibility: hidden;
        background-color: var(--weiss);
        content: "";
        height: 3px;
        position: absolute;
        transform: translateZ(0px);
        transition: all 0.3s ease 0.3s;
        width: 100%;
        display: block;
    }

    .mob_button span::before {
        transform: translateY(-12px);
    }

    .mob_button span::after {
        transform: translateY(12px);
    }

    .mobnavvisible.mob_button span {
        background-color: transparent;
    }

    .mobnavvisible.mob_button span::before {
        transform: translateY(0px) rotate(-45deg);
    }

    .mobnavvisible.mob_button span::after {
        transform: translateY(0px) rotate(45deg);
    }
    /* -- mobile Navi -- */

    #oben.scroll,
    #oben.leer,
    #oben{
        padding: 25px 1% 0;
        width: 98%;
    }

    #oben::before{
        opacity: 100%;
    }

    #oben::after{
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        background: var(--weiss);
        left: 0;
        top: 75px;
        transition: var(--standardtransition);
    }

    #oben.mobnavvisible::after{
        width: 100%;
    }

    .hnavi li.termin {
        display: n;
    }

    .hnavi{
        display: none;
        position: relative;
        width: 90%;
        max-width: 600px;
        margin: 0 calc(50% - 300px);
    }

    .hnavi > li{
        float: left;
        clear: both;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid var(--grau);
        position: relative;
    }

    .hnavi li.ifsub::after{
        content: '';
        position: absolute;
        width: 30px;
        height: 30px;
        background: url(/fileadmin/cn_website/images/next.svg) center center/contain no-repeat;
        right: 0;
        top: 8px;
        transition: var(--standardtransition);
    }

    .hnavi li.ifsub.open::after{
        transform: rotate(90deg);
    }

    .hnavi > li + li{
        margin: 0;
    }

    .hnavi > li:not(.termin) > a{
        margin-left: 0;
        width: 100%;
    }

    .hnavi li.termin {
        display: none;
    }

    #oben.mobnavvisible::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        background: var(--linkfarbe);
        opacity: 100%;
        top: 0;
        left: 0;
        transition: var(--standardtransition);
        box-shadow: 0 0 0 1px var(--grau);
    }

    .hnavi li.ifsub > a{
        transition: var(--standardtransition);
    }

/*     .hnavi li.ifsub.open > a{
        color: var(--grau);
    }
 */
    .hnavi li.ifsub.open .unavi{
        display: block;
    }

    .hnavi li.ifsub .unavi {
        top: 0;
        position: relative;
        float: left;
        clear: both;
        width: 100%;
        left: 0;
        border-bottom: none;
    }

    .hnavi li.ifsub[data-toggled="off"] .unavi{
        display: none;
    }

    .hnavi li.ifsub[data-toggled="on"] .unavi{
        display: block;
    }

    .unavi::before{
        display: none;
    }

    .unavi li{
        margin-left: 20px;
        width: calc(100% - 20px);
        width: 100%;
    }
}

@media (max-width: 1199px){
    #inhaltsbereich .frame-intro .ce-bodytext{
        position: absolute;
        left: 40%;
        top: 180px;
        background: rgba(255,255,255,80%);
        padding: 40px;
        width: calc(60% - 80px);
    }
}

@media (max-width: 1110px){
    .hnavi li.termin {
        right: -30%;
    }

    .down{
        display: none;
    }
}

@media (max-width: 1060px){
    #header .frame-default .ce-bodytext{
        width: 96%;
        left: 2%;
    }
}

@media (max-width: 990px){   
    .mob_button{
        right: 2%;
    }

    #header:not(.sub) .frame-termin{
        right: 2%;
        padding: 5px 15px;
        bottom: 0;
        border: 1px solid var(--weiss);
    }

    #header:not(.sub) .frame-termin .ce-textpic{
        display: flex;
        align-items: center;
    }

    #header:not(.sub) .frame-termin p{
        margin: 0;
    }
    
    #header:not(.sub) .frame-termin .ce-gallery img{
        max-width: 40px;
    }

    #header .frame-default .ce-bodytext i {
        font-size: 70px;
    }

    #header .frame-default .ce-bodytext {
        font-size: 40px;
    }

    h1, h2{
        font-size: 40px;
    }
    
    #inhaltsbereich.sub h1,
    #inhaltsbereich.sub h2{
        font-size: 60px;
        line-height: 50px;
    }
    
    #inhaltsbereich.sub h3,
    #inhaltsbereich.sub .ce-bodytext h2,
    h3{
        font-size: 28px;
    }
    
    h4{
        font-size: 20px;
    }

    #inhaltsbereich > .frame {
        margin-bottom: 40px;
    }

    .frame-kacheln .ce-bodytext {
        width: calc(90% - 40px);
        padding: 20px 20px;
        margin: 0 5%;
        font-size: 20px;
    }

    .frame-kacheln .ce-bodytext strong {
        font-size: 45px;
    }

    .owl-nav{
        float: left;
        clear: both;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    .owl-prev, .owl-next{
        position: inherit;
        float: none;
        display: inline-block;
    }

    .frame-banner .ce-bodytext {
        font-size: 40px;
    }

    .frame-banner .ce-bodytext i {
        font-size: 60px;
        line-height: 30px;
        margin-top: 20px;
        float: left;
        clear: both;
        width: 100%;
    }

    #inhaltsbereich > .frame-default .ce-intext{
        display: flex;
        flex-direction: column-reverse;
    }

    .frame-default .ce-intext .ce-gallery{
        margin: 0;
    }

    .frame-default .tx_cn-columns .row .col-15,
    .frame-default .tx_cn-columns .row .col-15 > div,
    .frame-default .tx_cn-columns .row .col-20,
    .frame-default .tx_cn-columns .row .col-20 > div,
    .frame-default .tx_cn-columns .row .col-25,
    .frame-default .tx_cn-columns .row .col-25 > div,
    .frame-default .tx_cn-columns .row .col-33,
    .frame-default .tx_cn-columns .row .col-33 > div,
    .frame-default .tx_cn-columns .row .col-66,
    .frame-default .tx_cn-columns .row .col-66 > div,
    .frame-default .tx_cn-columns .row .col-75,
    .frame-default .tx_cn-columns .row .col-75 > div,
    .frame-default .tx_cn-columns .row .col-80,
    .frame-default .tx_cn-columns .row .col-80 > div,
    .frame-default .tx_cn-columns .row .col-85,
    .frame-default .tx_cn-columns .row .col-85 > div{
        float: left;
        clear: both;
        width: 100%;
        margin: 0 !important;
    }


    .frame-default .tx_cn-columns .row > .col-15 + div,
    .frame-default .tx_cn-columns .row > .col-20 + div,
    .frame-default .tx_cn-columns .row > .col-25 + div,
    .frame-default .tx_cn-columns .row > .col-33 + div,
    .frame-default .tx_cn-columns .row > .col-66 + div,
    .frame-default .tx_cn-columns .row > .col-75 + div,
    .frame-default .tx_cn-columns .row > .col-80 + div,
    .frame-default .tx_cn-columns .row > .col-85 + div{
        margin-top: 40px !important;
    }

    .ce-above .ce-gallery {
        margin: 0 0 20px 0;
    }

}

@media (max-width: 850px){
    #inhaltsbereich .frame-intro .ce-bodytext{
        position: inherit;
        float: left;
        clear: both;
        width: 100%;
        padding: 0;
        margin-bottom: 60px;
    }

    #inhaltsbereich .frame-intro .ce-gallery{
        float: left;
        clear: both;
        width: 100%;
        margin: 0;
    }

    #footer .frame-default .tx_cn-columns .row .col-33,
    #footer .frame-default .tx_cn-columns .row .col-33 > div{
        float: left;
        clear: both;
        width: 100%;
        margin: 0;
    }

    #footer .frame-default .tx_cn-columns .row > div + div{
        margin-top: 20px !important;
    }
}
/* Umbruch mobil */
@media (max-width: 832px){
    #inhaltsbereich .frame-intro {
        margin-top: 0 !important;
    }

    #oben.leer + #header + #inhaltsbereich {
        margin-top: 85px;
    }
}

@media (max-width: 750px){
    .frame-leistungen .row > div {
        margin: 10px;
    }

    #header .frame-default .ce-bodytext {
        font-size: 30px;
    }

    #header:not(.sub) .frame-default .ce-bodytext i {
        font-size: 60px;
    }

    .frame-default .tx_cn-columns .row .col-40,
    .frame-default .tx_cn-columns .row .col-50 > div,
    .frame-default .tx_cn-columns .row .col-50,
    .frame-default .tx_cn-columns .row .col-50 > div,
    .frame-default .tx_cn-columns .row .col-60,
    .frame-default .tx_cn-columns .row .col-60 > div{
        float: left;
        clear: both;
        width: 100%;
        margin: 0;
    }

    .frame-default .tx_cn-columns .row > div + div{
        margin-top: 30px !important;
    }
}

@media (max-width: 700px){
    .hnavi{
        width: calc(100% - 60px);
        margin: 0 30px;
        left: 0;
    }
    #header .frame-default .ce-gallery img {
        object-position: 70%;
    }

    .frame-slider .ce-gallery,
    .frame-slider .ce-bodytext{
        float: left;
        clear: both;
        width: 100%;
        position: inherit;
        height: auto;
        display: block;
        padding: 0;
        max-width: 100%;
        margin: 0;
    }

    .frame-slider .ce-textpic.ce-left .ce-bodytext{
        padding: 0;
    }

    .frame-kacheln .row + .row{
        margin: 0;
    }

    .frame-kacheln .tx_cn-columns .row .col-50{
        width: 100%;
        float: left;
        margin-top: 80px !important;
    }

    .frame-kacheln .tx_cn-columns .row .col-50 > div{
        width: 100%;
        float: left;
        margin: 0 !important;
    }

    .frame-banner .ce-bodytext{
        left: 5%;
        width: 90%;
    }

    .frame-banner .ce-textpic::before {
        width: 100%;
        right: 0;
    }

    .frame-banner .ce-gallery{
        position: absolute;
    }
    .frame-banner .ce-bodytext{
        position: inherit;
        padding: 40px 0;
    }

    #inhaltsbereich .frame-layout-40{
        padding: 60px 0;
    }

    #footer .tx_cn-columns .row .col-33,
    #footer .tx_cn-columns .row .col-33 > div{
        float: left;
        clear: both;
        width: 100%;
        margin: 0;
    }

    #footer .tx_cn-columns .row .col-33 + .col-33{
        border-top: 1px solid var(--grau);
        margin-top: 10px;
        padding-top: 20px;
    }
}

@media (max-width: 600px){

    html, body{
        font-size: 16px;
    }

    .frame-slider .ce-bodytext,
    #inhaltsbereich .frame-layout-40 {
        font-size: 30px;
    }

    #header .frame-default .ce-bodytext {
        background: var(--linkfarbe);
        padding: 20px 20px 60px;
        width:calc(100% - 40px);
        left: 0;
        bottom: 0;
        position: inherit;
    }

    #header::after {
        display: none;
    }

    #header::before {
        content: '';
        height: 80px;
        background: rgb(50,53,53);
        background: linear-gradient(0deg, rgba(50,53,53,0) 0%, rgba(50,53,53,0.9) 90%);
    }

/*     #oben::before,
    #oben.scroll::before,
    #oben.leer::before{
        height: 80px;
    }
 */
    /* #header:not(.sub) .frame-termin {
        bottom: 44%;
        right: unset;
        left: calc(50% - 148px);
    } */

    /* #header:not(.sub) .frame-default .ce-gallery img {
        object-position: center -15vh;
    } */

    #header .frame-default .ce-bodytext {
        font-size: 30px;
    }

    #header:not(.sub) .frame-default .ce-bodytext i{
        font-size: 70px;
    }
}

@media (max-width: 400px){
    #oben .frame-default img{
        max-width: 240px;
        height: auto;
    }

    #header .frame-termin{
        bottom: 50%
    }

    .hnavi > li:not(.termin) > a{
        margin-left: 0;
    }

    .hnavi li.termin{
        left: 60px;
    }
}