@media (max-width: 1400px) {

    #navigation ul.hnavi > li {
        font-size: 16px;
    }
}

@media (max-width: 1280px) {

    #top {
        padding: 0 5% 10px;
        max-height: 100%;
        overflow: auto;
    }

    #top.scrolled #logo img {
        height: 69px;
        width: 370px;
    }

    #top.scrolled #navigation {
        margin-top: 0;
    }

    #navigation .mob_button {
        display: block;
    }

    #navigation {
        float: left;
        clear: both;
        width: 100%;
        margin-top: 0;
    }

    #navigation .hnavi {
        display: none;
        margin-top: 20px;
        float: left;
        clear: both;
        width: 100% !important;
    }

    #navigation .hnavi > .li-row {
        float: left;
        clear: both;
        width: 100%;
    }

    #navigation .hnavi > li.ifsub,
    #navigation .hnavi > .li-row > li.ifsub {
        float: left;
        width: 49.5%;
        margin-left: 0;
        margin-bottom: 10px;
    }

    #navigation .hnavi > li.ifsub:nth-child(even),
    #navigation .hnavi > .li-row > li.ifsub:nth-child(even) {
        float: right;
    }

    #navigation .hnavi > li.ifsub > a,
    #navigation .hnavi > .li-row > li.ifsub > a {
        display: block;
        padding: 10px 15px;
        background: rgba(47,65,75,0.1);
        color: #2f414b;
    }

    #navigation .hnavi > li.act.ifsub > a,
    #navigation .hnavi > .li-row > li.act.ifsub > a,
    #navigation .hnavi > li[data-toggled="on"] > a,
    #navigation .hnavi > .li-row > li[data-toggled="on"] > a {
        background: #2f414b;
        color: #FFFFFF;
    }

    #navigation .hnavi > li.act.ifsub[data-toggled="off"] > a,
    #navigation .hnavi > .li-row > li.act.ifsub[data-toggled="off"] > a {
        background: rgba(47,65,75,0.6);
        color: #FFFFFF;
    }

    #navigation ul.hnavi > li.ifsub > .unavi,
    #navigation ul.hnavi > .li-row > li.ifsub > .unavi {
        display: none;
    }

    #navigation ul.hnavi > li.ifsub > .unavi,
    #navigation ul.hnavi > .li-row > .unavi {
        position: static;
        width: calc(100% - 30px);
        padding: 15px 15px;
        float: left;
        clear: both;
        margin-bottom: 10px;
        background: #2f414b;
        color: #FFFFFF;
        display: none;
    }

    /* #navigation ul.hnavi > .li-row > .unavi {
        display: block;
    } */

    #navigation ul.hnavi > .li-row > .unavi > ul {
        display: inline-grid;
        grid-template-columns: auto auto 1fr;
        /* grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr); */
        grid-column-gap: 50px;
        grid-row-gap: 10px;
    }

    #navigation ul.hnavi > .li-row > .unavi > ul > li > a {
        color: #FFFFFF;
        display: block;
        padding: 10px 0;
    }

    #navigation ul.hnavi > .li-row > .unavi > ul > li.act > a {
        color: #97c62d;
        font-weight: 700;
    }
    
    #header::after {
        width: 50%;
        height: 105%;
    }

}

@media (max-width: 1100px) {
    
    #inhaltsbereich > .frame > .rahmen {
        width: 100%;
        left: auto;
        margin-left: 0px;
    }

    .tx_cn-columns[data-cols="5"] .row > div,
    .tx_cn-columns[data-cols="4"] .row > div {
        width: 25%;
    }

    #inhaltsbereich .frame-layout-1 {
        background-attachment: scroll;
    }

}

