/* drinnenlassen! */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:link {
    text-decoration: none;
    color: white;
       
}

a:visited{
    color: blueviolet;
}


body {
    font-family: Segoe UI, Helvetica, Arial, Verdana, sans-serif;
    line-height: 1.4;
    /*font-size: 16px;*/
    color: white;
    background-color: white;
    hyphens: auto;
    /* Word-Trennung, Details später! */
}

header {
    width: 100%;
    position: fixed;
    z-index: 100;




}

img {
    width: 100%;
    height: auto;
}



#kopf {
    width: 100%;


    position: absolute;
    left: 0px;
    /*top: -20px;*/
    top: -3vw;
    z-index: -1;
}

.fuss {
    width: 100%;
    position: fixed;
    right: 0px;
    bottom: 0px;

}

/*.kopf_p {
    width: 100%;
    position: absolute;
    left: 0px;
    top: -3vw;
    z-index: -1;
}*/


.Lbild {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    
}
.fade {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.Logo_klein{
    display: none;
}

.LogoG {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    top: 32vh;
}

.fade{
    -webkit-animation-name: fade;
    -webkit-animation-name: 1.5s;
    animation-name: fade;
    animation-duration: 1s;
}
    
@-webkit-keyframes fade {
    from{opacity: 0.4}
    to{opacity: 1}
}

@keyframes fade {
    from{opacity: 0.4}
    to{opacity: 1}
}

/*.sal {
    color: aqua;
    position: absolute;
    left: 0px;
    top: 30%;
    font-weight: 900;
    letter-spacing: -3vw;
    font-size: 24vw;
    
   
}   */


#naviButton{
    display: none;
}


/* ========= Navigation ============ */

nav {
    /* border-right: 10px;
    border-color: white;*/
    /* background-color:blue;
*/



}



nav {
    border-bottom: none;
    display: block;
    padding: 5px 0;
    color: white;
    text-decoration: none;
    text-align: center;
    align-self: center;
    margin: 0 0 0 15px;
    font-size: 2vw;
    font-weight: 400;





}

nav ul {
    /* hier das Grid für die Navigation einbauen */
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(12, 1fr);



}

/* gerade angewählter Nav-Punkt */
.current{

    font-weight: 900;
    letter-spacing: -2px;

}

.C {
    grid-column: 12;


}

.C:hover {
    font-weight: 900;
    letter-spacing: -2px;
}

.P {
    grid-column: 11;
}

.P:hover {
    font-weight: 900;
    letter-spacing: -2px;

}

.Pr {
    grid-column: 10;
}

.Pr:hover {
    font-weight: 900;
    letter-spacing: -2px;
}

.I {
    display: block;
    font-size: 2vw;
    position: absolute;
    right: 0.5vw;
    bottom: -5vw;
    z-index: 100;
    background-color: orange;


}

.I:hover {
    font-weight: 900;
    letter-spacing: -2px;
}

/* =========  projects.html ============ */



#gallery {
    line-height: 0;
    position: relative;

}

#gallery div {
    width: 100%;
    height: auto;
    margin-top: 5px;
    filter: invert(100%) grayscale(100%);
    transition: 1.5s;



}

#gallery div picture{
    width: 100%;
    
}
 
.box-img{
    height: 100%;
}


#gallery div:hover {
    filter: none;
}


.box-caption {
    position: absolute;
    /*max-width: 400px;*/
    word-break: break-word;
    padding: 10px;
}

/* Standard: Top Center */
.box-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    /*padding: .5rem;*/
    text-align: center;
    /*font-size: 1rem;*/
    font-size: 4vw;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
    /* background-color: #333333;*/
    color: black;
}

/* Box: Center Left */
.box-flex-center-left {
    align-items: center;
    justify-content: flex-start;
}

.box-flex-holz {
    align-items: flex-start;
    justify-content: flex-end;




}

.De{
    margin-top: 20px;
}

.Holzp{
    margin-top: 5px;
}

.fuss_2 {
    width: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 5;
}


/* ========= orbit.html ============ */

/*==========Orbit.navi==========*/

.pro{
     width: 100%;
    position: relative;
    z-index: 100;

    
}

