html {
    scroll-behavior: smooth;
    --gray: #303030;
    --gray2: #e6e6e6;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    background-color: white;


    /*
    --white: black;
    --black: white;
*/


    --white: #e6e6e6;
    --black: black;

    --font_size: 2.5rem;
     --font_size_2: 1.7rem;
     --font_size_bu: 1.7rem;
    overflow: hidden;
    scrollbar-color: var(--gray) black;
    scrollbar-width: thin;

}

/*_scrollbar _*/
::-webkit-scrollbar {
    width: 2vh;
    border: 2%;

}

::-moz-scrollbar {
    width: 2vh;
    border: 2%;

}

Track::-webkit-scrollbar-track {
    background: var(--gray);

}

Track::-moz-scrollbar-track {
    background: var(--gray);

}


::-webkit-scrollbar-thumb {
    background: var(--gray);
    opacity: 0;

}

::-moz-scrollbar-thumb {
    background: var(--gray);
    opacity: 0;
}



/*_______________*/

body {
    margin: 0;
    width: 100%;

    /*    letter-spacing: -0.12rem;*/
    /*    letter-spacing: -0.117em;*/

}

a {
    text-decoration: none;
    color: var(--white);

}


ul.no-bullets {
    list-style-type: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
    margin: 0;
    /* Remove margins */
    cursor: pointer;
}



/*fonts   */

@import url("https://use.typekit.net/spy8bwp.css");

h1 {
    font-size: var(--font_size);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 0vh;

    color: var(--white);

}
* {
    font-family: neue-haas-grotesk-display, sans-serif;
}


.turn {}

.active {
    color: var(--gray);
}

.display_none {
    display: none !important;
}

.display {
    display: block !important;
}

.test_ {
    background: red;
    z-index: 400;
    width: 20vw;
    height: 20vw;
    cursor: pointer;
}


.hover_stage {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 5;
    width: 8vw;
    height: 100vh;
    background-color: pink;
    z-index: 300;
    opacity: 0;
    justify-self: right;

}

h2 {
    font-size: var(--font_size);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
/*    margin-top: 0vh;*/


}

h3 {
    font-size: var(--font_size);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
}

h4 {
    font-size: 1.5rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);


}

h5 {
    font-size: 3.5rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--white);
    z-index: 600;


}



.projekt_list li {

    margin: 23px 0;
    line-height: 0.8em;
 
}



/*header*/
.header {

    display: grid;
    grid-template-columns: 1vw 20vw 78vw 1vw;
    grid-template-rows: 2vh 10vh ;
    z-index: 200;
    width: 100vw;

    position: fixed;
    /*    background-color: black;*/
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.557936553527661) 72%, rgba(0, 0, 0, 0) 100%);

}

/*grid */

.container {
    display: grid;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 100vw;


    grid-template-columns: 1vw 20vw 59vw 20vw;
    grid-template-rows: 90vh 10vh 100vh 100vh;
    grid-auto-flow: row;
    background-color: var(--black);
}

#logo {

    /*    height: 8vh;*/
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    width: 80vw;

    z-index: 200;






}

.top {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;


}



#about {

    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: end;
    z-index: 200;
}


#nav_Projekt {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self:flex-end;

}

.test {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    height: 20vw;
    z-index: 99;


}

#nav_Random {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self:flex-end;
    z-index: 4000;
    display: block;
    



}

.inactive {

    color: aqua;
}

.arrow_side {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    /*    align-self: center;*/
    margin-top: 38vh;
    z-index: 800;
    width: 3vw;
    height: 4vh;
/*    mix-blend-mode: difference;*/
}


.projekt_list {
    z-index: 1;
}
.projekt_list {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    margin-top: 15vh;
    display: block;

    font-size: var(--font_size);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: var(--gray);
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal
}


.projekt_list_back {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    width: 20vw;
    /*
z-index: 79;
    background-color: black;
*/


}


.preview_container {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    z-index: 200;
    justify-self: left;
    align-self: center;
}

