/*
hallo ray, hier bitte KEINE ids oder ähnliche zugriffe
nur ganz allgemein funktionierende sachen - das hier soll sowas wie ein
Werkzeugkasten werden
*/

.dataInsert{
    max-height: 100%;
    max-width: 100%;
}

.link{
    color: rgb(var(--colAccent01));
    cursor: pointer;
}

    .noTouch .link:hover{
        color: rgb(var(--colAccent03));
    }


    .link--external:after{
        content: "➤";
        display: inline-flex;
        color: rgb(var(--colAccent01));
        align-items: center;
        transform: rotate(-35deg) translateY(-0.5em) translateX(0.25em) scale(0.75);
        transition: transform 0.2s ease;
    }

    .noTouch .link--external:hover:after{
        color: rgba(var(--colAccent01),0.6);
        transform: rotate(-35deg) translateY(-0.55em) translateX(0.5em) scale(0.85);
    }

    .button.link--external:after{
        margin-left: -0.5em;
    }

.accountMenu{
    position: absolute;
    left: var(--naviSize);
    top: 0px;
    z-index: 102;
    padding: 0px 1em 1em 1em;
    width: 26em;
    max-height: 100%;
    overflow: auto;
    border-radius: 0px 0px 0.5em 0px;
    background-color: rgba(var(--colUIBack03),0.95);
}

.menu{
    display: flex;
    flex-direction: column;
    position: relative;
}

