/*
 * Header background bridge for One Page Express / Pro
 * Ziel:
 * 1) transparenter PNG-Header zeigt den Seitenhintergrund statt Weiß
 * 2) auch Unterseiten ohne eigenes Headerbild bekommen denselben Seitenhintergrund
 * 3) Header kann in der Höhe sauber gesteuert werden
 * 4) unterer Überstand wird nicht abgeschnitten
 */

body.igds-ope-hide-overlay-helper #opex-overlap-custom-background-to-remove {
    display: none !important;
}

body.igds-ope-transparent-wrapper .header-wrapper,
body.igds-ope-transparent-wrapper .header-homepage,
body.igds-ope-transparent-wrapper .header,
body.igds-ope-transparent-wrapper #page,
body.igds-ope-transparent-wrapper .site {
    background-color: transparent !important;
}

body.igds-ope-overflow-visible .header-wrapper,
body.igds-ope-overflow-visible .header-homepage,
body.igds-ope-overflow-visible .header,
body.igds-ope-overflow-visible .header-description,
body.igds-ope-overflow-visible .inner-header-description,
body.igds-ope-overflow-visible .header-description-row {
    overflow: visible !important;
}

.header-wrapper.igds-ope-bg-bridge-active,
.header-wrapper .header.igds-ope-bg-fallback-active,
.header-wrapper .header-homepage.igds-ope-bg-fallback-active,
body.igds-ope-site-bg-bridge-active.pro-inner-page,
body.igds-ope-site-bg-bridge-active.pro-inner-page #page,
body.igds-ope-site-bg-bridge-active.pro-inner-page .site,
body.igds-ope-site-bg-bridge-active.pro-inner-page .content-wrapper {
    background-image: var(--igds-ope-page-bg-image, none) !important;
    background-color: var(--igds-ope-page-bg-color, transparent) !important;
    background-position: var(--igds-ope-page-bg-position, left top) !important;
    background-size: var(--igds-ope-page-bg-size, auto) !important;
    background-repeat: var(--igds-ope-page-bg-repeat, repeat) !important;
    background-attachment: var(--igds-ope-page-bg-attachment, scroll) !important;
}

body.igds-ope-site-bg-bridge-active.pro-inner-page {
    min-height: 100vh;
}

.header-wrapper > .header-homepage,
.header-wrapper > .header {
    min-height: calc(var(--igds-ope-header-height-desktop, 760px) + var(--igds-ope-header-extra-bottom-desktop, 80px)) !important;
    padding-bottom: var(--igds-ope-header-extra-bottom-desktop, 80px) !important;
    box-sizing: border-box !important;
    background-clip: border-box !important;
    position: relative;
    z-index: 1;
}

.header-wrapper > .header-homepage .header-description,
.header-wrapper > .header .inner-header-description {
    min-height: calc(var(--igds-ope-header-height-desktop, 760px) - var(--igds-ope-header-content-offset-desktop, 100px)) !important;
    box-sizing: border-box !important;
}

.header-homepage + .header-separator,
body.page .header .section-separator-bottom,
body.page .header svg.section-separator-bottom,
body.page .header .section-separator-bottom svg {
    z-index: 2;
    position: relative;
}

@media (max-width: 767px) {
    .header-wrapper > .header-homepage,
    .header-wrapper > .header {
        min-height: calc(var(--igds-ope-header-height-mobile, 420px) + var(--igds-ope-header-extra-bottom-mobile, 35px)) !important;
        padding-bottom: var(--igds-ope-header-extra-bottom-mobile, 35px) !important;
    }

    .header-wrapper > .header-homepage .header-description,
    .header-wrapper > .header .inner-header-description {
        min-height: calc(var(--igds-ope-header-height-mobile, 420px) - var(--igds-ope-header-content-offset-mobile, 70px)) !important;
    }
}