@media (max-width: 1024px) {
    
    body {
        font-size: 16px;
    }

    #navigation ul.hnavi .unavi {
        font-size: 16px;
    }

    #subnavigation {
        position: absolute;
        top: 110px;
        bottom: auto;
    }

    #subnavigation .mob_button {
        display: block;
        left: auto;
        right: 0;
        top: 0;
        width: 70px;
        background: #2f414b;
    }

    #subnavigation ul li {
        float: left;
    }

    #subnavigation .mob_button span {
        left: 12px;
    }

    #subnavigation .mob_button span,
    #subnavigation .mob_button span::after,
    #subnavigation .mob_button span::before {
        background-color: #FFFFFF;
    }

    #subnavigation .mobnavvisible.mob_button  {
        background: none;
    }

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

    #subnavigation .snavi {
        float: left;
        width: calc(100% - 60px) !important;
        display: none;
        /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 10px; */
    }

    #subnavigation ul li {
        margin: 5px;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages {
        width: 90%;
        padding: 0 0 0 0;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mob_button {
        display: block;
        left: auto;
        right: 0;
        top: 0;
        width: 70px;
        background: #2f414b;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul li {
        float: left;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mob_button span {
        left: 12px;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mob_button span,
    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mob_button span::after,
    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mob_button span::before {
        background-color: #FFFFFF;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mobnavvisible.mob_button  {
        background: none;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages .mobnavvisible.mob_button span {
        background-color: transparent;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul {
        float: left;
        width: calc(100% - 60px) !important;
        display: none;
        /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 10px; */
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul li {
        margin: 5px;
    }

    .katalog{
        height: 500px;
    }
}

@media (max-width: 920px) {

    .tx_cn-columns[data-cols="4"] .row > div,
    .tx_cn-columns[data-cols="3"] .row > div {
        width: 33%;
    }

    #footer > .frame {
        width: 100%;
        clear: both;
        text-align: center;
        margin-bottom: 30px;
    }

    #footer > .footernavi {
        float: left;
        margin-right: 0;
    }
}

@media (max-width: 900px) {

    /* #navigation ul.hnavi > .li-row > .unavi > ul {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-column-gap: 20px;
    } */

    #inhaltsbereich .ce-gallery.ce-gallery-resp {
        max-width: 50%;
    }

    .col-50 .contenttable,
    .col-50 .contenttable tbody,
    .col-50 .contenttable tr,
    .col-50 .contenttable td {
        float: left;
        clear: both;
        width: 100%;
        text-align: left;
    }

    .col-50 .contenttable tr {
        padding: 5px 10px;
        width: calc(100% - 20px);
    }

    .col-50 .contenttable td {
        padding: 0 0 0 0;
        margin-bottom: 5px;
    }

    .col-50 .contenttable td:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 850px) {
    .frame-type-news_pi1 .news-latest-container {
        display: block;
        float: left;
        clear: both;
        width: 100%;
    }

    .frame-type-news_pi1 .news-latest-container .article {
        float: left;
        clear: both;
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px dotted #97c62d;
    }

    .frame-type-news_pi1 .news-latest-container .article:first-child {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    .frame-type-news_pi1 .news-latest-container .article h3 {
        margin-top: 0;
    }

    .frame-kundenportal .tx_cn-columns[data-cols="2"] .col-50 {
        float: left;
        clear: both;
        width: 100%;
    }

    .frame-kundenportal .tx_cn-columns[data-cols="2"] .col-50:last-child {
        margin-top: 100px;
    }

    .frame-kundenportal .tx_cn-columns[data-cols="2"] .col-50 * {
        text-align: left;
    }

    .frame-kundenportal .tx_cn-columns[data-cols="2"] .row > div:nth-child(even) > div {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .frame-kundenportal .tx_cn-columns[data-cols="2"] .row > div:nth-child(odd) > div {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 820px) {

    #modulwohinmit {
        width: 90%;
        left: 0;
        margin: 0;
        padding: 30px 5%;
        z-index: 0;
    }

    #inhaltsbereich > .frame.frame-hl-left header,
    #inhaltsbereich > .frame.frame-hl-left .ce-textpic {
        width: 100%;
        float: left;
    }

    .tx_cn-columns[data-cols="3"] .row > div,
    .tx_cn-columns[data-cols="2"] .row > div {
        width: 50%;
        margin-bottom: 50px;
    }

    .news-latest-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
    
    #inhaltsbereich .wide-table {
        overflow-x: auto;
        width: 100%;
    }
    
    #inhaltsbereich .wide-table .table-note {
        margin-bottom: 15px;
        display: block;
        font-style: italic;
    }

    #inhaltsbereich .wide-table table.contenttable {
        overflow-x: auto;
    }

}

