/* ######################### */
/* remove me */
/* ######################### */
@media all {
    .grid-overlay {
        display: none;
    }
    
    .grid-overlay-inner,
    .grid-overlay-outer,
    .grid-overlay-max {
        position: fixed;
        top: 0;
        right: var(--gap-5);
        left: var(--gap-5);
        height: 0;
        z-index: 1200;
        opacity: .1;
        pointer-events: none;
        max-width: calc(var(--width-content) - 2 * var(--gap-5));
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--gap-5);
    }

    .grid-overlay span {
        height: 100vh;
    }

    .grid-overlay-inner span {
        background-color: var(--color-secondary);
    }

    .grid-overlay-outer {
        max-width: calc(var(--width-content-xl) );
        display:flex;
        justify-content: space-between;
    }

    .grid-overlay-outer span{
        width:0;
        border: .0625rem solid var(--color-primary);
    }

}

/* beginning template styles page */

/* ######################### */
/* basic */
/* ######################### */
@media all {
    html {
        background-color: var(--bs-gray-200);
    }

    body {
        margin: 0 auto;
    }
    
    .mfp-close-btn-in .mfp-close {
        opacity: 1;
        right:0;
        text-shadow: 0 0 .5rem rgb(255,255,255);
    }
    
    .mfp-container {
        padding: 0;
    }
}

/* ######################### */
/* page-header */
/* ######################### */
@media all {
    .page {
        overflow-x: hidden;
    }
    
    .page-header-sticky {
        --min-window-height-px: 460;
        padding-top: calc(var(--height-logo) + var(--padding-logo) * 2);
    }

    .page-header-sticky .page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030
    }

    .page-header {
        margin: 0 auto;
    }

    .page-header-bg {
        transition: var(--transition-default);
        transition-property: padding;
        background: var(--color-page-header-bg);
    }

    .page-scrolled .page-header-bg {
        backdrop-filter: blur(var(--backdrop-filter));
        -webkit-backdrop-filter: blur(var(--backdrop-filter));
        background: var(--color-page-header-bg-scrolled);
    }

    .page-header-logo {
        max-width: 100%;
        height: var(--height-logo);
        padding: var(--padding-logo) 0;
        box-sizing: content-box;
    }

    .page-scrolled .page-header-logo {
        padding: calc(var(--padding-logo) / 2) 0;
    }

    .page-header-logo-link,
    .page-header-logo-img {
        display: block;
        max-width: 100%;
        width: auto;
        height: 100%;
    }

    .navbar {
        position: static;
    }

    .page-header-searchbox {
        position: absolute;
        top:100%;
        right: var(--gap-5);
        left: var(--gap-5);
        z-index: 100;
    }

}

@media(min-width: 48rem) {

    .navbar {
        position: relative;
    }

    .page-header-searchbox {
        width: 16rem;
        top: auto;
        right: calc(100% + .25em);
        left: auto;
    }

    .page-header-searchbox-dummy {
        height: 3.375rem
    }

    .page-header-searchbox {
        transform: translateY(0)
    }

    .page-header-sticky {
        --min-window-height-px: 600
    }

    .page-header-sticky .top-menu {
        height: 2.5rem
    }

    .page-header-sticky .top-menu,
    .page-header-sticky .page-header-logo {
        transition: all .25s ease-in-out
    }

    .page-header-sticky.page-scrolled .top-menu {
        height: 0;
        padding: 0;
        opacity: 0;
        overflow: hidden
    }

}

@media(min-width: 62rem) {
    .page-header-sticky .page-header-navigation {
        overflow: visible;
    }

    .page-header-sticky {
        --min-window-height-px: 760;
    }
}

/* ######################### */
/* page-stage */
/* ######################### */
@media all {
    .page-stage .ce-element {
        margin: 0;
    }

    .page-stage-two-cols {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        background-color: rgba(var(--color-bg-dark-rgb), .05);
        width: 100%;
    }

    .page-stage-left {
        padding: var(--gap-5);
    }

    .page-stage-right {
        width: 100%;
    }
}

@media (min-width: 62rem) {
    .page-stage-two-cols {
        display: flex;
        align-items: center;
        flex-direction: row;
        background-color: rgba(var(--color-bg-dark-rgb), .05);
        gap: var(--gap-5);
        width: 100%;
    }

    .page-stage-left {
        width: calc(var(--col-6-width) + var(--gap-5));
        margin-left: calc((var(--width-page) - var(--width-content)) / 2);
    }
    
    .page-stage-right {
        width: calc(var(--col-6-width) + var(--gap-5) + (var(--width-page) - var(--width-content)) / 2);
    }
}

