*{
    box-sizing: border-box;
 }
 
@font-face {

    font-display: swap;

    font-family: 'Roboto Slab';

    font-style: normal;

    src: url('fonts/RobotoSlab-VariableFont_wght.ttf') format('truetype');

}

.ueberschriftHeader {
  font-size: 2em;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #4A9EF2;
  margin-bottom: 10px;
  text-decoration: none;
}
h1 {
  font-family: Roboto Slab;
  font-weight: 300;
  font-size: 2.688em;
  margin-top: 1em;
  text-align: center;
}
h2 {
  font-family: Roboto Slab; 
  font-weight: 400;
  font-size: 2em;
}
h3 {
  font-family: Roboto Slab; 
  font-weight: 400;
  font-size: 1.75em;
}

@font-face {

  font-display: swap;

  font-family: 'Roboto Regular';

  font-style: normal;

  font-weight: 400;

  src: url('fonts/Roboto-Regular.ttf') format('truetype');

}

p {
  font-family: Roboto Regular;
}
 
  .header1{  
    background: #FFFFFF; 
    position:sticky;
    top:0;
    width:100%;
    padding: 20px 0px 20px 0px;
    height:80px;
    z-index: 1;
}

.header2 {
    width: 100%;
    height: 3.063em;
    top: 5px;
    position:sticky;
    background-color: #F3F4F6;
    padding: 10px;
    box-shadow: 0px 3px 3px 3px #0000001A;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}



.icProdukte {
  width: 1.5em;
}

.Kontakt {
  font-family: Roboto Regular;
  font-size: 1.375em;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

  .icKontact {
    width: 1.5em;
  }
/*max width from the page*/
.wrapper {
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
}
.containerBoxes {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 90px;
  width: 100%;
}

.containerBoxes >* {
  display: inline-block;
}

  .box {
    background-color: #F3F4F6;
    margin-right: 21px;
    font-size: 1.375em;
    box-shadow: 0px 3px 3px 3px #0000001A;
    max-width: 100%;
    height: auto;
  }  

  .image {
    width: 100%;
  }
  .linie {
    border-bottom: 1px solid black;
    width: 78%;
    margin-top: 99px;
    margin-left: auto;
    margin-right: auto;
  }

  /*the info texts and pictures*/
  .overview {
    text-align: center;
    margin-top: 50px;
    position: relative;
  }

  .containerInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
  }
  
  .image2 {
    width: 50%;
    height: 50%;
  }
  
  .lamellen {
    display: flex;
    margin-top: 100px;
    gap: 68px;
    width: 50%;
  }


  .plissees {
    display: flex;
    margin-top: 100px;
    gap: 68px;
    width: 50%;
  }


  .kissen {
    display: flex;
    margin-top: 198px;
    gap: 68px;
    width: 50%;
  }

  .sonnensegel {
    display: flex; 
    margin-top: 224px;
    gap: 68px;
    width: 50%;
  }
 
  .text {
    width: 825px;
    font-family: Roboto Regular;
    font-size: 1.125em;
  }


/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/*Dropdown Button itself */
.dropbtn {
  font-size: 1.375em;
  cursor: pointer;
  font-family: Roboto Regular;
  text-transform: uppercase;
} 


  .header2 img {
    vertical-align: middle;
  }

/* Dropdown Content (Hidden by Default) */
.dropdownContent {
  overflow: hidden;
  position: absolute;
  background-color: #FFFFFF;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.5s ease-in;
}


/* Links inside the dropdown */
.dropdownContent a {
  display: flex; 
  align-items: center;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  font-family: Roboto Regular;
  
}

/* Change color of dropdown links on hover */
.dropdownContent a:hover {background-color: #ddd;}
.dropbtn:hover {color: #4A9EF2;}
.Kontakt:hover {color: #4A9EF2;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {/*display:block;*/
    transform: scaleY(1);

} 

.link {
  color: #4A9EF2;
}

/*vertikallamellen unterseite*/

.absatz0 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  gap: 68px;
  width: 80%;
}
.absatz1 {
  width: 825px;
  font-family: Roboto Regular;
  font-size: 1.125em;
  margin-top: 100px;
  width: 65%;
}

/* kontakt formular */
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #000000; /* Gray border */
  color: #000000;
  border-radius: 24px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #000000;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #000000;
}

.oversight {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.felderContainer {
  width: 50%;
  margin-left: 20%;
}

  .nameContainer {
    display: flex;
    flex-direction: row;
  }
    .firstName {
      justify-content: left;
      width: 30%;
      flex-direction: column;
      margin-right: 23px;
    }

    .lastName {
      justify-content: right;
      width: 30%;
      flex-direction: column;
    }

  .email {
    display: flex;
    justify-content: right;
    width: 62%;
    flex-direction: column;
  }

  .tele {
    display: flex;
    justify-content: right;
    width: 62%;
    flex-direction: column;
  }
.notesContainer {
  display: flex;
  flex-direction: column;
  justify-content: right;
  width: 50%;
  margin-top: 6%;
}
  .notes {
    width: 50%;
    flex-direction: column;
  }

.textBox {
  margin-left: 20%;
}
/* after this point just footers*/
  .footer1{  
    background: #F3F4F6;
    width:100%;
    height:218px;
    margin-top: 100px;
}

.footer2{  
  background: #343434;
  width:100%;
  height:263px;
  font-family: Roboto Regular;
}

/*flexbox footer 1 hell*/
.footer1 {
  display: flex;
  flex-direction: row;
  font-family: Roboto Regular;
  font-size: 1em;
  justify-content: center;
  align-items: center;
}
  .menü {
    width: 10%;
  }

  .addresse {
    width: 15%;
  }

  .menü {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

    .kontakt2 {
      margin-top: 12px;
      text-decoration: none;
      color: black;
    }

    .impressum {
      margin-top: 3px;
      text-decoration: none;
      color: black;
    }
  


  .footer2 {
    font-family: Roboto Regular;
    font-size: 1em;
  }

  .absatz {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

    .bottomText {
      font-size: 1.438em;
      color: #FFFFFF;
      font-weight: 300;
      margin-top: 99px;
      justify-content: center;
      text-align: center;
      width: 20%;
    }

    .border {
      border-bottom: 1px solid #FFFFFF;
      width: 40%;
      margin-top: 99px;
    }


    .copyright {
      color: #FFFFFF;
      margin-top: 15px;
      font-family: Roboto Regular;
      text-align: center;
    }
    
    .textUnderlined {
      text-decoration: underline;
    }