@media (max-width: 800px) {
    .wide-table > .contenttable th {
        white-space: nowrap;
    }

    .wide-table > .contenttable td,
    .wide-table > .contenttable th {
        padding: 3px 20px !important;
        text-align: right;
    }
}

@media (max-width: 790px) {
    #navigation ul.hnavi > .li-row > .unavi > ul {
        /* display: block; */
        grid-template-columns: auto 1fr;
    }

    #inhaltsbereich .tx_cn-multicontent .owl-carousel {
        width: 90%;
        left: 5%;
    }

    .tx_cn-multicontent .owl-carousel .owl-nav > button {
        left: -9%;
    }

    .tx_cn-multicontent .owl-carousel .owl-nav > button.owl-next {
        right: -9%;
    }

    #inhaltsbereich .news-list-container .news-content {
        width: 100%;
    }

    #inhaltsbereich .news-list-container .news-img-wrap {
        position: static;
        float: left;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-top: 30px;
    }
}

@media (max-width: 740px) {
    #inhaltsbereich .frame-bildteaser {
        margin-top: -50px;
        padding-top: 0;
    }

    #inhaltsbereich .frame-bildteaser .ce-gallery .ce-column {
        display: none
    }
    
    #inhaltsbereich .frame-bildteaser .ce-gallery .ce-column:last-child{
        display: block;
    }

    #inhaltsbereich .frame-bildteaser .ce-gallery .ce-row {
        justify-content: center;
    }

    #inhaltsbereich .frame-bildteaser .ce-bodytext {
        width: 100%;
    }

    #inhaltsbereich .frame-bildteaser .ce-bodytext .text-right {
        text-align: center;
    }

    #inhaltsbereich .frame-bildteaser h2 {
        text-align: center;
    }

    .frame-veranstaltung .rahmen {
        flex-direction: column;
    }

    .frame-veranstaltung .rahmen > header{
        width: calc(100% - 40px);
    }

    .frame-veranstaltung .rahmen > header + .ce-textpic{
        width: 100%;
    }
}

@media (max-width: 650px) {
    #fadein-box {
        position: absolute;
        bottom: auto;
        top: 15vh;
    }

    #inhaltsbereich > .frame {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .news-list-container {
        margin-top: 0;
    }

    .news-single .news-img-wrap {
        float: left;
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }

}