.menu__entry,
.menu__title {
    display: flex;
    line-height: unset;
    color: rgb(var(--colUIText03));
}

    .menu__title{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.75em 0px 0.75em 0;
        border-bottom: 1px solid rgb(var(--colUIText04));
        margin-bottom: 1em;
    }

    .menu__titleText{
        width: 100%;
        text-align: center;
        font-size: 0.85em;
        margin: 0px;
        color: rgb(var(--colAccent02));
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /*  -------------------------Loader ------------------------ */

.loader{
    Position: absolute !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    background: rgba(var(--colUIBack04),0.9) !important;
    display: flex;
    transition: visibility, opacity 0.5s;
    z-index: 100;
    background-image: none;
    pointer-events: none;
    cursor: default;
    font-weight: 300;
    font-family: var(--fontFamily);
    color: rgb(var(--colUIText03));
    }

    .loader--main{
        z-index: 100;
    }

    .loader--large{
        min-height: 100vh;
    }

    .loader--clear{
        background: none !important;
    }

    .loader__content{
        Position: relative;
        display: flex;
        flex-direction: column;
        height: 5em;
        width: 5em;
        margin: 1em;
    }

    .loader__content>hr{
        Position: absolute;
        bottom: -1.5em;
        width: 0%;
        max-width: 5em;
        margin: 0px;
        background: rgb(var(--colUIText03));
    }

    .loader__text{
        display: flex;
        flex-direction: row;
    }

    .loader__text>span{
        opacity: 0;
        font-size: 1.3em;
        margin: 0.1em;
        animation: fadeline 4.2s linear infinite;
        -o-animation: fadeline 4.2s linear infinite;
        -moz-animation: fadeline 4.2s linear infinite;
        -webkit-animation: fadeline 4.2s linear infinite;
    }

        .loader__text>span:nth-child(2){
            animation-delay:0.1s;
            -o-animation-delay:0.1s;
            moz-animation-delay:0.1s;
            -webkit-animation-delay:0.1s;
        }
        .loader__text>span:nth-child(3){
            animation-delay:0.2s;
            -o-animation-delay:0.2s;
            moz-animation-delay:0.2s;
            -webkit-animation-delay:0.2s;
        }
        .loader__text>span:nth-child(4){
            animation-delay:0.3s;
            -o-animation-delay:0.3s;
            moz-animation-delay:0.3s;
            -webkit-animation-delay:0.3s;
        }
        .loader__text>span:nth-child(5){
            animation-delay:0.4s;
            -o-animation-delay:0.4s;
            moz-animation-delay:0.4s;
            -webkit-animation-delay:0.4s;
        }
        .loader__text>span:nth-child(6){
            animation-delay:0.5s;
            -o-animation-delay:0.5s;
            moz-animation-delay:0.5s;
            -webkit-animation-delay:0.5s;
        }
        .loader__text>span:nth-child(7){
            animation-delay:0.6s;
            -o-animation-delay:0.6s;
            moz-animation-delay:0.6s;
            -webkit-animation-delay:0.6s;
        }
        .loader__text>span:nth-child(8){
            animation-delay:0.7s;
            -o-animation-delay:0.7s;
            moz-animation-delay:0.7s;
            -webkit-animation-delay:0.7s;
        }
        .loader__text>span:nth-child(9){
            animation-delay:0.8s;
            -o-animation-delay:0.8s;
            moz-animation-delay:0.8s;
            -webkit-animation-delay:0.8s;
        }
        .loader__text>span:nth-child(10){
            animation-delay:0.9s;
            -o-animation-delay:0.9s;
            moz-animation-delay:0.9s;
            -webkit-animation-delay:0.9s;
        }
        .loader__text>span:nth-child(11){
            animation-delay:1.0s;
            -o-animation-delay:1.0s;
            moz-animation-delay:1.0s;
            -webkit-animation-delay:1.0s;
        }
        .loader__text>span:nth-child(12){
            animation-delay:1.1s;
            -o-animation-delay:1.1s;
            moz-animation-delay:1.1s;
            -webkit-animation-delay:1.1s;
        }
        .loader__text>span:nth-child(13){
            animation-delay:1.2s;
            -o-animation-delay:1.2s;
            moz-animation-delay:1.2s;
            -webkit-animation-delay:1.2s;
        }
        .loader__text>span:nth-child(14){
            animation-delay:1.3s;
            -o-animation-delay:1.3s;
            moz-animation-delay:1.3s;
            -webkit-animation-delay:1.3s;
        }
        .loader__text>span:nth-child(15){
            animation-delay:1.4s;
            -o-animation-delay:1.4s;
            moz-animation-delay:1.4s;
            -webkit-animation-delay:1.4s;
        }
        .loader__text>span:nth-child(16){
            animation-delay:1.5s;
            -o-animation-delay:1.5s;
            moz-animation-delay:1.5s;
            -webkit-animation-delay:1.5s;
        }
        .loader__text>span:nth-child(17){
            animation-delay:1.6s;
            -o-animation-delay:1.6s;
            moz-animation-delay:1.6s;
            -webkit-animation-delay:1.6s;
        }
        .loader__text>span:nth-child(18){
            animation-delay:1.7s;
            -o-animation-delay:1.7s;
            moz-animation-delay:1.7s;
            -webkit-animation-delay:1.7s;
        }
        .loader__text>span:nth-child(19){
            animation-delay:1.8s;
            -o-animation-delay:1.8s;
            moz-animation-delay:1.8s;
            -webkit-animation-delay:1.8s;
        }
        .loader__text>span:nth-child(20){
            animation-delay:1.9s;
            -o-animation-delay:1.9s;
            moz-animation-delay:1.9s;
            -webkit-animation-delay:1.9s;
        }
        .loader__text>span:nth-child(21){
            animation-delay:2.0s;
            -o-animation-delay:2.0s;
            moz-animation-delay:2.0s;
            -webkit-animation-delay:2.0s;
        }
        .loader__text>span:nth-child(22){
            animation-delay:2.1s;
            -o-animation-delay:2.1s;
            moz-animation-delay:2.1s;
            -webkit-animation-delay:2.1s;
        }


        @keyframes fadeline {
        0% {opacity:0;}
        40% {opacity:0;}
        50% {opacity:1;}
        60% {opacity:1;}
        100% {opacity:0;}
        }


    .loader__image{
        position: absolute;
        fill: none;
        --strokeWidth: 0.03em;
        stroke: rgb(var(--colUIText03));
        -moz-stroke: rgb(var(--colUIText03));
        stroke-width: calc(var(--strokeWidth) * 2);
        -moz-stroke-width: calc(var(--strokeWidth) * 2);
        stroke-linecap: round;
        -moz-stroke-linecap: round;
    }


        .loader__image--TBV{
            transform-origin: center;
            transition: transform 0.5s;
            transform: scaleY(0);
            animation: rotate1 4s linear infinite;
        }

        .loader__image--ARG{
            transform-origin: center;
            transition: transform 0.5s;
            transform: scaleY(0);
            animation: rotate2 4s linear infinite;
            animation-delay: 1s;
        }

        .loader__image--WAV{
            transform-origin: center;
            transition: transform 0.5s;
            transform: scaleY(0);
            animation: rotate1 4s linear infinite;
            animation-delay: 2s;
        }

        .loader__image--MASS{
            transform-origin: center;
            transition: transform 0.5s;
            transform: scaleY(0);
            animation: rotate2 4s linear infinite;
            animation-delay: 3s;
        }


    @keyframes rotate1 {
        0% {transform:perspective(300px) rotateX(90deg); opacity: 0.3;}
        12.5% {transform:perspective(300px) rotateX(0deg); opacity: 1;}
        25%, 100% {transform:perspective(300px) rotateX(0deg) rotateY(90deg); opacity: 0.3;}
    }

    @keyframes rotate2 {
        0% {transform: perspective(300px) rotateY(90deg); opacity: 0.3;}
        12.5% {transform: perspective(300px) rotateY(180deg); opacity: 1;}
        25%, 100% {transform: perspective(300px) rotateY(180deg) rotateX(90deg); opacity: 0.3;}
    }