@charset "utf-8";

/*-------------------------- for Touchdevices ---------------------------------------------------------------------------------------------------------*/


@media screen and (hover:none),
screen and (pointer:coarse) {
    :root {
        --headerH1: "Willkommen bei C`Movie dem Hoffnungsportal";
        --headerH1Small: "C`Movie das Hoffnungsportal";
        --headerH1XSmall: "C`Movie gibt Hoffnung";
        --headerH1XXSmall: "Hoffnungsportal";
        --headerH3: "Der Gegenpol zu Chaos und Panik seitens der Medien und Politik";
        --headerH3Small: "Der Gegenpol zu Chaos und Panik";
        --headerH3XSmall: "Stoppe Chaos und Panik";

        --displayNone: none;
        /*--displayBlock: -webkit-box;
				--displayInlineBlock: -webkit-inline-box;
				--displayInline: -webkit-inline;
				--displayInlineFlex: -weblkit-inline-flex;
				--displayFlex: -webkit-flex;	*/
    }

    #topMenu {
        width: var(--menuTopWidth);
        left: calc(0rem - var(--menuTopWidth));
        -webkit-transition: var(--transitionFast);
        transition: var(--transitionFast);
    }

    .containerIcon:is(:active, :target, :focus, :focus-within, :focus-visible, :hover, :visited)~#topMenu {
        left: 0rem;
    }

    #topMenu:has(li :is(:active, :target, :focus, :focus-within, :focus-visible, :hover, :visited)) {
        left: 0rem;
    }

    #topMenu li:hover>ul {
        height: auto;
        display: var(--displayInlineBlock);
        margin: var(--centerMargin) var(--noMarginPadding);
        padding-top: 1em;
        padding-right: 1em;
        position: var(--posRelative);
        width: max-content;
        color: var(--lightColor);
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
        z-index: 150;

    }

    nav:hover,
    #topMenu:hover {
        background-color: var(--colorDrkGrey);
        box-shadow: var(--boxShadow);
        backdrop-filter: var(--bgBlur);
        -webkit-backdrop-filter: var(--bgBlur);
        max-height: unset;
    }

    nav#topMenu:hover>ul {
        margin: var(--noMarginPadding);
        visibility: var(--show);
        height: auto;
        background-color: var(--blueTransparent);
        box-shadow: var(--menuShadow);
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);

    }

    nav#topMenu li:hover {
        text-shadow: var(--fontShadow);
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
    }

    nav#topMenu>ul>li:hover {
        background-color: rgba(0, 0, 0, .5);
        border-radius: 0px !important;
    }

    nav#topMenu>ul>li>ul:hover {
        display: var(--displayInlineBlock);
        visibility: var(--show);
    }

    nav#topMenu>ul>li:hover>ul {
        visibility: var(--show) !important;
        height: auto;
        display: var(--displayInlineBlock);
        margin: var(--centerMargin) var(--noMarginPadding);
        position: var(--posRelative);
        color: var(--lightColor);
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
        z-index: 150;
    }

    #topM:hover {
        display: var(--displayInlineBlock);
        visibility: var(--show);
    }

    #topMenu:has(> ul:hover) {
        background-color: var(--colorDrkGrey);
        box-shadow: var(--menuShadow);
        backdrop-filter: var(--bgBlur);
        -webkit-backdrop-filter: var(--bgBlur);
        max-height: unset;
    }

    #topMenu:has(> ul:hover)>ul {
        background-color: var(--blueTransparent);
        height: max-content;
    }

    nav#topMenu>ul>li:hover>ul {
        padding-top: 1em;
    }

    nav#topMenu>ul>li:hover {
        display: var(--displayInlineBlock);
        visibility: var(--show);
    }

    .container.y #explainEnd {
        background-color: var(--warBlendBlue);
    }

    [alt="war"]:not(:first-child),
    [alt="war"]:first-child {
        background-image: unset !important;
        mask-image: unset !important;
        -webkit-mask-image: unset !important;
        display: var(--displayNone) !important;

    }

    [alt="warcollage"] {
        background-image: var(--imageWar_o) !important;
    }

    #explainEnd:hover .containerOverlay,
    #explainEnd:target .containerOverlay {
        background-color: transparent;
    }

    :is(#impressum, #datenschutz, #haftung, #Screen) .Info {
        top: calc(var(--calcHeaderMinHeight) + 0.5rem) !important;
    }
}


/* only Touch and more than 128dpi (min-resolution: 128dpi)*/
@media screen and (hover: none) and (max-width: 480px),
screen and (pointer:coarse) and (max-width: 480px) {

    #topMenu {
        top: calc(2.5rem + var(--menuTopTop)) !important;
        padding: 0;
        margin: var(--noMarginPadding) !important;
        width: 90vw;
        left: -90vw;
        text-shadow: none;
        cursor: pointer;
        -webkit-transition: var(--transitionFast);
        transition: var(--transitionFast);
        z-index: 152;
    }

    .containerIcon:is(:active, :target, :focus, :focus-within, :focus-visible, :hover, :visited)~#topMenu {
        top: calc(2.5rem + var(--menuTopTop)) !important;
        padding: 0.5em;
        margin: var(--noMarginPadding) !important;
        left: 0rem;
        z-index: 152;
    }

    #topMenu:has(li :is(:active, :target, :focus, :focus-within, :focus-visible, :hover, :visited)) {
        top: calc(2.5rem + var(--menuTopTop)) !important;
        padding: 0.5em;
        margin: var(--noMarginPadding) !important;
        left: 0rem;
        z-index: 152;
    }

    #topMenu>ul {
        width: calc(90vw - 1em) !important;
        margin: var(--noMarginPadding);
        margin-bottom: 0.25em;
        visibility: visible;
        height: 1.2em;
        display: var(--displayBlock);
        list-style-type: none;
        padding: 0.25em var(--noMarginPadding);
        border-radius: var(--borderRadius);
        -webkit-overflow-x: var(--overflowCut);
        -moz-overflow-x: var(--overflowCut);
        -ms-overflow-x: var(--overflowCut);
        user-select: var(--userSelect);
        -webkit-user-select: var(--userSelect);
        -moz-user-select: var(--userSelect);
        position: var(--posRelative);
        z-index: 150;
        -webkit-transition: var(--transitionFast);
        transition: var(--transitionFast);
    }

    nav#topMenu>ul>li:is(:active, :target, :focus, :focus-within, :focus-visible, :hover)>ul {
        padding-top: 0em;
    }

    nav#topMenu>ul>li>ul>li {
        margin-left: unset;
        padding-left: 7em;
    }

    header h1::before {
        content: var(--headerH1XXSmall) !important;
        font-size: 16pt;
    }

    header h3::before {
        content: var(--headerH3XXSmall) !important;
        font-size: 12pt;
    }

    .headerText {
        text-align: right;
        padding-right: 0.5em;
    }

    header {
        background-position-x: 3.2em, 0em;
        background-position-y: 1.8em, 0em;
        background-size: 20%, auto;
    }

}