:root{
    --naviHeight: 3em;
    --resizerSize: 1em;
    --lineHeight: 1.2;
    --fontFamily: Roboto, Roboto-Regular, sans-serif, -apple-system, HelveticaNeue;
    --fontWeight: 300;
    --fontSize: 0.8em;

    width: 100%;
    height: 100%;
}
*{
  box-sizing: border-box
}

body{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--colBG));
  font-family: var(--fontFamily);
  line-height: var(--lineHeight);
  font-weight: var(--fontWeight);
  font-size: var(--fontSize);
  }

.SVGIcon {
    --strokeWidth: 0.03em;
    width: 1.7em;
    fill: none;
    stroke: rgb(var(--colUIText03));
    stroke-width: var(--strokeWidth);
    stroke-linecap: round;
}
  
.tree{
  margin: 2em;
}

#topBar{
    display: flex;
    height: var(--naviHeight);
    background-color: rgb(var(--colUIBack03));
}

#navi, .content{
    width: 100%;
}


.content{
    height: calc(100% - var(--naviHeight));
    display: flex;
    flex-direction: column;
    position: relative;
}



                /*NAVI*/
#navi, .BG .content .resizeBox>.resizeBar{
    background-color: rgb(var(--colUIBack03));

}
#navi{
    /*display: flex;*/
    position: relative;
    height: var(--naviHeight);
    /*flex-shrink: 0;*/
    z-index: 10; /*to overlay player*/
}
    #navi>ul{
        display: flex;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        transition: max-height 0.3s;
    }
        #navi>ul>li{
            list-style-type: none;
        }
        #navi a{
            overflow: hidden;
            height: var(--naviHeight);
            padding: 1.2em;
            color: rgb(var(--colUIText03));
            text-decoration: none;
            display: flex;
            flex-direction: row;
            align-items: center;

        }

    #navi img, #navi svg,
    .content>.icon{
        height: calc(var(--naviHeight) / 3 * 1.5);
        flex-shrink: 0; /*for linkList*/
    }
    #navi a>span{
        display: none;
        padding-left: 0.5em;
    }
    .noTouch #navi a:hover{
            background-color: rgba(var(--colBG),0.5);
            color: rgb(var(--colPro01));
        }

        .noTouch #navi a:hover .SVGIcon{
        stroke: rgb(var(--colPro01));
        }

        #navi .focus,
        .noTouch #navi .focus:hover {
            background-color: rgb(var(--colBG));

        }
        #navi .focus>*{
            opacity: 0.8;
        }
        
        #navi .inactive{
            pointer-events: none;
            opacity: 0.3;
        }
    
    #menuSwitch{
        display: none;
    }

    #wappTitle {
        line-height: 3em;
        color: rgb(var(--colUIText03));
        text-align: center;
        margin-left: 0.5em;
        display: none;
        text-transform: capitalize;
    }

    #navi #logoTopRight{
        position: absolute;
        box-sizing: content-box;
        right: 0px;
        padding: 0em 0.5em;
    }

    svg .Logo_TypeColor{
        fill: rgb(var(--colUIBack01));
        stroke: none;
    }

    #navi #CSSSwitch{
        position: absolute;
        right: 7.5em;
        height: 100%;
        
    }
    body, #navi, .resizeBar, .focus, .focus:after, .icon{
        transition: 0.3s;
        transition-property: fill, background, background-color, color, border;
    }

    button {
        background: none;
        border: none;
        padding: 0px 0.7em;
        font: var(--fontFamily);
        font-size: 1em;
        cursor: pointer;
        line-height: 1em;
    }

    button:focus {
        outline: none;
        border: none;
    }

    .noTouch button:hover{
        background-color: rgba(var(--colBG),0.5);
        transform: scaleX(-1);
    }

    .noTouch button:hover svg {
        stroke: rgb(var(--colPro01));
    }

.content .resizeBox>.resizeBar{
    z-index: 2;
    background-color: rgb(var(--colUIBack03));
    border-width: 0px;
    border-top: 1px;
    border-style: solid;
    border-color: rgb(var(--colUIBack04));
}

    .hasTouch .resizeBox{
        --barSize: 2em;
    }
        .hasTouch .resizeBox>.resizeBar{
            border-width: 2px;
        }

/* #blockA.isShrinked{
    padding: 0px;
} */

.content>.dragBox{
    max-width: 100%;
}
#blockA {
    flex-shrink: 0;
    flex-grow: 0;
    background: white;
}
#blockB{
    flex-shrink: 1;
    flex-grow: 1;
    transition-duration: 0.1s;
}

#structures ul{
    margin: 0px;
    padding: 1.5em 0px;
    white-space: nowrap;
}
#structures li {
    --listHeight: 2em;
    list-style-type: none;
    line-height: var(--listHeight);
    padding: 0px 2em;
    text-align: left;
}
    #structures li.focus {
        background-color: rgb(var(--colUIBack03));
    }
    .noTouch #structures li:hover {
        background-color: rgb(var(--colUIBack04));
        color: rgb(var(--colUIText01));
    }
    #structures li>a {
        color: rgb(var(--colPro02));
        text-decoration: none;
        display: inline-block;
        padding: 0px 1em;
    }
    

.blurred {
    filter: blur(7px);
}

.content .jain>svg {
    border-radius: 1em;
    background-color: rgb(var(--colUIBack04));
    cursor: pointer;
}

#blockA.willkommen{
    background-image: url(graphics/popup_bg.jpg);
    background-position: center;
    background-size: cover;
}
    #blockA.willkommen canvas,
    #blockA.willkommen .slider,
    #blockA.willkommen .SVGIcon,
    #blockA:not(.willkommen) #willkommen{
        display: none;
    }
    #willkommen{
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 100%;
        min-height: 100%;
        
        color: white;
        padding: 5% 5% 10% 10%;
        animation: showUp 1s ease-in 1;
    }


