/* hier erst Sachen eintragen, wenn Ihr den Vortrag zu „@media-Queries“ hattet! */

/*-----Navigator-----*/

/*nav ul{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
   
}*/


/*======Startseite=========*/


nav {
    display: none;
}

.Logo_klein {
    display: unset;
    height: 4vh;
    width: auto;
    position: absolute;
    top: 2vh;
    left: 2vw;
}

.LogoG {
    padding: 0 2vw 0 2vw;
}

#kopf {
    position: absolute;
    top: -13vh;
    /*top:-50vh;*/
    z-index: -1;
    transition: all 1.5s ease-in-out;
}

#kopf.tief {
   top: 0;
    
}

#naviButton {
    /*width: 90%;
    margin-left: 30%;*/
    display: unset;
    cursor: pointer;
    transition: opacity 0.3s;
    grid-column: 3;
    transition: all 1s ease-in-out;
    height: 4vh;
    width: auto;
    position: absolute;
    right: 2vw;
    top: 2vh;



}

#naviButton:hover {
    opacity: 0.6;
}

#naviButton img {
    width: 10px;
    transition: all 0.3;

}

#naviButton.gedreht {
    transform: rotate(-90deg);

}

#smart {


    font-size: 2vw;
    font-weight: 400;
    color: yellowgreen;

    display: unset;
    align-items: center;
    /* width: 50%; */
    /* width: 5em;*/
    /*width: clamp(320px, 50%, 600px);*/
    /* height: 100vh;*/
    /* ganze Browserfenster-Höhe */
    position: fixed;

    /*top: ?????; diese Position soll "nav" nach Anklicken einnehme */
    /* nav-Element weit nach oben aus dem sichtbaren Bereich verschieben */
    /*top: 150vh;*/
    top: -100vh;
    right: 0;
    z-index: 1000;
    /* ganz im Vordergrund */
    /*background-color: black;*/
    color: #fff;
    font-weight: 200;
    font-size: clamp(1.5rem, 3vw, 4rem);
    transition: all 2s ease-in-out;
    width: 45vw;

}

/* diese Klasse wird via Javascript ein-/ausgeschaltet ("toggle") */
/* damit wird das Menü dann sichtbar! */
#smart.sichtbar {

    top: 8vh;
    width: 45vw;
}




#smart ul {
    list-style-type: none;
    display: grid;

    grid-template-columns: 1fr;

}

#smart li {
    padding: 1vh 10%;
    font-size: 6vw;
    font-weight: 400;
    /*border-bottom: 1px solid;*/
}



/* Menüpunkt der Seite, auf der man sich gerade befindet */
#smart li.current {
    /*background-image: linear-gradient(to right,
            rgba(255, 255, 255, 0.4) 3%,
            transparent);*/
    font-weight: 900;
    letter-spacing: -2px;
}


/*================== Projetseite =========================*/

/*#gallery {
   
    top: 15vh;
    background: white;
}*/

/*#gallery img{
    height: 100%;
    width: auto;
}*/

.box-flex {
    font-size: 7vh;
}

main{
   padding: 12vh 0 0 0;

}

.De{
    margin-top: 0;
}

.Holzp{
    margin-top: 0;
}



/*=========================Orbit navi==================*/
#immer {
    display: unset;
    position: fixed;
    top: -100vh;
    width: 100%;
     background: white;
    padding: 2vh 2vw 2vh 2vw;
 
    

    transition: background 3s cubic-bezier(0.45, 0, 0.55, 1), top 2s cubic-bezier(0.16, 1, 0.3, 1);*/
   


}

#immer.background {
 
    top: 0;
   
    background: black;
    z-index: 100;
}

#Buttonnavi {
    /*width: 90%;
    margin-left: 30%;*/
    display: unset;
    cursor: pointer;
    transition: opacity 0.3s;
    grid-column: 3;
    transition: all 1s ease-in-out;
    height: 4vh;
    width: auto;
    position: absolute;
    right: 2vw;
    top: 2vh;



}

#Buttonnavi:hover {
    opacity: 0.6;
}

