@import url("basis.css");
@import url("nav.css");


/* ################# TYPO ############### */
/* 
font-family: "neuzeit-grotesk", sans-serif;
font-weight: 300;
font-weight: 400;
font-style: normal; 
*/

/* FARBEN  

orange
magenta
pink
grün
blau: 06b7ca 


*/


body {
   font-family: "neuzeit-grotesk", sans-serif;
   background-color: #fff;
   margin: 0;
   padding: 0;
}

.bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vW;
   /* height: 100%; */
   z-index: 0;
   min-height: 200vH;
}

#baum {
   background-image: url("../img/baum.svg");
   background-repeat: no-repeat;
   background-position: bottom;
   position: absolute;
   background-size: contain;
   height: 66vH;
   width: 100%;
   bottom:0;
   left:0;
}

h1 {
   font-weight: 300;
   font-size: 30px;
   letter-spacing: 4px;
   padding: 30px 0;
   text-align: center;
}

p {
   padding-bottom: 30px;
   font-size: 18px;
   line-height: 36px;
   font-weight: 300;
   max-width: 400px;
   margin: auto;
}
a {
   text-decoration: unterline;
   color: #000;
}
a:hover {
   color: #eb0264;
}

.line {
   width: 300px;
   border-top: solid 2px #fff;
   margin: auto;
   opacity: 0;
}

.h1-center {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   text-align: center;
}




#phase-1,#phase-2,#phase-3,#phase-4,.bg {
   display: none;
}


/* PHASE 0 ###################  */


.phase-0 #baum {
   /* bottom: 0;
   left: 0;
   height: 66vH;
   width: 100%; */
}

#phase-0 {
   position: relative;
   top: 23vH;
   text-transform: uppercase;
   font-size: 30px;
   font-weight: 300;
   text-align: center;
   letter-spacing: 4px;
}



/* PHASE 1 ###################  */

#bg-1 {
   background-image: linear-gradient(to bottom, #5d9456, #338b66, #007f74, #00727b, #00647a, #005b74, #00516d, #054866, #04425e, #033c55, #02364d, #023045);
   min-height: 1000px;
}
body.phase-1 {
   background: #023045;
   transition: 1.5s;
}
#phase-1 {
   width: 100vW;
   text-align: center;
   position: relative;
   top: 150px;
}

#phase-1 h1,
#phase-1 p {
   color: #fff;
}

.phase-1 #baum {
   width: 100%;
   bottom:0;
   width: 100%;
   bottom: 0;
   left: 0;
}


@media (max-height: 1050px) {
   .phase-1 #baum {
      /* opacity: 0.7;
      position: fixed; */
   }
}

/* PHASE 2 ###################  */

#bg-2 {
   background-image: linear-gradient(to right, #061537, #07173a, #081a3c, #0a1c3f, #0b1f41, #22264d, #372c59, #4d3162, #7e396c, #ac436a, #d1575e, #e9764c);
}

/* .phase-2 #baum {
   width: 100vH;
   transform: rotate(90deg);
   height: 100vH;
   transition: 1s;
   position: relative;
   top: 0;
   left: -77vH;
} */



#phase-2 {
   /* box-sizing: border-box;
   position: absolute;
   margin:auto;
   max-width: 1200px;
   height: 100vH;
   top: 0;
   left: 0; 
   right: 0; 
   margin-left: auto; 
   margin-right: auto;
   z-index: 8999;
   padding: 200px 0 0 0; */
}

.phase-2 #baum {
   opacity: 0.8;
   margin: auto;
   height: auto;
}


#branchen-container {
   position: absolute;
   /* border: solid 2px red; */
   top: calc(400px);
   left: calc(50vw - 950px);
   width: 1600px;
}
@media (max-width: 758px) {
   #branchen-container {
      left: -900px;
   }
}


.branche {
   padding-left: 1000px;
   font-size:16px;
   transition: 2s;
}

.branche:hover {
   font-size: 30px;
   transition: 0.15s;
}


.branche.oben {
   color: #cbcbcb;
}

.branche.unten {
   color: #9bc5d5;
}


/* PHASE 3 #################### */

