@charset "utf-8";


@media screen and (max-aspect-ratio:16/9) and (orientation: landscape) {

    :root {
        --calcSlideMaxWidth: 100vw;
        --calcSlideMinWidth: 75vw;
        --calcSlideMaxHeight: 56.25vw;
        --calcSlideMinHeight: calc(56.25vw * 0.75);
        --calcBGMaxHeight: 100vh;
        --calcBGMaxWidth: 100vw;
        --setCalcMinHeaderFactor: 4;
        --setCalcMaxHeaderFactor: 9.5;
        --setCalcHeaderFactor: var(--setCalcMinHeaderFactor);
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcHeaderFactor));
    }

    .scrollPic:nth-child(3) {
        background-image: var(--scrollPicImage3);
        background-size: var(--scrollPicSize);
        background-repeat: var(--repeateBg);
        background-position: bottom;
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
        height: calc(var(--calcSlideMaxHeight) + var(--calcHeaderHeight)) !important;
        z-index: 10 !important;
    }

    #explainStart {
        max-height: calc(var(--calcBGHeight) * 3);
        /*overflow-x: var(--defaultValue) !important;
	overflow-y: var(--overflowOverlay);*/
    }
}

@media screen and (orientation: portrait) {
    :root {
        --calcSlideMaxWidth: 100vw;
        --calcSlideMinWidth: 75vw;
        --calcSlideMaxHeight: 56.25vw;
        --calcSlideMinHeight: calc(56.25vw * 0.75);
        --calcBGMaxHeight: 100vh;
        --calcBGMaxWidth: 100vw;
        --setCalcMinHeaderFactor: 4;
        --setCalcMaxHeaderFactor: 9.5;
        --setCalcHeaderFactor: var(--setCalcMinHeaderFactor);
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcHeaderFactor));
    }

    .contentOverlay:has(.containerBibleText) {
        max-height: 100vh !important;
        height: var(--calcBG_Height);
    }

    .scrollPic:nth-child(3) {
        background-image: var(--scrollPicImage3);
        background-size: var(--scrollPicSize);
        background-repeat: var(--repeateBg);
        background-position: bottom;
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
        height: calc(var(--calcSlideMaxHeight) + var(--calcHeaderHeight)) !important;
        z-index: 10 !important;
    }


    #explainStart {
        max-height: calc(var(--calcBGHeight) * 3);
        /*overflow-x: var(--defaultValue) !important;
	overflow-y: var(--overflowOverlay);*/
    }

    .bgOverlay:nth-child(3) .scrollOverlay {
        top: calc(0px - (var(--calcSlideMaxHeight) + 5.5vmin));
    }

    .bgOverlay:nth-child(3) .scrollPic {
        background-image: linear-gradient(180deg, transparent, transparent, transparent, var(--warBlendYellow), var(--warBlendYellow));
        background-size: var(--scrollPicSize);
        background-repeat: var(--repeateBg);
        background-position: center bottom;
        user-select: var(--userSelect);
        height: calc(var(--calcSlideMaxHeight) + 7.5vmin);
        z-index: 10 !important;
    }

    .bgOverlay:nth-child(3) .containerOverlay {
        max-height: var(--screenHeight);
        height: calc(var(--calcSlideMaxHeight) + 7.5vmin);
        overflow: var(--overflowHidden);
        z-index: 10;
    }

    div#slideshowStart {
        height: calc(var(--calcSlideMaxHeight) + 7.5vmin);
    }

    #NaviDown {
        --naviTop: calc(var(--calcHeaderMinHeight) + 0.05rem) !important;
        top: var(--naviTop);
        right: 0.75em;
    }

    .containerIcon {
        width: 2em;
    }

    .ContentText {
        width: calc(100vw - 15%) !important;
        margin-left: auto;
        margin-right: auto;
    }

    figure.image[alt="viruscollage"] {
        overflow-x: var(--overflowCut);
        height: inherit;
        width: calc(var(--screenWide) * 2) !important;
        max-height: 300vh !important;
        padding: var(--noMarginPadding);
        margin: var(--noMarginPadding);
        transform: translateZ(-1px);
        zoom: 0.5;
    }

    header {
        background-position-y: 22px, 0px;
    }
}