.preview_container > div img {
    height: 30vh;
    margin-left: 8vw;
}

.preview_text {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    z-index: 800;
    display: flex;
    justify-self: left;
    align-self: flex-end;
    margin-left: 8vw;
}



.display_pre {
    display: block;

}

.preview_1 {


    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 40;




}

.preview_2 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 40;



}

.preview_3 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 40;




}

.preview_4 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;





}

.preview_5 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;

}

.preview_6 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;

}

.preview_7 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;

}

.preview_8 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;

}

.preview_9 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;

}

.preview_10 {

    width: 20vw;
    height: 30vh;
    display: none;
    z-index: 4;

}



.preview_background {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
    z-index: 1;
    height: 100vh;
    width: 80vw;


    /*
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7932306711747199) 61%, rgba(255, 255, 255, 0) 100%);
*/


    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8212418756565126) 76%, rgba(0, 0, 0, 0) 100%);
    /*    filter: blur(0.3rem);*/
}


#item {
    transition-timing-function: ease-in;
    transition-duration: 0.5s;
    transition-delay: 0s;
    /*transition: all 0.05s ease-out;*/
    /*background-color: #fff;*/
    
    /*    width: 60vw;*/

    width: 0vw;
    z-index: 1;
      opacity: 0;


}


#item_2 {

    /*  background-color: #b82b21;*/
    opacity: 1;



}

.hovered {
    /*background-color:#000 !important;*/
    z-index: 199 !important;
    
    /*    width: 80vw !important;*/

    width: 75vw !important;
      opacity: 1!important;

}

.p1 {
    width: 20vw;
    color: var(--gray);
}

.p1:hover {
    color: var(--gray2; ) !important;
}

.p2 {
    width: 20vw;
    color: var(--gray);
}

.p2:hover {
    color: var(--gray2) !important;
}

.p3 {
    width: 20vw;
    color: var(--gray);
}

.p3:hover {
    color: var(--gray2) !important;
}

.p4 {
    width: 20vw;
    color: var(--gray);
}

.p4:hover {
    color: var(--gray2) !important;
}

.p5 {
    width: 20vw;
    color: var(--gray);
}

.p5:hover {
    color: var(--gray2) !important;
}

.p6 {
    width: 20vw;
    color: var(--gray);
}

.p6:hover {
    color: var(--gray2) !important;
}

.p7 {
    width: 20vw;
    color: var(--gray);
}

.p7:hover {
    color: var(--gray2) !important;

}



.projekt_stage {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: darkblue;
    z-index: 90;



    /*    background-color: hotpink;*/

}

.projekt_content {

    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    justify-self: left;
/*    padding-left: 4vw;*/

    width: 100vw;
    height: 100vh;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: scroll;





}

.projekt_content_mobile {

    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
    display: none;
    width: 100vw;

    background: black;


}

.projekt_content_mobile img {}

.blur {
    filter: blur(1.5rem);

}

/* about  */
.playgound_stage {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
    overflow-y: scroll;
}

/* about  */
.about_stage {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    height: 100vh;
/*    overflow-x: hidden;*/


    /*    background-color: greenyellow;*/
}

.about_content {
    display: block;
    overflow-x: scroll;
    width: 100vw;
    height: 100vh;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    z-index: 199;
   


}


.swinger-container {

    width: 100vw;
    /*    display: none;*/

    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: center;
    align-self: center;
}

.img_swinger {


    height: 70vh;
    width: auto;

    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    z-index: 500;
    
}
.prozess {
    background-color: black;
    z-index: 20000;
    display:none;
    width: 100vw;
    height: 100vh;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: left;
    align-self: top;
    
}
.prozess_text{
    margin-left: 8vw;  
    margin-top: 8vh;  
    font-size: 1.7rem;
    width: 65vw;
}
/*___impressum __________*/
.dokument_container{
    background-color: black;
    overflow: scroll;
}
.pfeil_1{
    width: 20vh;
}
.impressum {
    overflow: scroll;
}