#bg-3 {
   background-image: linear-gradient(to bottom, #01515b, #00525f, #005364, #005368, #00546c, #02516b, #054e6a, #094b69, #0c4562, #0e3e5c, #0f3855, #10324e);
}
body.phase-3 {
   background: #10324e;
   transition: 1.5s;
}


.phase-3 .line {
   opacity: 1;
}

.phase-3 h1 {
   color: #fff;
}

.produkt {
   text-align: center;
   font-weight: 300;
   letter-spacing: 3px;
   color: #fff;
   width: 220px;
   height: 61px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.3s;
}

.produkt p {
   margin: 0;
   padding: 0;
   line-height: 100%;
}

.produkt:hover {
   cursor: pointer;
   width: 230px;
   height: 70px;
   transition: 0.3s;
}

@media (max-height: 788px) {
   .produkt {
      width: 165px;
      height: 40px;
   }
   .produkt p { 
      font-size: 15px;
   }
}


#p-1 {
   left: 3vW;
   bottom: 4vH;
   background-color: #c90262;
}

#p-2 {
   left: 1vW;
   bottom: 13vH;
   background-color: #e84b13;
}

#p-3 {
   left: 7vW;
   bottom: 22vH;
   background-color: #ff475f;
}

#p-4 {
   left: 5vW;
   bottom: 31vH;
   background-color: #fc5f41;
}

#p-5 {
   left: 18vW;
   bottom: 39vH;
   background-color: #d45626;
}

#p-6 {
   left: 22vW;
   bottom: 48vH;
   background-color: #94005a;
}

#p-7 {
   right: 43vW;
   bottom: 40vH;
   background-color: #eb0264;
}

#p-8 {
   right: 33vW;
   bottom: 52vH;
   background-color: #079bc4;
}

#p-9 {
   right: 20vW;
   bottom: 2vH;
   background-color: #0b8399;
}

#p-10 {
   right: 10vW;
   bottom: 47vH;
   background-color: #3a8ead;
}

#p-11 {
   right: 23vW;
   bottom: 39vH;
   background-color: #0aeae7;
}

#p-12 {
   right: 12vW;
   bottom: 31vH;
   background-color: #0c795f;
}

#p-13 {
   right: 16vW;
   bottom: 22vH;
   background-color: #5ec4de;
}

#p-14 {
   right: 6vW;
   bottom: 13vH;
   background-color: #0387ac;
}

#p-15 {
   right: 2vW;
   bottom: 4vH;
   background-color: #0cb77e;
}

#p-16 {
   left: 36vW;
   bottom: 56vH;
   background-color: #f14c2b;
}

@media (max-width: 800px) {
   .produkt {
      position: static;
   }
   #produkte {
      display: flex;
      position: absolute;
      width: 100%;
      top: 311px;
      flex-wrap: wrap;
      gap: 20px;
      align-items: center;
      justify-content: center;
      padding-bottom: 80px;
   }
   .phase-3 .h1-center {
      top: 150px;
   }
   .phase-3 .line {
      display: none;
   }
}
/* ############ PHASE 4  */

#phase-4 {
   position: relative;
   max-width: 400px;
   margin: auto;
   padding-top: 200px;
   text-align: center;
}
#we {
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   gap: 30px;
   align-items: center;
   justify-content: center;
   padding-bottom: 80px;
}
.me {
   width: 140px;
   height: 140px;
   border: solid 1px #444;
   display: flex;
   align-content: space-between;
   flex-wrap: wrap;
   padding: 15px;
   background: #fff;
}
.me img {
   max-width: 100%;
   height: auto;
}
.me:hover {
   background: #f9ffef;
   background-image: linear-gradient(to bottom, #01515b, #00525f, #005364, #005368, #00546c, #02516b, #054e6a, #094b69, #0c4562, #0e3e5c, #0f3855, #10324e);
}
p.url {
   padding: 0;
   font-size: 14px;
}
p.url a {
   text-decoration: none;
}
.me:hover p.url a {
   color: #fff;
}
#me-mangomoon {
   padding-top: 22px;
}
@media (max-width: 380px) {
   .phase-4 #baum {
      opacity: 0.5;
   }
}