/* ###############
##### Basic ######
############### */
@media all {

    body,
    .page {
        overflow-x: clip;
    }

    html {
        margin: 0 !important;
    }

}


/* ################
##### Header ######
################ */
@media all {

    .page-header-bg {
        background: var(--header-background);
        box-shadow: var(--box-shadow-menu);
    }

    .page-header-logo {
        height: var(--logo-height);
        padding: var(--logo-padding) 0;
        box-sizing: content-box;
        align-self: center;
        /*! transition: var(--transition-default); */
        /*! transition-property: height; */
        position: relative;
    }

    .page-header-logo::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        margin-left: calc(var(--page-padding) * -1);
        margin-right: calc(var(--size-4) * -1.75);
        background-image: url("../Images/Header/logo-background-mobile.png");
        background-size: 100% auto;
        background-repeat: no-repeat;        
        background-position: center;
    }

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

    .page-header-searchbox .input-group {
        width: var(--page-header-searchbox-width);
        height: var(--page-header-searchbox-height)
    }

    .search-list-item .hit {
        position: relative;
        color: var(--color-red);
    }

    /*

    .search-list-item .hit::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 35%;
    width: 100%;
    height: 125%;
    background-image: url("../Images/MainNav/mainnav-sub-hover-active.png");
    background-size: 100% 100%;
    background-position: center 40%;
    background-repeat: no-repeat;
}

    */

    .page-header {
        position: sticky;
        top: 0;
        z-index: 1030;
        box-shadow: var(--box-shadow-menu);
    }

    .page-header-main {
        z-index: 1000;
        background-color: var(--ce-color-bg);
        box-shadow: var(--box-shadow-menu);
    }

    .page-header-topbar {
        background-color: var(--bs-gray-100)
    }

    .page-header-controls {
        flex-grow: 1;
        margin-right: calc(var(--page-padding) * -1);
    }

    .page-header-overlay-section {
        flex-grow: 1;
        margin-left: var(--size-10);
        /*! margin-right: -.75rem; */
    }

}

@media(min-width: 48rem) {

}

@media(min-width: 62rem) {

    #mainMenu {
        flex-grow: 1;
    }

    .page-header-logo {
        height: unset;
        min-height: var(--logo-height);
        align-self: stretch;
        position: relative;
    }

    .page-header-logo-img ,
    .page-header-logo-link {
        position: relative;
    }

    .page-header-overlay-section > div {
        justify-self: end;
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        align-self: center;
    }

    .page-header-overlay-section > .page-header-navigation {
        transition: var(--transition-default);
        transition-property: opacity;
        width: 100%;
    }

    .page-header-overlay-section.show-overlay > .page-header-navigation {
        opacity: 0;
        pointer-events: none;
    }

    .page-header-logo::before {
        margin-left: calc(var(--size-2) * -6.625);
        margin-right: calc(var(--size-2) * -8.5625);
        background-image: url("../Images/Header/logo-background-desktop.png");
    }

}

@media(min-width: 62rem) {

    .page-header-campaign .page-header-overlay-section {

        .main-menu {
            display: none;
        }

        .linguise-langnav {
            margin-left: auto;
        }

    }

}

@media(min-width: 70rem) {

    .page-header-overlay-section {
        margin-left: var(--size-14);
    }

}

/* ##############
##### Page ######
############## */
@media all {

    .pagination .page-item.disabled .page-link {
        padding-left: .25em;
        padding-right: .25em
    }

}

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

    .page-stage .ce-textmedia.ce-below .ce-gallery,
    .page-stage .ce-textmedia.ce-above .ce-gallery {
        margin: 0
    }

}

/* #################
##### Content ######
################# */
@media all {

    .page-to-top-link {
        position: fixed;
        right: .625rem;
        bottom: .625rem;
        z-index: 1030;
        width: 2.5rem;
        height: 2.5rem;
        opacity: .4
    }

}

/* #################
##### Sektionen ######
################# */
@media all {

    .page-stage:has( > .page-stage-inner > .ce-theme-off-white) + .content-main > .ce-theme-off-white:nth-child(1) ,
    .page-stage:has( > .page-stage-inner > .ce-theme-off-purple) + .content-main > .ce-theme-off-purple:nth-child(1) ,
    .page-stage:has( > .page-stage-inner > .ce-theme-off-yellow) + .content-main > .ce-theme-off-yellow:nth-child(1) ,
    .page-stage:has( > .page-stage-inner > .ce-theme-off-green) + .content-main > .ce-theme-off-green:nth-child(1) ,
    .content-main > .ce-theme-off-white + .ce-theme-off-white ,
    .content-main > .ce-theme-dark-purple + .ce-theme-dark-purple ,
    .content-main > .ce-theme-yellow + .ce-theme-yellow ,
    .content-main > .ce-theme-green + .ce-theme-green {
        padding-top: 0;
    }

}


