/*RESCALING ------------------------------------------------------------------------RESCALING ------------------------------------------------------------------------------RESCALING -------------------*/

@media (pointer: fine){
    .dragBox{
        transition: margin 0.5s 0.2s ease, background-color 0.5s 0.2s;
    }

    .sideTools.sideTools--Home,
    .sideTools:not(.sideTools--Home),
    .sideTools{
        transition: opacity 0.5s 0.2s ease;
    }

    .SVGIcon.chat__icon{
        width: 1.4em;
        height: 1.4em;
        --strokeWidth: 0.04em;
    }

    .chat__text{
        font-size: 0.9em;
        }

    details{
        font-size: 0.8em;
    }



    .dragBox:not(.dragBox.content__page--unfocused){
        filter: blur(0px) opacity(1);
    }

    .blurred>.dragBox.content__page--unfocused>.dragBox__view:not(.dragBox__view--inactive){
        filter: blur(10px) opacity(0.4);
        transform: scale(0.66);
        transform-origin: left;
    }

    .blurred>.dragBox.content__page--unfocused:has(+.dragBox.content__page--unfocused)>.dragBox__view:not(.dragBox__view--inactive){
        filter: blur(20px) opacity(0.2);
        transform: scale(0.33);
    }

}





@media (pointer: coarse){

    /* .TAInfo--player{
        min-width: 15em;
    } */

    .entryInput:not(.entryInput--small) {
        resize: vertical;
        min-height: 2em;
        padding: 0.4em;
    }

    .loader__image {
        stroke-width: var(--strokeWidth);
        -moz-stroke-width: var(--strokeWidth);
    }

    .quickPopUp {
        margin-top: 2em;
    }
}

@media (orientation: portrait){
    body{
        flex-direction: column;
        background-image: var(--bodyBG_V);
        background-position-y: bottom;
        background-position-x: center;
    }

    header{
        height: var(--naviSize);
        width: 100%;
        min-height: unset;
        min-width: 25em;
        padding: 0.5em 0.25em;
        flex-direction: row;
        transition: none;

        -webkit-box-shadow: 1px 3px 3px rgba(var(--boxShadow));
        -moz-box-shadow: 1px 3px 3px rgba(var(--boxShadow));
        box-shadow: 1px 3px 3px rgba(var(--boxShadow));
        -webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
    }

    .logoHeader{
        right: 0.25em;
        bottom: unset;
        height: var(--naviSize);
        top: 0px;
        flex-direction: row;
    }

        .schleife_ukraine{
            width: 3.5em;
        }

        #makelovenotwar{
            margin-bottom: unset;
            margin-right: 0.5em;
            transform: translateY(1.5em);
        }

    #navi {
        flex-direction: row;
        height: 100%;
    }

    .accountMenu{
        left: 0px;
        top: var(--naviSize);
        padding: 0em 1em 1em 1em;
        max-height: calc(100% - var(--naviSize));
    }

    .menu__sub{
        border-radius: 0px 0px 2em 2em;
        left: 0px;
        top: calc(var(--naviSize) - 1em);
        padding: 1em 0px 0.5em 0px;

    }

    /* .menu__sub>.button__mainMenu>.button__label {
        display: inline;
    } */

    .button__mainMenu{
        margin: 0px 0.25em;
        padding: 0 var(--ButtonPadding);
    }

    /* .button__mainMenu.button--active{
            -webkit-box-shadow: 1px 3px 3px rgba(var(--boxShadow));
            -moz-box-shadow: 1px 3px 3px rgba(var(--boxShadow));
            box-shadow: 1px 3px 3px rgba(var(--boxShadow));
            -webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
            box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
    }

    .button.button--activeDouble{
        -webkit-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03)), 1px 3px 3px rgba(var(--boxShadow));
        -moz-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03)), 1px 3px 3px rgba(var(--boxShadow));
        box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03)), 1px 3px 3px rgba(var(--boxShadow));
        -webkit-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03)), 1px 3px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03)), 1px 3px 3px rgba(0, 0, 0, 0.4);
        box-shadow: inset -3px 0px 0px 0px rgb(var(--colUIText03)), 1px 3px 3px rgba(0, 0, 0, 0.4);
    } */


    .line{
        width: 1px;
        height: 100%;
        margin: 0px 0.125em;
    }

    main {
        height: calc(100% - var(--naviSize));
        width: 100%;
        flex-direction: column;
    }

    .toolBox--large{
        height: 50vh;
    }

    .TAInfo{
        align-items: center;
        width: 100%;
        padding: unset;
        padding-right: 1em;
    }

    .TAInfo.fullScreen{
        width: 100%;
        height: 100%;
    }


    #extras{
        flex-direction: column;    }


    .button__sideBar{
        margin: 0.5em 0.25em;
    }

    .button__sideBar--focus:before{
        transform: rotate(180deg);
        margin-top: var(--togglerSize);
    }

    .button__sideBar--focus>svg{
        margin-bottom: -0.1em;
        margin-left: 0px;
    }




