@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

body{
  margin:0;
  padding:0;
}

.lexend-700 {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* Header und navig */

header {
  display: flex;
  background-color: rgb(178, 188, 156);
  height: 12vh;
  width: 100%;
  position: fixed;
  top:0;
  z-index:1000;
}

.logo {
  width:33%;
  padding-top: 10px;
}

.logo img {
  width: 40%;
  max-width: 200px;
}

.FHNW {
  width:33%;
  font-size: 6vw;
  color: white;
  text-align: center;
  line-height: 95%;
}

.menu {
  width:33%;
  display: flex;
  justify-content: flex-end;
}

.box {
  padding-top: 10px;
}

.box div {
  border-radius: 5px;
  height: 5px;
  width:50px;
  background-color: white;
  margin: 10px auto;
}

/* erste section */

#hero{
  margin-top:12vh;
  position: relative;
  display:grid;

  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 200px;

  /*height: calc(100vh - 80px);*/
  height: 105vh; 
}

.leftcol{
  background-image: url("../images/0275_Lichthof_AH_gross.jpg");
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: top right;
  grid-column: 1/2;
  grid-row:1/3;
  opacity: 0.3;
}

.centercol  {
  background-image: url("../images/0275_aussen_Park_AH_gross.jpg");
  background-size: cover;
  background-position: top;
  grid-column: 2/3;
  grid-row:1/3;
}

.rightcol{
  background-image: url("../images/0275_Lichthof_Treppe_AH_gross.jpg");
  background-size: cover;
  background-position: top left;
  grid-column: 3/4;
  grid-row:1/3;
  opacity: 0.3;
}

.muttenz {
  grid-column: 2/3;
  grid-row: 2/3;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 10rem;
  transform: scale(1.4);
  margin-top:-60px;

}

.campus {
  grid-column: 1/2;
  grid-row: 1/3;
  color: rgb(178, 188, 156);
  font-size:5rem;
  writing-mode:sideways-lr;
  z-index: 5;
  padding-bottom: 30px;
  padding-right: 120px;
  justify-self: end;
transform: translateY(-82px);
  
}


/*erster content grid */

.content{
  background-color: rgb(178, 188, 156,0.6);
  width:100%;
  margin:0px;

  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
}



.main{
  background-image:url("../images/0275_Schnittperspektive_gross.jpg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:right center;

  height:90vh;     
  grid-column:2/4;
  grid-row:1/3;
}

/* text bei bild */

.caption{
  grid-column:1/2;
  grid-row:1/2;
  margin-top:140px;
  margin-left: 60px;

  color:rgb(255, 255, 255);
  font-size:1.4rem;
 max-width:300px;

}



.infos {
width:100%;
margin: 0px;
min-height: 10vh;
background-color: rgb(178, 188, 156,0.6);
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.projekt {
  grid-column: 1/3;
  margin-left: 20px;
  color: white;
  font-size: 2rem;
  margin-top: 25px;


  position: relative; 
  padding: 20px 0;      /* der platz für die linien */
}

/* obere Linie */
.projekt::before{
  content:"";
  position:absolute;

  top:0;
  left:0;

  width:95%;
  height:3px;

  background:white;
}

/* untere Linie */
.projekt::after{
  content:"";
  position:absolute;

  bottom:0;
  left:0;

  width:95%;
  height:3px;

  background:white;
}

.bilder{
  background-color: rgb(178,188,156,0.6);
  padding:0px;
}

/* TEXT */

.atrium{
  text-align:center;
  color:white;
  font-size:1.4rem;
  max-width:900px;
  padding:0px;  
  margin:0 auto 40px auto;
}
.raume,
.terasse{
  text-align:center;
  color:white;
  font-size:1.4rem;
  max-width:900px;
  padding:0px;
  margin-top: 0px;
  margin:40px auto;
 
}

/* GRID FÜR BILDER */

.bilder-grid,
.bilder-grid2,
.bilder-grid3{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:80vh;
  gap:40px;
  width:90%;
  margin:auto;
}
/* BILDER */

.img1,
.img4,
.img9{
  grid-column:1/3;
}

.img1{ background-image:url("../images/0275_Atrium_AH_gross.jpg"); }
.img2{ background-image:url("../images/0275_EG_Aula_MvdB_gross.jpg"); }
.img3{ background-image:url("../images/0275_EG_Cafeteria_MN_gross.jpg"); }

.img4{ background-image:url("../images/0275_OG12_Lounge_MN_gross.jpg"); }
.img5{ background-image:url("../images/0275_Hoersaal_AH_gross.jpg"); }
.img6{ background-image:url("../images/0275_Labor_HLS_AH_gross.jpg"); }
.img7{ background-image:url("../images/0275_Lichthof_AH_gross.jpg"); }
.img8{ background-image:url("../images/0275_Lichthof_Treppe_AH_gross.jpg"); }

.img9{ background-image:url("../images/0275_Dachgarten_AH_gross.jpg"); }

/* gemeinsame Bildregeln */

.img1,.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9{
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.futter {
background-color: rgb(178, 188, 156);
  height: 24vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  width: 100%;
  z-index:1000;
}

.adresse{
  grid-column: 1/2;
  margin-left: 40px;
  max-width: 300px;
  color: white;
  font-size: 0.8rem;
  margin-top: 25px;
  background-position:center;
}

.logoG{
  grid-column: 2/3;
  background-image: url("../images/pool.svg");
  background-repeat:no-repeat;
  background-position: right;
  width:40%;
  margin-right: 20px;
  justify-self:end;
}