/* T3 Layouts */

:root {
    --page-wrap-outer-padding: 0;
    --page-wrap-inner-padding: 0.625rem;

    @media (min-width: 30em) {
        --page-wrap-inner-padding: 1.25rem;
    }

    @media (min-width: 62.5em) {
        --page-wrap-inner-padding: 2.5rem;
    }

    @media (min-width: 92.5em) {
        --page-wrap-inner-padding: 3.75rem;
    }
}

@media all {
    hr,
    .ce-div {
        border: none;
        border-top: 1px solid var(--color-darkgray);
        margin: 0;
        height: 0.9375rem;
    }
}



/* page layout */
@media all {
    .wrap-inner {
        padding-inline: var(--page-wrap-inner-padding);
    }

    .page {
       padding-bottom: 5rem; /* consent tool and chatbot must not cover footer navigation */
    }

    /* stage */
    .page-stage {
        position: relative;
        overflow: clip; /* needed with negative margin for .ce-frame-headerimage */
        width: 100%;
    }

    .page-stage .ce-grid-slider,
    .page-stage .ce-element {
        margin: 0;
    }

    .page-stage .ce-gallery {
        padding: 0 !important;
    }

    .page-stage .ce-row {
        margin: 0;
    }
    .page-stage .ce-column {
        margin: 0;
        padding: 0;
    }

    /* stage may have a heading */
    .page-stage .ce-slider {
        background: rgb(102, 102, 102);
    }

    .page-stage .ce-slider ce-textpic-inner,
    .page-stage .slick-pause,
    .page-stage .slick-arrow {
        display: none;
    }

    .page-stage .slick-dots {
        position: absolute;
        bottom: 0;
        text-align: center;
        margin: 0 0 0.625rem;
        color: var(--color-white);
    }

    .page-stage .ce-frame-headerimage {
        margin: 0 -25vw;
    }
    .page-stage .ce-frame-headerimage .ce-header {
        position: absolute;
        top: 50%;
        left: 50vw;
        margin: 0;
        margin-left: calc(-50vw + 0.625rem);
        width: calc(100vw - 1.25rem);
        transform: translateY(-50%);
    }
    .page-stage .ce-header {
        --color-header-shadow: var(--color-darkergray);
        color: var(--color-white);
        filter: drop-shadow(0 0 8.75px rgba(0, 0, 0, 0.5));
        text-shadow: 0 0 1px var(--color-header-shadow),
            1px 1px 1px var(--color-header-shadow),
            1px -1px 1px var(--color-header-shadow),
            -1px 1px 1px var(--color-header-shadow),
            -1px -1px 1px var(--color-header-shadow),
            0 0 40px rgba(0, 0, 0, 0.25)
    }
    .page-stage .ce-frame-headerimage .ce-header :first-child {
        font-size: clamp(1.875rem, 5.5vw, 5rem);
    }
    .page-stage .ce-frame-headerimage .ce-header .ce-header-subline {
        display: block;
        font-size: clamp(1.5rem, 4vw, 4rem);
    }

    .page-stage-form {
        position: relative;
    }

    .page-stage-form .ce-header {
        position: absolute;
        bottom: 100%;
        margin-bottom: 16vw;
        max-width: calc(100vw - 2.5rem);
    }

    /* content */
    .page-content,
    .page-content-more,
    .page-content-cards {
        padding-top: 1.25rem;
    }

    .page-content {
        background-image: url("../Img/background_image_logo_x1-compressor.png");
        background-size: 183px 223px;
        background-position: right 40px;
        background-repeat: no-repeat;
    }

    .page-content-cards {
        overflow: hidden;
        background: url("../Img/background_pattern_light_x1.jpg")
            rgb(251, 251, 251);
    }

    /* footer */

    .page-footer .ce-above .ce-media-image {
        max-width: 60px;
        margin-left: auto;
        margin-right: auto;
    }

    .page-footer {
        background: rgb(248, 248, 248);
    }

    .page-footer-top {
        padding-top: 1.25rem;
    }
    .page-footer-bottom {
        background: rgb(235, 235, 235);
    }
}

@media all and (min-width: 30em) {
    .page-stage .ce-frame-headerimage {
        margin: 0 -20vw;
    }

    .page-stage .ce-frame-headerimage .ce-header {
        margin-left: calc(-50vw + 1.25rem);
        width: calc(100vw - 2.5rem);
    }
}

/* tablet + print */
@media all and (min-width: 40em), print {
    .ce-div {
        position: relative;
        overflow: clip;
        height: 0.9375rem;
    }

    .ce-div::before {
        content: "";
        display: block;
        border-radius: 25%;
        position: absolute;
        left: 2.5rem;
        right: 2.5rem;
        bottom: 100%;
        height: 1.25rem;
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.25);
    }

    /* page layout */

    .page-stage .ce-frame-headerimage {
        margin: 0 -15vw;
    }
    .page-content,
    .page-content-more,
    .page-content-cards {
        padding-top: 2.5rem;
        padding-bottom: 1.25rem;
    }
}

/* desktop */
@media all and (min-width: 62.5em) {
    /* page layout */

    .mobile-mainmenu {
        display: none !important;
    }
    /* breaks position: fixed within the page */
    .mm-wrapper--position-left .mm-slideout,
    .mm-wrapper--position-right .mm-slideout {
        -webkit-transform: unset !important;
        transform: unset !important;
    }

    .page-grid-large {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
    }
    .page-grid-large .page-col {
        float: left;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        max-width: 100%;
        min-height: 1px;
    }
    .page-grid-large-66-33 .page-col {
        width: 66.6666%;
    }
    .page-grid-large-66-33 .page-col:last-child {
        width: 33.3333%;
    }

    .page-stage .ce-frame-headerimage {
        margin: 0;
    }

    .page-stage .ce-frame-headerimage .ce-header {
        margin-left: calc(-50% + 2.5rem);
        width: calc(100vw - 5rem);
    }

    .page-stage .page-stage-form {
        position: absolute;
        left: 50%;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 54rem;
        margin-left: -27rem;
    }

    .page-stage-form .ce-header {
        position: static;
        margin-bottom: 1.25rem;
    }

    .page-content,
    .page-content-more,
    .page-content-cards {
        padding-bottom: 0;
    }

    .page-footer-top {
        padding-top: 2.5rem;
    }
}

/* desktop - xlarge */
@media (min-width: 92.5em) {
    body {
        max-width: 120rem;
        margin: 0 auto;
    } /* the world ends at FullHD ;-) */

    .wrap-outer {
        margin: 0 auto;
        max-width: 120rem;
    }

    .page {
        overflow: clip;
    }

    .page-stage .ce-frame-headerimage .ce-header {
        margin-left: calc((-92.5rem / 2) + 2.5rem);
        width: calc(92.5rem - 5rem);
        top: calc(50% + 42px); /* + (page-header height/2)  */
    }

    .page-stage .ce-frame-headerimage .ce-header :first-child {
        font-size: 5rem;
    }

    .page-stage .ce-frame-headerimage .ce-header .ce-header-subline {
        font-size: 2.1875rem;
    }

    .page-content {
        padding-bottom: 0rem;
        background-size: 367px 447px;
    }
}