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

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

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

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

    .chat__text{
        font-size: 0.9em;
        }

    details{
        font-size: 0.8em;
    }

    .button--small{
        font-size: 0.9em;
    }
}


@media (pointer: coarse){
    .TAInfo {
        min-width: 18em;
    }

    .TAInfo--player{
        min-width: 20em;
    }

    .entryInput {
        resize: vertical;
        min-height: 2.3em;
        padding: 0.5em;
    }

    .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 0px;
        flex-direction: row;
        transition: none;
    }

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

        .schleife_ukraine{
            width: 3.5em;
        }

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

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

    #navi .entryButton{
        align-items: center;
        display: flex;
        padding: 0.7em;
        margin: 0.5em;
    }

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

    /* #navi.menu--open{
        top: var(--naviSize);
        left: 0px;
        padding: 0em 0.5em 1.5em 0em;
    } */

    .button__mainMenu{
        margin: 0px 0.5em;
    }

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


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

    .TAInfo{
        align-items: center;
        height: 16em;
        width: 100%;
        padding: 0px 0.5em 0px 1.3em;
        max-height: calc(100vh - (var(--naviSize) * 2) - var(--resizerSize) - 1.2em);
    }

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

    .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{
        bottom: 0px;
        width: 100%;
        height: unset;
        flex-direction: column;
        min-height: unset;
        min-width: 20em;
    }

        .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 0.5em 0.5em;
        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(--colAccent));
        -moz-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent));
        box-shadow: 0px 5px 0px 0px rgb(var(--colAccent));
    }

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


    .button__sideBar--highlightAnimated{
        -webkit-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent));
        -moz-box-shadow: 0px 5px 0px 0px rgb(var(--colAccent));
        box-shadow: 0px 5px 0px 0px rgb(var(--colAccent));
        -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(--colAccent),0);}
            50%   {box-shadow: 0px 5px 0px 0px rgba(var(--colAccent),1);}
            100%   {box-shadow: 0px 5px 0px 0px rgba(var(--colAccent),0);}
        }

    .toolBox {
        background-image: linear-gradient(180deg, rgba(var(--colUIBack03),0.9) 90%, rgba(var(--colUIBack03),1) 99%);
        max-height: calc(100vh - (var(--naviSize) * 2));
        max-width: 100%;
        width: 100%;
        padding: 3.5em 0.5em 1.3em 0em;
        min-width: unset;
        justify-content: center;
        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: 1em 0.5em 1.3em 0em;
        }

        .toolBox__closeX{
            left: 1em;
        }

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

            .toolBox__simpleResizer--reversed{
                transform: scaleY(-1);
            }


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

    .resizer::after{
        transform: rotate(90deg);
        top: calc(var(--resizerSize) / 5.5);
        bottom: unset;
        left: calc(50% - 0.3em);
    }



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

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

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

    .toolBox--player {
        top: 0px;
        bottom: unset;
        background-image: linear-gradient(0deg, rgba(var(--colUIBack03),0.9) 90%, rgba(var(--colUIBack03),1) 99%);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 0.8em 0.8em 3em 0.8em;
        position: absolute;
        pointer-events: all;
    }

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

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

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

    .resizer--player{
        bottom: calc(0em - (var(--resizerSize) / 3));
        top: unset;
        pointer-events: all;
    }

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

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




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

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

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

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

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

    #navi>*>.entryButton {
        align-items: unset;
        padding-left: 0.95em;
        justify-content: unset;
    }

    #navi>*>.menu__entryLabel{
        display: inline;
    }


    .logoHeader{
        width: var(--naviSizeDesk);
    }

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

        .logoHeader--signet{
            display: none;
        }

        .schleife_ukraine{
            width: 5em;
        }

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

        .button--activeDouble{
        border-right: 20px solid rgb(var(--colUIText03));
    }


    .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);
    }

}

    /* average mobiles */

    @media (max-device-width: 23.9rem) and (orientation: portrait) and (pointer: coarse) {
        /* body{
            border: 5px solid blue;
            } */

        .subMenu{
            width: 100%;
        }

        body, input, textarea {
            font-size: 0.8rem;
        }

    }

    @media (max-device-height: 23.9rem) and (orientation: landscape) and (pointer: coarse) {
        /* body{
            border: 5px solid blue;
            } */

        body, input, textarea {
                font-size: 0.8rem;
            }

    }


    /* high res mobiles */

    @media (min-device-width: 24rem) and (orientation: portrait) and (pointer: coarse) {

        /* body{
            border: 5px solid red;
            } */

        .subMenu{
            width: 100%;
            }

        body, input, textarea {
            font-size: 0.9rem;
            }

        .logoHeader{
            width: calc(var(--naviSize) * 2.3);
            width: calc(var(--naviSize) * 3.2); /* mit Ukraine Schleife */
        }

    }

    @media (min-device-height: 24rem) and (orientation: landscape) and (pointer: coarse) {

        /* body{
            border: 5px solid red;
            } */

        body, input, textarea {
                font-size: 0.9rem;
            }

    }




 /* avarage Tablets */

    @media (min-device-width: 35rem) and (orientation: portrait) and (pointer: coarse) {

        /* body{
            border: 5px solid green;
            } */

        body, input, textarea {
            font-size: 1rem;
            }

        .subMenu{
            width: 26rem;
            }


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

        .logoHeader--signet{
            display: none;
        }


    }

    @media
    (min-device-height: 35rem) and (orientation: landscape) and (pointer: coarse){

        /* body:not(.fullScreen){
            border: 5px solid green;
            } */

        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:not(.fullScreen){
                border: 5px solid yellow;
                }
        */
            body, input, textarea {
                font-size: 0.8rem;
                }

            .homeBox {
                    max-width: 100%;
                    }
        }
    }

    /* large tablets */

    @media (min-device-width: 64rem) and (orientation: portrait) and (pointer: coarse) {

        /* body:not(.fullScreen){
            border: 5px solid violet;
            } */

            body, input, textarea {
                font-size: 1rem;
                }
       }

    @media (min-device-height: 64rem) and (orientation: landscape) and (pointer: coarse) {

        /* body:not(.fullScreen){
            border: 5px solid violet;
            }  */

            body, input, textarea {
                font-size: 1rem;
                }

    }