@media (max-width: 600px) {
    #header {
        margin-top: 80px;
    }
    
    #navigation ul.hnavi > .li-row > .unavi > ul {
        grid-column-gap: 30px;
    }

    #inhaltsbereich > .frame {
        padding: 50px 5%;
    }

    #inhaltsbereich .frame-kundenportal{
        padding: 50px 15px;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 18px;
    }

    .tx_cn-columns .row + .row {
        margin-top: 0 ;
    }

    .tx_cn-columns[data-cols="3"] .row > div,
    .tx_cn-columns[data-cols="2"] .row > div {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .tx_cn-columns[data-cols="3"] .row > div > div,
    .tx_cn-columns[data-cols="2"] .row > div > div {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
    }

    .tx_cn-columns[data-cols="3"] .row > div > .frame-layout-2,
    .tx_cn-columns[data-cols="2"] .row > div > .frame-layout-2,
    .tx_cn-columns[data-cols="3"] .row > div > .frame-layout-3,
    .tx_cn-columns[data-cols="2"] .row > div > .frame-layout-3 {
        width: 90% !important;
    }

    .news-latest-container {
        display: block;
    }

    .tx_cn-columns[data-cols="3"] .row > div,
    .tx_cn-columns[data-cols="2"] .row > div {
        margin-bottom: 0;
        height: auto !important;
    }

    .tx_cn-multicontent:not(.frame-kacheln) .tx_cn-columns .row > div, 
    .news-latest-container .article {
        margin-top: 50px;
    }

    .tx_cn-multicontent:not(.frame-kacheln) .tx_cn-columns .row:first-child > div:first-child, 
    .news-latest-container .article:first-child {
        margin-top: 0;
    }

    .tx-powermail .powermail_fieldset > .powermail_fieldwrap > label {
        width: 100%;
        margin-top: 0;
    }

    .tx-powermail .powermail_fieldset > .powermail_fieldwrap > .powermail_field {
        width: 100%;
        float: right;
    }

    #inhaltsbereich .news-list-container .news-img-wrap img {
        max-width: 100%;
    }

    /* div:not(.wide-table) > .contenttable,
    div:not(.wide-table) > .contenttable tbody,
    div:not(.wide-table) > .contenttable tr,
    div:not(.wide-table) > .contenttable td,
    div:not(.wide-table) > .contenttable tr > th {
        float: left;
        clear: both;
        width: 100%;
    }

    div:not(.wide-table) > .contenttable tr {
        padding: 5px 10px;
        width: calc(100% - 20px);
    }

    div:not(.wide-table) > .contenttable td,
    div:not(.wide-table) > .contenttable tr > th {
        padding: 0 0 0 0;
        margin-bottom: 5px;
        text-align: left;
    }

    div:not(.wide-table) > .contenttable td:last-child {
        margin-bottom: 0;
    } */

    #inhaltsbereich .owl-nav {
        display: none;
    }

    .cn_multicontent_teaser .contenttable,
    .cn_multicontent_teaser .contenttable tbody,
    .cn_multicontent_teaser .contenttable tr,
    .cn_multicontent_teaser .contenttable td {
        float: left;
        clear: both;
        width: 100%;
        text-align: left;
    }

    .cn_multicontent_teaser .contenttable tr{
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    .cn_multicontent_teaser .contenttable td{
        padding: 0;
    }

}

@media (max-width: 510px) {
    .matomoiframe {
        height: 250px !important;
    }
}

@media (max-width: 500px) {

    #top.scrolled #logo img,
    #logo img {
        width: 80%;
    }

    #navigation .hnavi > li.ifsub, 
    #navigation .hnavi > .li-row > li.ifsub {
        width: 100%;
    }

    #navigation .hnavi > li.ifsub + .unavi, 
    #navigation .hnavi > .li-row > li.ifsub + .unavi {
        margin-top: -7px;
    }

    #subnavigation .snavi {
        width: 100% !important;
        margin-top: 50px;
    }

    #subnavigation ul li {
        margin: 5px;
        width: calc(50% - 10px);
    }

    #subnavigation ul li a {
        padding: 10px;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul {
        width: 100% !important;
        margin-top: 50px;
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul li {
        margin: 5px;
        width: calc(50% - 10px);
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul li a {
        padding: 10px;
    }

    #modulwohinmit {
        padding: 10px 5%;
    }

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 26px;
    }

    #inhaltsbereich .ce-intext .ce-gallery,
    #inhaltsbereich .ce-intext .ce-bodytext {
        float: left;
        clear: both;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    #inhaltsbereich .frame-veranstaltung table tr{
        margin: 5px;
        float: left;
        clear: both;
        width: 100%;
    }

    #inhaltsbereich .frame-veranstaltung table td{
        float: left;
        clear: both;
        width: 100%;
        padding: 0;
    }

}

@media (max-width: 450px) {
    .matomoiframe {
        height: 350px !important;
    }

    #navigation ul.hnavi > .li-row > .unavi > ul {
        display: block; 
    }

}

@media (max-width: 420px) {
    #subnavigation ul li {
        margin: 5px 10px;
        width: calc(100% - 20px);
    }

    #inhaltsbereich .frame-kundenportal.frame-type-menu_pages ul li {
        margin: 5px 10px;
        width: calc(100% - 20px);
    }
}

@media (max-width: 370px) {
    h1 {
        word-break: break-word;
    }
}