#Buttonnavi img {
    width: 10px;
    transition: all 0.3;

}


#smart_klein {


    font-size: 2vw;
    font-weight: 400;
    color: yellowgreen;

    display: unset;
    align-items: center;
    
    position: fixed;

    top: -100vh;
    right: 0;
    z-index: 1000;
   
    color: #fff;
    font-weight: 200;
    font-size: clamp(1.5rem, 3vw, 4rem);
    transition: all 2s ease-in-out;
    width: 45vw;

}

/* diese Klasse wird via Javascript ein-/ausgeschaltet ("toggle") */
/* damit wird das Menü dann sichtbar! */
#smart_klein.sichtbar {

    top: 8vh;
    width: 45vw;
    background: black;
}




#smart_klein ul {
    list-style-type: none;
    display: grid;

    grid-template-columns: 1fr;

}

#smart_klein li {
    padding: 1vh 10%;
    font-size: 6vw;
    font-weight: 400;
    /*border-bottom: 1px solid;*/
}



/* Menüpunkt der Seite, auf der man sich gerade befindet */
#smart_klein li.current {
    /*background-image: linear-gradient(to right,
            rgba(255, 255, 255, 0.4) 3%,
            transparent);*/
    font-weight: 900;
    letter-spacing: -2px;
}

/*=========================Orbit==================*/
main .Orbit {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 10vh;
    /*margin: 7vh 3vw 0vw 3vw;*/
    
}

/*main picture{
    position: relative;
    top: 20vh;
}*/

.Or1{
    grid-column: 3/ span 2;
    grid-row: 1;
}

main h1 {
    grid-column: 1/ span 2;
}

.Or2{
    grid-column: 1;
    grid-row: 1;
    align-items: end;
}

.Or3{
    grid-column: 1 /span 4;
}

main article{
    grid-column: 1 /span 4;
}
 
.Or4{
    grid-column: 2 /span 3;
}

.NeuT {
    grid-column: 2 /span 2;
}

/*================== person============*/

/*===============Holzzzz===============*/

.Holz2{
    grid-column: 1;
    
}

.Holz{
    display: block;
}

.Holz4{
    grid-column: 2/ span 3;
    grid-row: auto;
}

.Holz6{
    grid-column: 1/ span 3;
}

/* =============== Kontakt =============== */


.contact{
    padding: 20vh 0 0 0;
    
}

.contact article{
    grid-column: 2;
    
}

/*=============== Destruction =============*/
.D1{
    grid-column: 2/ span 3;
    grid-row: 1;
    
}
.D2{
    grid-column: 1/ span 2;
    grid-row: 1;

}

.D4{
    grid-column: 1/ span 4;
}
/*============== Edgar ==================*/

.E1{
    grid-column: 2/ span 3;
}


.E2{
    grid-column: 1/ span 1;
}

.E3{
    grid-column: 2/ span 1;
}


.E4{
    grid-column: 1/ span 5;
}

/*================= Mixer ==================*/

.M1{
    grid-column: 3/ span 2;
    grid-row: 1;
}
.M4{
    grid-column: 1/ span 2;
    grid-row: 4;
}
.M5{
    grid-column: 4;
    grid-row: 4;
}
.M6{
    grid-column: 4;
    grid-row: 4;
    }
.M7{
    grid-column: 1;
    grid-row: 5;
}
.M8{
    grid-column: 1;
    grid-row: 5;
}
.M9{
    grid-column: 1;
    grid-row: 5;
}
.M10{
    grid-column: 2/ span 3;
    grid-row: 5;
    margin: 0 0 0 0
}

.M11{
    grid-column: 1/ span 2;
    grid-row: 6;
    
}

.M12{
    grid-column: 1/ span 4;
    grid-row: 7;
}

.M13{
    grid-column: 1/ span 2;
    grid-row: 8;
}
.M14{
    grid-column: 3/ span 2;
    grid-row: 9;
}

.M15{
    grid-column: 1/ span 4;
    grid-row: 10;
}

.NeuM{
    grid-column: 2/ span 2;
    grid-row: 11;
}