@media screen and (min-aspect-ratio: 16/9) and (orientation: landscape) {
    :root {
        --calcSlideMaxWidth: calc(100vh / 9 * 16);
        --calcSlideMinWidth: calc(75vh / 9 * 16);
        --calcSlideMaxHeight: 100vh;
        --calcSlideMinHeight: 75vh;
        --calcBGMaxHeight: 100vh;
        --calcBGMaxWidth: 100vw;
        --setCalcMinHeaderFactor: 4;
        --setCalcMaxHeaderFactor: 9.5;
        --setCalcHeaderFactor: var(--setCalcMinHeaderFactor);
        --calcHeaderHeight: calc(var(--fontSize) * var(--setCalcHeaderFactor));
    }

    header {
        height: var(--calcHeaderMinHeight);
    }

    header:hover {
        height: var(--calcHeaderMaxHeight);
    }
}


@media screen and (max-width: 319px) {
    header h1::before {
        content: var(--headerH1XXSmall) !important;
    }

    header h3::before {
        content: var(--headerH3XXSmall) !important;
    }

    header {
        background-image: var(--blueGradientRight);
        background-color: var(--colorDrkGrey);
        background-repeat: var(--bgRepeate);
        backdrop-filter: var(--bgBlur);
        -webkit-backdrop-filter: var(--bgBlur);
        background-size: var(--headerBGSizeSmall);
        color: var(--colorLgtGrey);
        height: var(--calcHeaderHeight);
    }
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    header h1::before {
        content: var(--headerH1XXSmall) !important;
    }

    header h3::before {
        content: var(--headerH3XXSmall) !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 589px) {
    header {
        background-image: var(--blueGradientRight);
        background-position-y: 0px;
        background-color: var(--colorDrkGrey);
        background-repeat: var(--bgRepeate);
        backdrop-filter: var(--bgBlur);
        -webkit-backdrop-filter: var(--bgBlur);
        background-size: var(--headerBGSizeSmall);
        color: var(--colorLgtGrey);
        height: var(--calcHeaderHeight);
    }

    header h1::before {
        content: var(--headerH1XSmall) !important;
    }

    header h3::before {
        content: var(--headerH3XSmall) !important;
    }
}

@media screen and (min-width: 589px) and (max-width: 869px) {
    header h1::before {
        content: var(--headerH1Small) !important;
    }

    header h3::before {
        content: var(--headerH3Small) !important;
    }
}

@media screen and (min-width: 870px) {
    header h1::before {
        content: var(--headerH1) !important;
    }

    header h3::before {
        content: var(--headerH3) !important;
    }
}

@media screen and (max-width: 930px) and (min-width: 870px) {
    header {
        background-image: var(--blueGradientRight);
        background-color: var(--colorDrkGrey);
        background-repeat: var(--bgRepeate);
        backdrop-filter: var(--bgBlur);
        -webkit-backdrop-filter: var(--bgBlur);
        background-size: var(--headerBGSizeSmall);
        color: var(--colorLgtGrey);
        height: var(--calcHeaderHeight);
    }
}

/*
header {
	background-image: var(--blueGradientRight) !important;
	background-size: 100%;
}
*/
/*
@media screen and (orientation: landscape) and (min-resolution: 192dpi) {

    :root {}
}

/*Ipad Portrait */
@media screen and (orientation: portrait) and (min-resolution: 192dpi) {

    :root {}

    .scrollPic:nth-child(3) {
        background-image: var(--scrollPicImage3);
        background-size: var(--scrollPicSize);
        background-repeat: var(--repeateBg);
        background-position: bottom;
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
        height: calc(var(--calcSlideMaxHeight) + var(--calcHeaderHeight)) !important;
        z-index: 10 !important;
    }

    #explainStart {
        max-height: calc(var(--calcBGHeight) * 3);
        /*overflow-x: var(--defaultValue) !important;
			overflow-y: var(--overflowOverlay);*/
    }

    header {
        /*	background-image: var(--headerBGImageSmall);
			background-color: var(--colorDrkGrey);
			background-repeat: var(--bgRepeate);
			backdrop-filter: var(--bgBlur);
			-webkit-backdrop-filter: var(--bgBlur);
			background-size: var(--headerBGSize);
			color: var(--colorLgtGrey);
			background-position-x: var(--headerBGPosX);
			background-position-y: var(--headerBGPosY);
			height: var(--calcHeaderHeight);*/
    }

    header h1 {
        margin-block-end: 0em !important;
    }

    #topMenu {
        top: calc(2.5rem + var(--menuTopTop)) !important;
    }

    .iconText {
        display: var(--hidden);
    }

    #NaviDown {
        --naviTop: calc(var(--calcHeaderMinHeight) + 0.05rem) !important;
        top: var(--naviTop);
        right: 0.75em;
    }

    .scrollPic .img {
        display: box !important;
        margin: var(--noMarginPadding);
        padding: var(--noMarginPadding);
        background-repeat: var(--repeateBg);
        z-index: 10 !important;
    }

    figure.image {
        overflow-x: var(--overflowClip) !important;
        height: inherit;
        width: var(--screenWide) !important;
        /*border: 2px solid #eeee00; */
        padding: var(--noMarginPadding);
        margin: var(--noMarginPadding);
        transform: translateZ(-1px);
        /* zoom: 0.5; */
    }

    .Slideshow {}

    .container.x .Title {
        /*top: unset !important;
			bottom: calc( var(--calcSlideHeight) * 1.24 + 3px) !important;
			font-size: var(--titleFontSize) !important; */
    }

    .containerSlider:is(:hover, :active, :focus) .container.x .Title {
        /*bottom: calc( var(--calcSlideHeight) * 1.2) !important;
			font-size: var(--titleFontSize) !important;*/
    }

    .dotContainer {
        top: unset !important;
        display: var(--displayBlock) !important;
    }

    .containerSlider:is(:hover, :active, :focus) .dotContainer {
        top: unset !important;
        display: var(--displayBlock) !important;
    }

    .containerSlider:is(:hover, :active, :focus) .channelLogo {
        bottom: 0px !important;
        /*display: var(--displayBlock) !important; */
    }

    .txt {
        font-size: 3em;
        line-height: 1;
        top: 4em;
        position: var(--posRelative);
        display: var(--displayInline);
    }
}

/* Phone Portrait*/
@media screen and (min-height: 600px) and (max-width: 668px) and (orientation: portrait) and (min-resolution: 192dpi) {}

@media screen and (min-width: 600px) and (max-height: 668px) and (orientation: landscape) {}

/* Window PC Landscapemode 16:9 */

@media screen and (min-width:1280px) and (max-width: 1920px) and (min-height: 720px) and (max-height: 1080px) and (orientation: landscape) and (max-resolution: 192dpi) {
    header {
        background-position-x: var(--headerBGPosXBig);
        height: var(--headerHeightLarge);
    }
}


@media screen and (min-width:700px) and (max-width: 1280px) and (min-height: 720px) and (max-height: 1080px) and (orientation: landscape) and (max-resolution: 192dpi) {
    header {
        background-position-x: 2.5%;
        height: var(--headerHeightLarge);
    }

    #topMenu {
        top: calc(2.5rem + var(--menuTopTop)) !important;
        border-radius: var(--borderRadius);
    }

}

@media screen and (max-width: 1023px) {
    .ContentText {
        margin: 0.25em 0.75em !important;
    }
}