body {
    background-color: white;
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: scroll;
    margin: 0px;
    display: grid;
    grid-template-rows: 3vh 3vh 6vh 23vh 30vh 23vh 6vh 3vh 3vh;
	grid-template-columns: 3vh auto;
    font-family: "Antarctica";

}
.rand{
    width: 20vw;
    height: 100vh;
    order: 100;
}
.inforaper{
    margin-left: 3vh;
    margin-bottom: 3vh;
}
.info{
    font-family: "Antarctica";
    font-variation-settings: "wdth" 100, "wght" 600;
    

}

#buttonContainer{
    grid-row:  3 / 7;
	grid-column: 2 / 3;

    position: fixed;
    top: 6vh;
    margin-left: 3vh; 
    
    display: flex;
    width: 30vw;
    flex-direction: column;
    font-family: "Antarctica";
    height: 58vh;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    
    
}
        #buttonContainer::-webkit-scrollbar {
            visibility: hidden;
        }


button {
    visibility: visible;
    border: 0px;
    margin-bottom: 7px;
    padding: 0;
    background-color: transparent;
    /* filter: blur(2px); */
    color: black;
    font-family: "Antarctica";
    font-size: 1rem;
    letter-spacing: 0.07rem;
    font-variation-settings: "wdth" 100, "wght" 600 ;
    text-align: left;
   
}
        button:hover{
            font-variation-settings: "wdth" 100, "wght" 600, "ital" 12;
            cursor: pointer;
        }
        .durchgestrichen{
            text-decoration: line-through 1px black;
            font-variation-settings: "wdth" 100, "wght" 600, "ital" 12;
            
        }

.zeitachse{
    width: 100vw;
    height: 0.7px;
    bottom: 3vh;
    position: fixed;
    background-color: white;
    pointer-events: none;
}

ul{
    grid-row:  6 / 10;
	grid-column: 1 / span 2;

    margin: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-inline-start: 0px;
    display: flex;
    align-items: flex-end;


    
} 

    .eintrag{
        height: 35vh;   
        right: 50vw;
        border-right: 0.35px solid white;
        border-left: 0.35px solid white;
      
        
    } 


/* gestresst Merkmale //////////// */
.nein-gestresst, .Nein-gestresst{
    background-color:orangered;
    
}

.ja-gestresst{
    background-color: blue;
    
}

.neutral-gestresst{
    background-color: blueviolet;
    
}

/* Text und hover ///////////////////////////////////////////////////////////// */

.tooltiptext{
    font-size: 1rem;
    font-variation-settings: "wdth" 100, "wght" 600;
    letter-spacing: 0.07rem;
    color: black;
    transition: 0s;
    opacity: 0;
}
    .Ueberschrift{
        opacity: 0;
        position: fixed;
        top: 6vh;
        /* top: -5vh; */
        left: 33vw;
        pointer-events: none;
        z-index: 5;
    }

    .Beschreibung{
        /* border-left: 0.7px solid black; */
        background-color: white;
        position: relative;
        /* bottom: 100vh; */
        bottom: 118vh;

        height: 59vh;
        width: 100vw;
    
        display: flex;
        justify-content: flex-start;
        align-items: baseline;

        pointer-events: none;
        z-index: 2;
    }
    .Beschreibung p{
        margin-left: 1vw;
        margin-top: 27vh;

    }

    .masse{
        visibility: visible;
        border-left: 0.7px solid black;
        /* background-color: white; */
        height: 59vh;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        pointer-events: none;
        z-index: 5;
    
        overflow-x:visible;
    
        transition: 0.2s;
        bottom: 70vh;
        
        
    }
    
    .zeit{
        font-family: "Oswald";
        font-size: 1rem;
        margin: 0;
        margin-top: 4vh;
        letter-spacing: 0.07rem;
        color: black;
        background-color: white;
        margin-left: 1vw;
    
        
    }
    .einheit{
        /* visibility: hidden; */
        font-family: "Antarctica";
        letter-spacing: 0.07rem;
        font-variation-settings: "wdth" 100, "wght" 600 ;
        font-size: 1rem;
        color: black;
        margin-top: 4vh;
        margin-left: 1vw;
    }

/*  hover /////////////////////////////////////////////////////////////////////////// */

li:hover :first-child{
    bottom: 59vh;
    width: 80vw;
    visibility: visible; 
    transition: 0.7s;
    cursor: pointer;
    
}

li:hover .Ueberschrift{
    /* top: 6vh;  */
    opacity: 100%;
    
}

li:hover .Beschreibung{
    /* bottom: 89vh; */
    /* z-index: 5; */
    opacity: 100%;
    
}

ul:hover #buttonContainer button{  
    visibility: hidden;
    
}

/* JS class ////////////////////////////////////////////////////////////////////////// */

.big{
    /* transform: scale(1.2); */
    transition: width 0.3s ease-in-out;
    display: block;

    
}

.einklappen{
    transition: opacity 0.1s;
    transition-delay: 0.3s;
    display: none;
}


/* Scrollbars //////////////*/

/* #buttonContainer::-webkit-scrollbar {
    width: 200px; /* Schmale Scrollbar */
    /* background-color: transparent; Unsichtbarer Hintergrund */ 
    /* z-index: -1;
    visibility: hidden;
}

#buttonContainer::-webkit-scrollbar-thumb {
        background: radial-gradient(circle, black 40%, transparent 40%); Blauer Punkt */
        /* background-size: 200px 280px; Abstand zwischen den Punkten */
        /* background-repeat: repeat-y; Vertikale Wiederholung */
        /* z-index: -1;
        background-color: transparent;
    }

    #buttonContainer::-webkit-scrollbar-track{
            background-color: transparent;
            visibility: hidden;
            z-index: -1;
        }

        #buttonContainer::-webkit-scrollbar-corner{
            visibility: hidden;
        } */
        /*///////////////

        /* body::-webkit-scrollbar {
            height: 10px; 
            z-index: -1; 
            position: fixed;
            border-radius: 100px;
            
        }
                
            body::-webkit-scrollbar-thumb {
                background: radial-gradient(circle, blue 40%, transparent 40%); 
                background-size: 200px 280px; 
                background-color: orange;
                background-repeat: repeat-y; 
                
            }
                
                    body::-webkit-scrollbar-track{
                            background-color: transparent;
                            display:none;
                            z-index: -1;
                        }
                
                    body::-webkit-scrollbar-corner{
                            visibility: hidden;
                        } */