@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/varela-round-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/varela-round-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


.body{
  background: #fdcf5b37 url(Image/Background.png);
  text-align: center; 
  font-family: 'Varela Round';

}

.top-header {
  max-width: 80em;
  height:  auto;

  margin: auto;
  background-image: url(image/header.png), linear-gradient(175deg, #fee5a5 10%, #fcd361 50%, #fdd05b 50%);
  background-size: contain;
  background-position: right top;
  background-repeat: no-repeat;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
} 

.footer {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: space-around;
  vertical-align: middle;
  max-width: 80em;
  height:  8em;
  margin: auto;
  background-color: gainsboro;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
} 

.page {
  margin: auto;
  max-width: 80em;
  padding-top: 1em;
  padding-bottom: 1em; 
  text-align: center;  
  background-color: #ffdf8f;
  
}

.Laufschrift_Container {
  margin: auto;
  max-width: 80em;
  padding-top: 0.5em;
  padding-bottom: 0.1em; 
  background-color: red;
  /* background-image: linear-gradient(180deg, #fdd05b 00%, rgba(255, 0, 0, 0.452) 20%, red 100%);} */
}
.Laufschrift{
  font-size: 1.5em;
}

.page_1 {
  text-align: center; 
  display: table;

}

h1 {
  color: black;
  font-size: 1.8em;
  text-decoration-line: underline;
}
h2 {
  font-size: 1.1em;
  font-weight: 200;
}
h3 {
  font-size: 1.1em;
  font-weight: 900;

}
h4 {
  font-size: 1em;
  font-weight: 200;

}
h5 {
  font-size: 1.2em;
  line-height: 1em;

}


p{
  font: 1em;
}



  .button_1 {
    cursor: pointer; 
    height: 23em; 
    width: 30em;
    max-width: 80%;
    border-radius: 2em;
    border: 0.2em solid white;
    margin: 0.5em;
  

    /*background:#fcf3dc url(image/ahead-Haselnuss.png) no-repeat ; */
    background-position: center;
    background-size: 70%;
    animation-delay: 0.5s; 
    animation-duration: 0.3s; 
    animation-name: slidein;
    /* SCALE */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    /* VERZÖGERUNG */
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }
  .button_1:hover {
    /*background:#fcf3dc url(image/ahead-Haselnuss.png) no-repeat;*/
    background-position: center;
    background-size: 80%;
    /* SCALE */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05) translate(-17px, -15px); 
    /* VERZÖGERUNG */
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  
  .button_2 {
    /* margin-left: 0.2px; */
    cursor: pointer; 
    height: 23em; 
    width: 30em;
    max-width: 80%;
    border-radius: 30px;
    border: 0.2em solid white;
    margin: 0.5em;

  

    /*background:#fcf3dc url(image/Apps-Web.png) no-repeat;*/
    background-position: center;
    background-size: contain;
    animation-delay: 0.5s; 
    animation-duration: 0.3s; 
    animation-name: slidein;
    /* SCALE */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    /* VERZÖGERUNG */
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }
  .button_2:hover {
    /* SCALE */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05) translate(17px, -15px); 
    /* VERZÖGERUNG */
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  
  
  .button_3 {
    cursor: pointer; 
    height: 23em; 
    width: 30em;
    max-width: 80%;
    border-radius: 2em;
    border: 0.2em solid white;
    margin: 0.5em;


  
    background:#fcf3dc url(image/index_Block.png) no-repeat;
    background-position: center;
    background-size: contain;
    animation-delay: 0.5s; 
    animation-duration: 0.3s; 
    animation-name: slidein;
    /* SCALE */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    /* VERZÖGERUNG */
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }
  .button_3:hover {
    /* SCALE */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05) translate(-17px, 15px); 
    /* VERZÖGERUNG */
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  
  
  .button_4 {
    cursor: pointer; 
    height: 23em; 
    width: 30em;
    max-width: 80%;
    border-radius: 2em;
    border: 0.2em solid white;
    margin: 0.5em;


  
    background:#fcf3dc url(image/EtaRe-Zub.png) no-repeat;
    background-position: center;
    background-size: contain;
    animation-delay: 0.5s; 
    animation-duration: 0.3s; 
    animation-name: slidein;
    /* SCALE */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    /* VERZÖGERUNG */
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }
  .button_4:hover {
    /* SCALE */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05) translate(17px, 15px); 
    /* VERZÖGERUNG */
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }
  .pointer{
    cursor: pointer;
  }