/* Tools normal unten ---------------------------------------------------------------------------------------------------------------------*/


    .sideTools{
        flex-direction: column;
        bottom: 0px;
        width: 100%;
        height: unset;

        min-height: unset;
    }

        .sideTools__sideBarBack {
            /* background-image: linear-gradient(180deg, rgba(var(--colUIBack03),0.9) 0%, rgba(var(--colUIBack03),1) 50%); */
            /* background-color: unset; */
            height: var(--naviSize);
            width: 100%;
            bottom: 0px;
        }

    .sideBar {
        width: 100%;
        height: var(--naviSize);
        flex-direction: row;
        pointer-events: all;
    }

    .sideBar__devider {
        width: 0.25em;
        height: 100%;
    }

    .button__sideBar--focus,
    .noTouch .button__sideBar--focus:hover{
        -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
        -moz-box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
        box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
        margin: 0px 0.25em 0.5em 0.25em;
        border-radius: 0px 0px 2em 2em;
        flex-direction: column;
    }

    @supports (-webkit-touch-callout: none){
        .button__sideBar--focus,
        .noTouch .button__sideBar--focus:hover{
            -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
            -moz-box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
            box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
        }
    }

    .button__sideBar--highlight{
        -webkit-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01));
        -moz-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01));
        box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01));
    }

    .button__sideBar--focus.button__sideBar--highlight{
        -webkit-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01)), 1px 3px 3px rgb(0 0 0 / 40%);
        -moz-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01)), 1px 3px 3px rgb(0 0 0 / 40%);
        box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01)), 1px 3px 3px rgb(0 0 0 / 40%);
    }


    .button__sideBar--highlightAnimated{
        -webkit-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01));
        -moz-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01));
        box-shadow: 0px 5px 0px 0px rgb(var(--colAccent01));
        -webkit-animation: sideBarButtonAlert 4s ease infinite;
        -moz-animation: sideBarButtonAlert 4s ease infinite;
        animation: sideBarButtonAlert 4s ease infinite;
    }

   @keyframes sideBarButtonAlert {
        0%   {box-shadow: 0px 5px 0px 0px rgba(var(--colAccent01),0);}
        50%   {box-shadow: 0px 5px 0px 0px rgba(var(--colAccent01),1);}
        100%   {box-shadow: 0px 5px 0px 0px rgba(var(--colAccent01),0);}
    }

    @keyframes sideBarButtonSwitch {
        0%   {box-shadow: inset 0px -3px 0px 0px rgba(var(--colUIText02),0), 3px 1px 3px rgba(0,0,0,0.4);}
        50%   {box-shadow: inset 0px -3px 0px 0px rgba(var(--colUIText02),1), 3px 1px 3px rgba(0,0,0,0.4);}
        100%   {box-shadow: inset 0px -3px 0px 0px rgba(var(--colUIText02),0), 3px 1px 3px rgba(0,0,0,0.4);}
    }

    .toolBox{
        background-image: linear-gradient(180deg, rgba(var(--colUIBack03),0.95) 90%, rgba(var(--colUIBack03),1) 99%);
        width: 100% !important;
        height: 0;
        max-height: calc(100vh - (var(--naviSize) * 2));
        min-height: 16em;
        padding: 2em 0.5em 2em 1.75em;
        min-width: unset;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        -webkit-box-shadow: 0px 3px 2px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 3px 2px rgba(0,0,0,0.3);
        box-shadow: 0px 3px 2px rgba(0,0,0,0.3);
    }

        ._AC .toolBox{
            padding: 0.75em 0.5em 1.3em 0.5em;
        }

        .toolBox.toolBox--large{
            min-height: 26em;
        }

        .button.toolBox__simpleResizer{
            left: unset;
            top: 1em;
            right: 2em;
            transform: unset;
        }

        .toolBox--large>.button.toolBox__simpleResizer{
            transform: scaleY(-1);
        }


    .resizer {
        width: 100%;
        height: var(--resizerSize);
        top: 0px;
        left: 0px;
        cursor: ns-resize !important;
    }

    .resizer::after{
        transform: rotate(90deg);
        top: 0px;
        bottom: unset;
        left: calc(50% - 0.3em);
    }


/* Tools oben nur für Filme ---------------------------------------------------------------------------------------------------------------------*/

    .sideTools--player{
        flex-direction: column-reverse;
        pointer-events: none;
    }

    main.main--player{
        flex-direction: column-reverse;
    }

    .sideBar--player{
        position: absolute;
        bottom: 0px;
    }



    .toolBox--player {
        background-image: linear-gradient(0deg, rgba(var(--colUIBack03),0.95) 90%, rgba(var(--colUIBack03),1) 99%);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 0.5em 0.5em 1em 0.5em;
        pointer-events: all;
        min-height: 18em;
        height: 30vh;
    }

    .button.edgeButton--player{
        top: unset;
        bottom: 0.25em;
    }

    .toolBox--player.fullScreen {
        top: unset;
    }

    .TAInfo--player{
        max-height: calc(100vh - (var(--naviSize) * 2) - var(--resizerSize) - 2.8em);
        pointer-events: all;
        padding: 0px 0px 1.5em 0px;
    }

    .TAInfo--AC{
        transition:
            height 0.3s ease;
    }

    .resizer--player{
        bottom: -0.5em;
        top: unset;
        pointer-events: all;
    }

        .resizer--player::after{
            bottom: calc(var(--resizerSize) / 4);
            top: unset;
      }

    .contentUI--player{
        margin-bottom: var(--naviSize);
    }
}