/*.pro_s{
    width: 100%;
    position: fixed;
    z-index: 99;
    background: blue;
}*/

.pro_s ul{
     

    width: 100%;
    position: fixed;
    /*left: -100vw;*/
    left:0;
    top: -80px;
    padding: 1vh 0 1vh 2vw;
    /*color: black;*/
       /* z-index: 99;*/
    background: white;
    color: white;
    transition: background 3s cubic-bezier(0.45, 0, 0.55, 1), top 2s cubic-bezier(0.16, 1, 0.3, 1);
    
    
}

.background ul{
    /*filter: invert(100%);*/
    background: black;
    top: 0;
}

#immer {
    display: none;
}

#smart_klein{
    display: none;
}





/*==========Orbit.navi==========*/




main .Orbit {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1vw;
    grid-row-gap: 30vh;
    margin: 3vw 3vw 0vw 3vw;


}


.Or1 {
    grid-column: 7/ span 6;
}

main h1 {
    grid-column: 1/ span 3;
    grid-row: 1;
    color: black;
}

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

.Or3 {
    grid-column: 1/ span 6;

}

main article {
    grid-column: 7/ span 6;
    color: black;
}

.Or4 {
    grid-column: 8/ span 5;

}

.NeuT {
    grid-column: 5/ span 4;

    text-align: center;
    font-size: 3vw;
    color: black;
}

.NeuT a {

    font-size: 9vw;
    color: black;
}

.Pfeile {
    width: 50%;
    padding: 10px 0 0 0;


}

.Pfeile:hover{
    /*transform: scaleX(-1);*/
    transform: scale(0.7);
    transition: 1s;
    
    
}


/*#Seite {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#footer {
    position: absolute;
    width: 100%;
}*/

/*.fuss_3 {
    object-position: bottom;
}*/


/* ========= Holzz.html ============ */
.Holz1{
    position: relative;
    top: -9vw;
}


.Holz2{
     grid-column: 1/ span 4;
    grid-row: 1;
    align-items: end;
}

.Holz{
    grid-row: 3;
    grid-column: 1/ span 5;
}

.Holz4{
    grid-row: 3;
    grid-column: 7/ span 6;
}
.Holz6{
    grid-column: 1/ span 8;
}


/* ============ Person =========*/

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


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

h2{
    font-size: 8vw;
    font-weight: 900;
    grid-column: 7 /span 3;
}

/*=============== Destruction ============*/
.D1{
    grid-column: 7/ span 6; 
}

.D2{
    grid-column: 1/ span 5;
    grid-row: 1;
    align-items: end;
}

.D4{
    grid-column: 4/ span 7;
}

/*============== Edgar ==============*/

.Edgarstart{
    position: relative;
    top: -8vh;
}

.E1{
    grid-column: 7/ span 6;
    grid-row: 1;
}

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

.E3{
    grid-row: 2;
    grid-column: 5/ span 4;
}

.E4{
    grid-column: 3/ span 10;
}

/*=================== Mixer ===============*/
.Mixerstart{
    position: relative;
    top: -7vh;
}

.M1{
    grid-column: 6/ span 7;
}

.M4{
    grid-column: 1/ span 7;
}

.M5{
    grid-column: 10/ span 3;
    grid-row: 3;
}

.M6{
    grid-column: 10/ span 3;
    grid-row: 3;
}

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

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

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

.M10{
    grid-row: 4;
    grid-column: 8/ span 5;
    margin: 75vw 0 0 0;
}

.M11{
    grid-row: 5;
    grid-column: 1/ span 7;
}

.M12{
    grid-row: 6;
    grid-column: 1/ span 12;
    }

.M13{
    grid-row: 7;
    grid-column: 1/ span 6;
}

.M14{
    grid-row: 8;
    grid-column: 5/ span 8;
}

.M15{
    grid-row: 9;
    grid-column: 1/ span 12;
}

.NeuM {
    grid-row: 10;
    grid-column: 5/ span 4;

    text-align: center;
    font-size: 3vw;
    color: black;
}

.NeuM a {

    font-size: 9vw;
    color: black;
}