@keyframes showUp {
    0% {opacity: 0;}
    100%{opacity: 1;}
}
    #willkommen h2{
        max-width: 90%;
        font-weight: 100;
        font-size: calc(var(--fontSize) * 3.2);
        margin-bottom: 2em;
    }
    #willkommen p{
        max-width: 90%;
        width: 34em;
        font-size: calc(var(--fontSize) * 2.0);
        line-height: calc(var(--lineHeight) * 1.1);
        }

    @media (pointer: coarse) {
        #willkommen p{
            font-size: calc(var(--fontSize) * 1.2);
            line-height: calc(var(--lineHeight) * 0.9);
            margin: 0.7em 0em;
        }
        #willkommen h2{
        font-size: calc(var(--fontSize) * 2);
        margin-bottom: 1em;
        }
    }

    #willkommen img,
    #willkommen svg{
        height: 2em;
        float: left;
        margin-top: -0.81em;
        margin-left: -0.5em;
    }
        #willkommen svg .wings_blau{
            fill: white;
        }
    #willkommen a{
        color: rgb(var(--colPro01));
        margin-bottom: 2.5em;
        text-decoration: none;
    }



/*.content.knowledge{
    flex-direction: column-reverse;
}*/
.knowledge #blockA{
    height: 66%;
}
.knowledge .tree{
    --iconSize: calc(var(--lineHeight) * 0.8em);
}
    .knowledge .TAStructure .focus:after {
        background-color: rgb(var(--colUIBack03));
    }
        .knowledge .TAStructure .focus:hover:after {
            background-color: rgb(var(--colUIBack02));
        }

.content .TAPlayer>.SVGIcon{
    width: calc(var(--naviHeight) / 3 * 2);
    height: calc(var(--naviHeight) / 3 * 2);
    margin-left: calc(0px - var(--naviHeight) / 2.25);
    margin-bottom: calc(var(--naviHeight) / 6);
    }

    .content .TAPlayer>.playPause{
width: var(--naviHeight);
    height: var(--naviHeight);
    margin-left: calc(0px - var(--naviHeight) / 2);
    margin-bottom: 0px;
    stroke-width: calc(var(--strokeWidth) / 3 * 2);
    }

    @-moz-document url-prefix() {
        .content .TAPlayer>.playPause{
            stroke-width: 0.025em;
        }
    }
    .noTouch .content .TAPlayer>.SVGIcon:hover {
        fill: rgb(120,120,120);
        stroke: rgb(120,120,120);
        transition: none;
    }



    /*RESCALING*/


@media (max-height: 110vw) {
    .content{
        flex-direction: row;
    }
    .content.knowledge{
        flex-direction: row-reverse;
    }
        #blockA, #blockB{
            height: 100%;
        }
        .knowledge #blockA{
            height: auto;
            width: 66%;
        }
}
     /*click - navi size 1*/
@media screen and (max-width: 32em) {
    #navi>ul{
        flex-direction: column;
        min-width: 40%;
        position: absolute;
        left: 0px;
        top: var(--naviHeight);
        background-color: rgb(var(--colUIBack03));
        max-height:0px;
    }
        #navi.open>ul{
            max-height: 30em;
            padding-bottom: 1em;
        }
        #menuSwitch, #wappTitle{
            display: block;

        }
        #navi ul>li>a{
            padding: 0px 0.6em;
        }
        #navi a>span{
            display: inline;
        }
}
    /*touch - navi size 1*/
@media (max-width: 65em) and (pointer: coarse) {
    #navi.open>ul{
        max-height: 30em;
        padding-bottom: 1em;
    }
    #navi>ul{
        flex-direction: column;
        min-width: 40%;
        position: absolute;
        left: 0px;
        top: var(--naviHeight);
        background-color: rgb(var(--colUIBack03));
        max-height:0px;
    }
        #menuSwitch, #wappTitle{
            display: block;
        }
        #navi ul>li>a{
            padding: 0px 0.6em;
        }
        #navi a>span{
            display: inline;
        }
}

    /*click - navi size 3*/
@media screen and (min-width: 55em) {
    #navi a>span{
        display: inline;
    }
}
    /*touch - navi size 3*/
@media (min-width: 84em) and (pointer: coarse) {
    #navi a>span{
        display: inline;
    }
}

    /*touch - font size and icon appearance*/

@media (max-device-height: 812px) and (orientation: portrait) and (pointer: coarse) {
    body{
        font-size: calc(var(--fontSize) * 2.8);
        }
    .SVGIcon{
        stroke-width: calc(var(--strokeWidth) / 2.1);
        }
    .content .TAPlayer>.playPause {
        stroke-width: calc(var(--strokeWidth) / 3);
        }
}

@media (max-device-height: 414px) and (orientation: landscape) and (pointer: coarse) {
    body{
        font-size: calc(var(--fontSize) * 1.6);
        }
    .SVGIcon{
        stroke-width: calc(var(--strokeWidth) / 1.5);
        }
    .content .TAPlayer>.playPause {
        stroke-width: calc(var(--strokeWidth) / 2);
        }
}


@media (min-device-height: 820px) and (orientation: portrait) and (pointer: coarse) {
    body{
        font-size: calc(var(--fontSize) * 1.3);        
        }
    .SVGIcon{
        stroke-width: calc(var(--strokeWidth) / 1.5);
        }
    .content .TAPlayer>.playPause {
        stroke-width: calc(var(--strokeWidth) / 2);
        }
}