/* -------------------------------------------------------- Desktop längs -----------------------------------------------------------------*/

@media (min-height: 90em) and (orientation: portrait){

    .toolBox{
        min-height: 20em;
    }


}

@media (min-height: 120em) and (orientation: portrait){

    .toolBox{
        min-height: 24em;
    }

}

@media (min-width: 60em) and (orientation: portrait) {
    .button__mainMenu>.button__label {
        display: inline;
    }

    .button__mainMenu{
        aspect-ratio: unset;
        padding: 0 calc(var(--ButtonPadding) * 1.2);
        justify-content: flex-start;
    }
}





/* -------------------------------------------------------- quer allgemein -----------------------------------------------------------------*/

@media (orientation: landscape) {
    .toolBox {
        height: 100% !important;
        max-width: calc(100vw - (var(--naviSize) *2));
        min-width: 18em;
        flex-direction: row;
    }

    .toolBox.toolBox--player{
        min-width: 26em;
    }
}



/* -------------------------------------------------------- Desktop quer -----------------------------------------------------------------*/

@media (min-width: 90em) and (orientation: landscape){
    :root{
        --naviSizeDesk: calc(var(--naviSize) * 2.3);
    }

    header{
        width: var(--naviSizeDesk);
    }

    main{
        width: calc(100vw - var(--naviSizeDesk));
    }

    .menu__sub{
        left: calc(var(--naviSizeDesk) - 1em);
        min-width: 10em;
    }

    .accountMenu{
        left: var(--naviSizeDesk);
    }

    .button__mainMenu{
        justify-content: left;
        max-width: 100%;
    }


    .button__mainMenu>.button__label{
        display: inline;
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
    }


    .logoHeader{
        width: var(--naviSizeDesk);
        padding: 0 1em;
    }

        .logoHeader--normal{
            display: block;
            width: 100%;
        }

        .logoHeader--signet{
            display: none;
        }

        .schleife_ukraine{
            width: 5em;
        }

    .toolBox {
        max-width: calc(100vw - var(--naviSizeDesk) - var(--naviSize));
        min-width: 26em;
    }



    .node>.TAS__caption{
        max-width: 50em;
    }

    .button.changeLook__colorButton{
        margin: 0.2em;
    }

    .button.changeLook__colorButton--active:after{
        font-size: 1.3em;
    }

    .button.changeLook__colorButton--chosen{
        transform: scale(1.25);
    }

}

@media (min-width: 120em) and (orientation: landscape){

    .toolBox {
        min-width: 28em;
    }
}


@media (max-device-width: 42rem) and (orientation: portrait) {
    .entryList--narrow,
    .entryList--medium,
    .entryList--wide{
        max-width: unset;
    }
}

/* average mobiles */

@media (max-device-width: 23.9rem) and (orientation: portrait) and (pointer: coarse) {
    .accountMenu{
        width: 100%;
    }
    body, input, textarea {
        font-size: 0.8rem;
    }
}

@media (max-device-height: 23.9rem) and (orientation: landscape) and (pointer: coarse) {
    body, input, textarea {
            font-size: 0.8rem;
        }
}


/* high res mobiles */

@media (min-device-width: 24rem) and (orientation: portrait) and (pointer: coarse) {
    .accountMenu{
        width: 100%;
        }
}




 /* avarage Tablets */

    @media (min-device-width: 35rem) and (orientation: portrait) and (pointer: coarse) {
        body, input, textarea {
            font-size: 1rem;
            }
        .accountMenu{
            width: 26rem;
            }
    }

    @media
    (min-device-height: 35rem) and (orientation: landscape) and (pointer: coarse){
        body, input, textarea {
            font-size: 1rem;
            }
        #homeBoxes {
            padding: 2em;
            }
    }


    /* Apple */
    @supports (-webkit-touch-callout: none) {
        @media (min-device-height: 35rem) and (orientation: landscape) and (pointer: coarse){
            body, input, textarea {
                font-size: 0.8rem;
                }
            .infoBox {
                    max-width: 100%;
                    }
        }
    }

    /* large tablets */

    @media (min-device-width: 64rem) and (orientation: portrait) and (pointer: coarse) {
        body, input, textarea {
            font-size: 1rem;
            }
    }

    @media (min-device-height: 64rem) and (orientation: landscape) and (pointer: coarse) {
        body, input, textarea {
                font-size: 1rem;
                }
    }