/* ################
##### Footer ######
################ */
@media all {

    .page-footer {
        background-color: var(--ce-color-bg);
        box-shadow: var(--box-shadow-menu);
        padding-bottom: calc(var(--page-gap) * 1.5);
    }

    .page-footer-top {
        display: grid;
    }

    .page-footer-bottom {
        padding-top: calc(var(--page-gap) / 2);
        gap: var(--container-gap);
    }

    .page-footer-bottom .row + .row ,
    .page-footer-bottom .row .ce-element + .ce-element {
        padding-top: var(--container-gap);
    }
    
    .page-footer-bottom img {
        max-width: 100%;
        width: 100%;
    }

    .page-footer-bottom .ce-header {
        display: flex;
        align-items: center;
    }

    .page-footer-bottom .ce-header .custom-icon {
        --svg-fill: var(--ce-color-cta-bg);
        margin-right: var(--size-1);
        align-self: start;
    }

    .page-footer-bottom :is(.ce-header, .inline-txt-img-wrap, .ce-bodytext) +  *:not(.row, .news) {
        margin-top: var(--size-2);
    }

    .page-footer-bottom .inline-txt-img-wrap {
        margin-top: var(--size-2);
        display: flex;
        gap: var(--size-2);
    }

    .page-footer-bottom img {
        height: auto;
    }

    .page-footer-bottom .dzi-seal {
        width: 3.2rem;
    }

    .page-footer-bottom .beh-img {
        width: 10.625rem
    }

    .page-footer-bottom .fed-img {
        width: 16rem
    }

    .page-footer-bottom .seal-wrap p {
        margin-top: 0;
    }

    .page-footer-bottom .button-iban:not(.pressed) .txt-success ,
    .page-footer-bottom .button-iban.pressed .txt-default {
        display: none;
    }

    .page-footer-bottom .social-media-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: var(--size-2);
        background: transparent;
    }

    .page-footer-bottom .social-media-link {
        --svg-fill: var(--ce-color-cta-fg);
        display: grid;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
        background-color: var(--ce-color-cta-bg);
        border-radius: var(--border-radius-small);
        position: relative;
        overflow: visible;
    }

    .page-footer-bottom .social-media-link::after {
        content: "";
        position: absolute;
        inset: 0;
        margin-inline: -10%;
        background-image: url("../Images/Footer/WebP/social-button-hover-darkpurple.webp");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: var(--transition-default);
        opacity: 0;
    }

    .base-theme-dark-purple .page-footer-bottom .social-media-link::after {
        background-image: url("../Images/Footer/WebP/social-button-hover-offwhite.webp");
    }

    .page-footer-bottom .social-media-link:is(:hover, :focus-visible)::after {
        opacity: 1;
    }
    
    /* Inconsistent customer wishes */

    .page-footer-bottom .txt-img-card-link {
        position: relative;
        width: 100%;
        border-radius: var(--border-radius-small);
        overflow: clip;

        span {
            position: absolute;
            max-width: 60%;
            padding: 1rem;
            line-height: 1.25;
            font-size: 7.25vw;
        }

        &:hover ,
        &:focus {
            color: inherit;
        }

        img {
            max-width: 100%;
            width: 100%;
        }

    }

    .footer-menu .nav-link {
        display: inline-block
    }

    .werbelink {
        font-weight: normal;
        text-decoration: none;
        opacity: .125;
    }

    .werbelink:hover {
        opacity: 1;
    }

    .werbelink span {
        background: #6c757d;
        color: #fff;
        padding: .25em;
        border-radius: .25em;
        font-size: .5em;
        line-height: 1;
        vertical-align: top;
        display: inline-block
    }

}

@media (min-width: 48rem){

    .page-footer-bottom .txt-img-card-link {

        span {
            font-size: 2.25vw;   
        }

    }

}

@media (min-width: 62rem) {

    .page-footer-bottom .button-iban {
        width: unset;
    }

}