@media (min-width: 2000px){
    body{
        max-width: 2000px;
        margin: 0 auto;
    }

    #oben{
        width: 1800px;
    }
}

@media (max-width: 1750px){
    #inhaltsbereich > .frame > .rahmen,
    #footer > .frame > .rahmen,
    #inhaltsbereich > .tx_cn-multicontent > .rahmen,
    #footer > .tx_cn-multicontent > .rahmen {
        max-width: 96%;
        margin: 0 2%;
    }

    #inhaltsbereich > .frame-training > .rahmen {
        gap: 20px;
    }

    #inhaltsbereich > .frame-training .frame-layout-2 a.more{
        padding: 15px;
    }

    h1, h2 {
        font-size: 42px;
    }

    .owl-nav{
        width: 100%;
        text-align: center;
    }
    .owl-prev, .owl-next{
        position: inherit;
    }

    #inhaltsbereich > .frame-training .tx_cn-multicontent {
        padding: 250px 50px 100px;
    }

    #inhaltsbereich > .frame-training > .rahmen {
        justify-content: space-between;
    }
}

@media (max-width: 1550px){
    #oben{
        width: 96%;
        padding: 25px 2% 0;
    }

    ul.ebene1 li a {
        padding: 10px 15px 35px;
    }

    ul.ebene1 li:has(a[title="Arber Radmarathon"]) {
        margin-left: 15px;
    }

    ul.ebene1 > .ifsub > label > .navtoggle, ul.ebene2 > .ifsub > label > .navtoggle {
        margin: 12px 0 0 -15px;
    }

    #header {
        margin-bottom: 75px;
    }
}

@media (max-width: 1500px){
    #inhaltsbereich > .frame-training > .rahmen {
        flex-direction: column;
    }

    #inhaltsbereich > .frame-training > .rahmen > .frame-type-textmedia{
        max-width: 100%;
    }

    #inhaltsbereich > .frame-training:has(.frame-layout-2) > .rahmen::before{
        display: none;
    }

    #inhaltsbereich > .frame-training .tx_cn-multicontent {
        position: relative;
        padding: 150px 0 20px;
        max-width: 100%;
    }
    #inhaltsbereich > .frame-training .owl-dots {
        top: -90px;
    }

    #inhaltsbereich > .frame-training .tx_cn-multicontent::before {
        content: '';
        background: var(--weiss);
        position: absolute;
        left: -5vw;
        top: 0;
        width: 110vw;
        height: 100%;
    }
}

@media (max-width: 1400px){
    .menu-mit-bildern{
        grid-template-columns: repeat(2, minmax(0, 400px));
        justify-content: center;
    }

    #header .ce-bodytext{
        bottom: 200px;
    }

    #header.sub .image-embed-item {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

