/* 1. Allgemeine Styles
=====================*/

* { padding: 0; margin: 0; border: 0;}
html { 
  overflow-y: scroll;
  }
body {
  display: flex;

  
  
  flex-direction: column;
  background: #F6F1EA;
  color: black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 87.5%;
  }
  
  /* 2. Styles für die layoutbereiche
======================================*/  

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  background-color: #F6F1EA;
  height: 39.0em;
  background-image: url(websitex.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 10.0em;  
  }
@media screen and (max-width: 1508px) {
  header {
  height: 38.0em;
  background-image: url(websitex.jpg);
  background-position: top;
  background-size: cover;
  padding-bottom: 0.0em;  
  }
  }
@media screen and (max-width: 1279px) {
  header {
  height: 32.0em;
  background-image: url(websitex.jpg);
  background-position: top;
  background-size: cover;
  padding-bottom: 0.0em;  
  }
  }
@media screen and (max-width: 768px) {
  header {
  height: 23.0em;
  background-image: url(website2x.jpg);
  background-position: top;
  background-size: cover;
  padding-bottom: 0.0em;  
  }
  }
@media screen and (max-width: 480px) {
  header {
  height: 23.0em;
  background-image: url(website3x.jpg);
  background-position: top;
  background-size: cover;
  padding-bottom: 0.0em;  
  }
  }
main { 
  }
main h1 {
  font-family: serif;
  text-align: center;
  color: #C0DFCC;
  font-size: 470%;
  letter-spacing: 0.4em;
  font-weight: normal;
  padding-top: 0.3em;
  padding-bottom: 0.6em;
  padding-right: 1.0em;
  padding-left: 1.0em;
  line-height: 1.0em;
  }
main h2 {
  font-family: serif;
  text-align: center;
  color: #C0DFCC;
  font-size: 350%;
  letter-spacing: 0.3em;
  font-weight: normal;
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  padding-right: 1.0em;
  padding-left: 1.0em;
  line-height: 1.0em;
  }
main h3 {
  text-align: center;
  color: #918D90;
  font-size: 140%;
  letter-spacing: 0.4em;
  font-weight: normal;
  padding-bottom: 1.5em;
  padding-top: 2.0em;
  padding-right: 2.0em;
  padding-left: 2.0em;
  line-height: 1.8em;
  }
main p {
  text-align: center;
  color: #918D90;
  font-size: 120%;
  letter-spacing: 0.1em;
  font-weight: normal;
  padding-bottom: 0em;
  padding-right: 2.0em;
  padding-left: 2.0em;
  line-height: 1.5em;
  }
div#zeichnung{
  display: flex;
  flex-wrap: wrap;
  display: block;
  background-color: #F6F1EA;
  }
 @media screen and (max-width: 1280px) {
  main {
  align-items: top;
  }
}
@media screen and (max-width: 1280px) {
  main h1{
  font-size: 400%;
  letter-spacing: 0.2em;
  padding-top: 0.6em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 1em;  
  }
}
@media screen and (max-width: 1280px) {
  main h3{
  font-size: 120%;
  letter-spacing: 0.4em;
  padding-right: 0.5em;
  padding-left: 0.5em; 
  }
}
@media screen and (max-width: 768px) {
  main {
  align-items: top;
  }
}
@media screen and (max-width: 768px) {
  main h1{
  font-size: 300%;
  letter-spacing: 0.2em;
  padding-top: 0.6em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 1em;  
  }
}
@media screen and (max-width: 768px) {
  main h2 {
  font-family: serif;
  text-align: center;
  color: #C0DFCC;
  font-size: 230%;
  letter-spacing: 0.3em;
  font-weight: normal;
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  padding-right: 1.0em;
  padding-left: 1.0em;
  line-height: 1.0em;
  }
}
@media screen and (max-width: 768px) {
  main h3{
  font-size: 100%;
  letter-spacing: 0.4em;
  padding-right: 0.5em;
  padding-left: 0.5em; 
  }
}
@media screen and (max-width: 768px) {
  main p{
  text-align: center;
  color: #918D90;
  font-size: 90%;
  letter-spacing: 0.1em;
  font-weight: normal;
  padding-bottom: 0em;
  padding-right: 2.0em;
  padding-left: 2.0em;
  line-height: 1.5em;
  }
}
@media screen and (max-width: 480px) {
  main {
  align-items: top;
  }
}
@media screen and (max-width: 480px) {
  main h1{
  font-size: 280%;
  letter-spacing: 0.2em;
  padding-top: 0.6em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 1em;  
  }
}
@media screen and (max-width: 480px) {
  main h2 {
  font-family: serif;
  text-align: center;
  color: #C0DFCC;
  font-size: 195%;
  letter-spacing: 0.1em;
  font-weight: normal;
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 1.0em;
  }
}
@media screen and (max-width: 480px) {
  main h3{
  font-size: 90%;
  letter-spacing: 0.2em;
  padding-right: 1.0em;
  padding-left: 1.0em; 
  }
}
@media screen and (max-width: 480px) {
  main p{
  text-align: center;
  color: #918D90;
  font-size: 95%;
  letter-spacing: 0.1em;
  font-weight: normal;
  padding-bottom: 0em;
  padding-right: 1.0em;
  padding-left: 1.0em;
  line-height: 1.5em;
  }
}
img {
display: block;
margin: auto;
height: 10em;
}
span { 
  color: #b2afb1;
  }
main a {
  color: #918D90;
  border: 0px;
  }
main a:hover,
main a:focus,
main a:visited {
  color: #b2afb1;
  }
a { 
  text-decoration: none;
  outline: none;
  }