/* ######################### */
/* page */
/* ######################### */
@media all {

    .page-stage [class*="container"] {
        max-width: var(--max-width-page-stage);
        padding-right:var(--padding-page-stage);
        padding-left: var(--padding-page-stage);
    }

    .mfp-inline-holder .mfp-content,
    [class^="container"] {
        max-width: var(--width-content);
        padding-left: var(--gap-5);
        padding-right: var(--gap-5);
    }

    [class^="container"] > *:not(.row) {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .page-stage [class*="container"] [class*="container"],
    [class*="container"] [class*="container"] {
        padding: 0;
    }

    .ce-type-grid-fullwidth-content [class*="container"] {
        max-width: 100%;
        padding: 0;
    }

    .ce-type-grid-fullwidth-bg > [class*="container"] {
        max-width: 100%;
        padding: 0;
    }

    [class*="ce-type-grid-fullwidth"] > [class*="container"] .ce-grid-fullwidth-wrap > .ce-element > [class*="container"] {
        padding-right:var(--gap-5);
        padding-left: var(--gap-5);
    }
    
}

@media (min-width: 62rem) {

    :is(
    .content-main,
    [class*="ce-type-grid-fullwidth"]
    ) [class*="ce-type-grid-slick"] > [class^="container"] {
        max-width: var(--width-content-xl);
    }

    .content-main [class*="ce-type-grid-slick"] > [class^="container"] :is(.ce-slider, .slick-dots,.slick-pause-wrap-inner,.ce-carousel) {
        max-width: calc(var(--width-content) - var(--gap-5) * 2);
        margin: 0 auto;
    }

    .content-main > :is(
    .ce-type-header,
    .ce-type-textmedia:not([class*="ce-gallery-count"]),
    .ce-type-uploads,
    .ce-type-grid-accordion,
    .ce-type-grid-fold-up,
    .ce-type-grid-expandable,
    ) > [class*="container"] > * {
        max-width: var(--width-content-sm);
    }

    .content-main > :is(
    .ce-type-dw_image_compare,
    .ce-gallery-count-2,
    .ce-gallery-count-3,
    .ce-gallery-count-4
    ) > [class*="container"] .ce-textmedia-outer {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--width-content-sm);
    }

    .content-main > :is(
    .ce-gallery-count-2,
    .ce-type-textmedia.ce-image-nowrap
    ) > [class*="container"] > * {
        max-width: var(--width-content-md);
    }

    .ce-type-list .news .article > .ce-element:not([class*="ce-type-grid"]) > .container,
    .content-main > :is(
    .ce-type-list,
    [class*="ce-type-grid"]
    ) > [class*="container"] > .ce-header {
        max-width: var(--width-content-sm);
    }
    
    .ce-type-list .news > .news-list-view:not(.news-list-teaser) {
        margin: 0 auto;
        max-width: var(--width-content-md);
    }

}

/* ######################### */
/* page-content */
/* ######################### */
@media all {
    .page-content {
        padding-top: var(--gap-10)
    }

    .page-to-top-link {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        right: .625rem;
        bottom: .625rem;
        z-index: 1030;
        width: 2.5rem;
        height: 2.5rem;
        opacity: .4;
        border-radius: var(--border-radius-btn-controller);
    }
    
    .ce-col-sticky .page-sidebar-inner {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: calc(var(--height-logo) + var(--padding-logo) + var(--gap-2));
    }
}

/* ######################### */
/* page-footer */
/* ######################### */
@media all {
    .page-footer-top :is(a,*) {
        color: var(--color-text-light);
    }

    .page-footer-top {
        border-radius: var(--border-radius);
        max-width: var(--max-width-footer-top);
        margin:0 auto;
        padding-top: var(--gap-8);
        background-color: var(--color-primary);
    }

    .page-footer {
        position: relative;
    }

    .page-footer-inner::before {
        content:"";
        position: absolute;
        pointer-events: none;
        left:0;
        top: var(--gap-8);
        right:0;
        bottom:0;
        background-color: rgba(var(--color-primary-rgb),.05);
    }

    .page-footer-bottom .navbar {
        padding: var(--gap-8) 0 var(--gap-10);
        flex-direction: column;
        align-items: flex-start;
    }

    .werbelink {
        padding:.5rem 0;
        font-weight: normal;
        color: inherit;
        text-decoration: none
    }
}

@media (min-width: 48rem) {
    .page-footer-bottom .navbar {
        flex-direction: row;
    }
}