@media (max-width: 1300px){
   .news .news-list-container .article {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .news-list-container .news-content {
        max-width: 100%;
        z-index: 1;
        margin-bottom: 20px;
    }
}

@media (max-width: 1200px) {
    :root{
        --hoben: 106px
    }

    #oben {
        padding: 10px 2%;
        display: flex;
        justify-content: space-between;
    }

    #oben.scroll{
        margin-top: 0;
    }

    #oben > .frame-type-textmedia img {
        height: 75px;
    }

    #oben > .frame-type-textmedia .ce-gallery{
        margin: 0;
    }

    #oben .infoleiste{
        opacity: 0;
        width: 100%;
        margin-top: 15px;
        justify-content: center;
    }

    #oben .infoleiste .ce-gallery .ce-row:not(:last-child){
       display: none;
    }   

    #oben .hauptnavi{
        margin-top: 0;
    }

    ul.ebene1 {
        display: none;
        box-shadow: 0px 3px 13px var(--cookiemanhellgrau);
    }

    ul.ebene1 > li > a::after {
        left: 5px;
        width: 50px;
        top: 2em;
        bottom: inherit;
    }
    
    label[for="mobnav"] .mob_button {
        display: block;
    }
    
    #mobnav:checked ~ ul.ebene1 {
        display: block;
        text-align: left;
        position: absolute;
        top: var(--hoben);
        right: 0;
        width: calc(100% - 40px);
        padding: 30px 20px 0px 20px;
        background: var(--navbg);
        max-height: calc(100vh - var(--hoben) - 80px);
        overflow: auto;
        max-width: 500px;
    }
    
    ul.ebene1 > li,
    ul.ebene1 > li:last-child {
        display: block;
        /* float: left;
        clear: both; */
        margin: 0 0 5px 0;
        padding: 0 20px;
        width: calc(100% - 40px);
        background: var(--navbg);
        position: relative;
        border-bottom: 1px solid var(--cookiemanhellgrau);
	}
    
    ul.ebene1 > li > a {
        display: block;
        padding: 12px 0;
    }
    
    ul.ebene1 > .ifsub > label {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        z-index: 1;
    }

    ul.ebene1 li:has(a[title="Arber Radmarathon"]) {
        margin-left: 0;
        background: var(--rot);
        border-radius: var(--radius);
    }
    
    ul.ebene1 li.ifsub:hover > .klappnavi {
        display: none;
    }

    .klappnavi {
        position: static;
        /* float: left;
        clear: both; */
        width: 100%;
        margin: 10px 0 !important;
        padding: 0 !important;
    }

    ul.ebene1 li > a:hover, ul.ebene1 li.ifsub:hover{
        text-decoration: none;
    }

    ul.ebene2 {
        display: block;
        width: 100%;
        background-color: var(--cookiemanhellgrau);
    }

    ul.ebene2 > li,
    ul.ebene2 > li:first-child {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        border: 1px solid var(--navischriftfarbe);
    }
    
    ul.ebene2 > li > a {
        display: block;
        padding: 10px 20px;
    }
    
    .ebene1 li.ifsub input[name="togglesub"]:checked + a + label + .klappnavi {
      display: block;
    }

    ul.ebene1 > .ifsub > label > .navtoggle, ul.ebene2 > .ifsub > label > .navtoggle {
        margin: 0;
    }

    #header.sub {
        margin-bottom: 10px;
    }

    #header .ce-gallery,
    #header .ce-gallery .ce-column,
    #header .ce-gallery .ce-column .image{
        width: 100%;
    }

    #header .ce-bodytext{
        left: 5%;
        width: 90%;
        z-index: 2;
    }

    #header .ce-bodytext strong {
        font-size: 60px;
    }

    #inhaltsbereich > .frame + .frame {
        margin-top: 100px;
    }

    #inhaltsbereich .zahnrad {
        width: 320px;
        height: 560px;
        bottom: -15%;
    }

    h1, h2 {
        font-size: 42px;
        margin-bottom: 18px;
    }

    h2.folgt {
        font-size: 24px;
        margin-bottom: 20px;
    }

    #inhaltsbereich .frame:not(.frame-bildaussen) .ce-gallery,
    #inhaltsbereich .frame:not(.frame-bildaussen) .ce-bodytext{
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .ce-intext.ce-left .ce-gallery {
        margin-right: 40px;
    }
    .ce-intext.ce-right .ce-gallery {
        margin-left: 40px;
    }

    #inhaltsbereich > .frame-kacheln > .rahmen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1020px){
    :root{
        --cn_multifaktor3: 0;
        --cn_multifaktor4: 0;
        --cn_multibreite20: calc(100% / 2);
        --cn_multibreite25: calc(100% / 2);
        --cn_multibreite33: 100%;
        --cn_multibreite40: 100%;
        --cn_multibreite50: 100%;
        --cn_multibreite60: 100%;
        --cn_multibreite66: 100%;
        --cn_multibreite75: 100%;
        --cn_multibreite80: 100%;
    }

    #header .ce-bodytext {
        font-size: 30px;
        line-height: normal;
    }

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

    .frame-training h2 {
        font-size: 32px;
    }

    #inhaltsbereich > .frame-training .tx_cn-multicontent .col- > .frame-type-shortcut .frame-type-textmedia header span:last-child {
        font-size: 26px;
        padding-left: 40px;
    }

    #inhaltsbereich > .frame-training .tx_cn-multicontent .col- > .frame-type-shortcut > .rahmen {
        gap: 20px;
    }

    #inhaltsbereich > .frame-training .owl-dots {
        gap: 0;
    }

    .news-single .article .news-text-wrap,
    .news-single .article .news-img-wrap,
    .news-single .article .news-backlink-wrap{
        float: left !important;
        clear: both;
        width: 100% !important;
        margin: 0 !important;
    }

    #footer {
        margin-top: 160px;
    }

    #footer .tx_cn-columns .row{
        display: flex;
        flex-wrap: wrap;
        gap: 40px 20px;
    }

    #footer .tx_cn-columns .row .col-33 {
        width: calc(50% - 10px);
    }
}

@media (max-width: 800px){
   #header::after{
        display: none;
   } 
}

@media (max-width: 750px){
    #inhaltsbereich > .frame-training .tx_cn-multicontent .col- > .frame-type-shortcut > .rahmen {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .menu-mit-bildern{
        grid-template-columns: repeat(1, minmax(0, 400px));
    }

    .article h3 a{
        font-size: 24px;
    }

    #inhaltsbereich .zahnrad {
        width: 230px;
        height: 460px;
        bottom: -15%;
    }

    #inhaltsbereich > .frame-training .tx_cn-multicontent {
        padding: 200px 0 20px;
    }

    #inhaltsbereich > .frame-training .owl-dots{
        gap: 10px;
        flex-direction: column;
        top: -170px;
    } 

    #inhaltsbereich > .frame-kacheln > .rahmen {
        grid-template-columns: 1fr;
    }

    .frame-kacheln .frame h3 {
        font-size: 24px;
    }

    .frame-kacheln .frame strong {
        font-size: 18px;
    }

    .frame-bildaussen .ce-textpic{
        grid-template-columns: auto;
    }

    .frame-bildaussen .ce-textpic  .ce-gallery{
        max-width: 500px;
    }

    .frame-bildaussen .ce-textpic .ce-bodytext{
        max-width: 100%;
    }

    #inhaltsbereich .frame .ce-textpic.ce-intext{
        opacity: 0;
    }
}

@media (max-width: 699px){
    .frame-type-news_pi1 + .frame-type-news_pi1{
        margin-top: 10px;
    }
}

@media (max-width: 650px){
    :root{
        --cn_multibreite20: 100%;
        --cn_multibreite25: 100%;
        --hoben: 106px
    }

    #header .ce-bodytext {
        display: none;
    }

    #header{
        margin-top: var(--hoben);
    }

    #footer .tx_cn-columns .row{
        display: block;
    }

    #footer .tx_cn-columns .row .col-33 {
        width: 100%;
        margin: 10px 0;
    }
}

@media (max-width: 400px){
    #oben{
        align-items: center;
    }

    #oben.scroll{
        align-items: end;
    }

    #oben > .frame-type-textmedia img {
        height: 70px;
    }

    #oben .infoleiste .ce-gallery .ce-row {
        margin-right: 20px;
    }

    .ui-accordion-header {
        font-size: 16px;
    }

    #footer {
        margin-top: 60px;
    }

    #footer > div:last-child.frame-type-textmedia .ce-textpic{
        flex-direction: column;
        align-items: center;
    }
}