@media only screen and (min-width: 1025px){

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/instrument-serif-v2-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/instrument-serif-v2-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
    .wrapper{
       position: relative;
       width: 100%;
       margin: 0 auto;
       min-height: 100%;
   }
    .content{
       position: relative;
       background-color: #ffffff;
       width: 100%;
       max-width: 70%;
       height: 100%;
       margin: 0 auto;
   }
   html,body{
       font-size: 22px;
       color: #000000;
       margin: 0;
       padding: 0;
       background-color: #FFFFFF;
       min-height: 100%;
   }
   h1{
       font-size: 38px;
       color: #644c62;
   }
   h2{
       font-size: 34px;
       color: #dfb563;
   }
   h3{
       font-size: 32px;
       color: #644c62;
   }
   h4{
       font-size: 28px;
       color: #dfb563;
   }
   h5{
       font-size: 24px;
       color: #644c62;
   }
   h6{
       font-size: 22px;
       color: #dfb563;
   }
   p{
       font-size: 24px;
       color: #000000;
    }
   a{
       font-size: 24px;
       text-decoration: none;
       color: #644c62;
       cursor: pointer;
   }
   a:hover{
       font-size: 26px;
       text-decoration: none;
       color: #dfb563;
       cursor: pointer;
   }
   .button{
     box-sizing: border-box;
     background: #dfb563;
     padding: 10px;
     border: none;
     font-size: 20px;
     color: #644c62;
   }
   .button:hover{
     background: #644c62;
     font-size: 20px;
     color: #dfb563;
   }
   .form{
     width: 50%;
     height: 40px;
     border: 1px solid #CFCFCF;
     padding-left: 5px;
     padding-right: 5px;
     font-family: 'Open Sans Condensed','Zilla Slab', serif;
     font-size: 20px;
   }
   .form-area{
     width: 50%;
     min-height: 300px;
     border: 1px solid #CFCFCF;
     padding-left: 5px;
     padding-right: 5px;
     font-family: 'Open Sans Condensed','Zilla Slab', serif;
     font-size: 20px;
   }
    #ground-banner{
        width: 100%;
    }

   .banner{
       box-sizing: border-box;
       padding: 10px;
       width: 100%;
       background-color: #FFFFFF;
       margin-top: 45px;
       float: none;
   }
   .banner_text{
       width: 100%;
       margin: 0 auto;
       text-align: center;
   }
   .banner_image{
       width: 100%;
   }
   .one_clear{
     box-sizing: border-box;
     width: 50%;  height: auto;
     padding: 30px;
     float: left;
     margin-right: 0%;
   }
   .two_clear{
     box-sizing: border-box;
     width: 50%;  height: auto;
     padding: 30px;
     float: left;
   }
   .one{
     box-sizing: border-box; /*background-image: url(../images/under-gelb.jpg);*/
     width: 50%;  height: 800px;
     padding: 30px;
     float: left;
     margin-right: 0%;
   }
   .two{
     box-sizing: border-box; /*background-image: url(../images/under-lila.jpg);*/
     width: 50%;  height: 800px;
     padding: 30px;
     float: left;
   }
   .one01{
     box-sizing: border-box;
     width: 50%;
     padding-right: 10px;
     float: left;
   }
   .two01{
     box-sizing: border-box;
     width: 50%;
     padding-left: 10px;
     float: right;
   }
   .footer{
       position: relative;
       width: 100%;
       max-width: 70%;
       margin: 0 auto ; margin-top: 10%;
       border-top : solid 2px #D0D0D0 ;
       min-height: 150px;
       height: auto;
   }
   .footer_left p{
       width: 50%;
       position: absolute;
       top: 0;
       left: 0;
       float: left;
       font-size: 18px;
       margin-right: 20px;
   }
   .footer_right p{
       width: 50%;
       float: left;
       font-size: 18px;
       position: absolute;
       top: 0;
       left: 50%;
   }
   .clear{
    width: 100%;
    float: none;
    color: #FFFFFF;
    height: 20px;
    clear: both;
   }
   .impres{
       font-size: 16px;
   }
   #index01{
       width: 45%; float: left; margin-right: 10%;
   }
   #index02{
       width: 45%; float: right;
   }
   #index01:hover{
       transform: scale(1.08); transition: transform .3s;
   }
   #index02:hover{
       transform: scale(1.08); transition: transform .3s;
   }
   .rund{
       height: 180px;
       float: left;
       margin-right: 5px;
       margin-bottom: 5px;
   }
   .rund:hover{
       transform: scale(1.5); transition: transform .3s;
   }

   #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #dfb563;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}
   #myBtn:hover {
    background-color: #555;
}

}
@media only screen and (min-width: 600px) and (max-width: 1024px){
/* instrument-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/instrument-serif-v2-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/instrument-serif-v2-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
 .wrapper{
       position: relative;
       width: 100%;
       margin: 0 auto;
       min-height: 100%;
   }
    .content{
       position: relative;
       background-color: #ffffff;
       width: 100%;
       max-width: 80%;
       height: 100%;
       margin: 0 auto;
   }
   html,body{
       font-size: 20px;
       color: #000000;
       margin: 0;
       padding: 0;
       background-color: #FFFFFF;
       min-height: 100%;
   }
   h1{
       font-size: 28px;
       color: #644c62;
   }
   h2{
       font-size: 28px;
       color: #dfb563;
   }
   h3{
       font-size: 26px;
       color: #644c62;
   }
   h4{
       font-size: 26px;
       color: #dfb563;
   }
   h5{
       font-size: 22px;
       color: #644c62;
   }
   h6{
       font-size: 22px;
       color: #dfb563;
   }
   p{
       font-size: 22px;
       color: #000000;
    }
   a{
       font-size: 22px;
       text-decoration: none;
       color: #644c62;
       cursor: pointer;
   }
   a:hover{
       font-size: 24px;
       text-decoration: none;
       color: #dfb563;
       cursor: pointer;
   }
   .button{
     box-sizing: border-box;
     background: #dfb563;
     padding: 10px;
     border: none;
     font-size: 20px;
     color: #644c62;
   }
   .button:hover{
     background: #644c62;
     font-size: 20px;
     color: #dfb563;
   }
   .form{
     width: 50%;
     height: 40px;
     border: 1px solid #CFCFCF;
     padding-left: 5px;
     padding-right: 5px;
     font-family: 'Open Sans Condensed','Zilla Slab', serif;
     font-size: 20px;
   }
   .form-area{
     width: 50%;
     min-height: 300px;
     border: 1px solid #CFCFCF;
     padding-left: 5px;
     padding-right: 5px;
     font-family: 'Open Sans Condensed','Zilla Slab', serif;
     font-size: 20px;
   }
     #ground-banner{
        width: 100%;
    }
   .banner{
       box-sizing: border-box;
       padding: 10px;
       width: 100%;
       background-color: #FFFFFF;
       margin-top: 45px;
       float: none;
   }
   .banner_text{
       width: 100%;
       margin: 0 auto;
       text-align: center;
   }
   .banner_image{
       width: 100%;
   }
   .one_clear{
     box-sizing: border-box;
     width: 50%;  height: auto;
     padding: 30px;
     float: left;
     margin-right: 0%;
   }
   .two_clear{
     box-sizing: border-box;
     width: 50%;  height: auto;
     padding: 30px;
     float: left;
   }
   .one{
     box-sizing: border-box; background-image: url(../images/under-gelb.jpg);
     width: 50%;  height: 800px;
     padding: 30px;
     float: left;
     margin-right: 0%;
   }
   .two{
     box-sizing: border-box; background-image: url(../images/under-lila.jpg);
     width: 50%;  height: 800px;
     padding: 30px;
     float: left;
   }
   .one01{
     box-sizing: border-box;
     width: 50%;
     padding-right: 10px;
     float: left;
   }
   .two01{
     box-sizing: border-box;
     width: 50%;
     padding-left: 10px;
     float: right;
   }
   #index01{
       width: 45%; float: left; margin-right: 10%;
   }
   #index02{
       width: 45%; float: right;
   }
   .footer{
       position: relative;
       width: 100%;
       max-width: 70%;
       margin: 0 auto ;
       border-top : solid 2px #D0D0D0 ;
       min-height: 150px;
       height: auto;
   }
   .footer_left p{
       width: 50%;
       position: absolute;
       top: 0;
       left: 0;
       float: left;
       font-size: 18px;
       margin-right: 20px;
   }
   .footer_right p{
       width: 50%;
       float: left;
       font-size: 18px;
       position: absolute;
       top: 0;
       left: 50%;
   }
   .rund{
       height: 120px;
       float: left;
       margin-right: 5px;
       margin-bottom: 5px;
   }
   .rund:hover{
       transform: scale(1.5); transition: transform .3s;
   }
   .clear{
    width: 100%;
    float: none;
    color: #FFFFFF;
    height: 20px;
    clear: both;
   }
   .impres{
       font-size: 16px;
   }
   #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #dfb563;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}
   #myBtn:hover {
    background-color: #555;
}
}
@media only screen and (min-width: 200px) and (max-width: 599px){
/* instrument-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/instrument-serif-v2-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/instrument-serif-v2-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
 .wrapper{
       position: relative;
       width: 100%;
       margin: 0 auto;
       min-height: 100%;
   }
    .content{
       position: relative;
       background-color: #ffffff;
       width: 100%;
       max-width: 80%;
       height: 100%;
       margin: 0 auto;
   }
   html,body{
       font-size: 16px;
       color: #000000;
       margin: 0;
       padding: 0;
       background-color: #FFFFFF;
       min-height: 100%;
   }
   h1{
       font-size: 20px;
       color: #644c62;
   }
   h2{
       font-size: 20px;
       color: #dfb563;
   }
   h3{
       font-size: 18px;
       color: #644c62;
   }
   h4{
       font-size: 18px;
       color: #dfb563;
   }
   p{
       font-size: 16px;
       color: #000000;
    }
   a{
       font-size: 16px;
       text-decoration: none;
       color: #644c62;
       cursor: pointer;
   }
   a:hover{
       font-size: 18px;
       text-decoration: none;
       color: #dfb563;
       cursor: pointer;
   }
   .button{
     box-sizing: border-box;
     background: #dfb563;
     padding: 10px;
     border: none;
     font-size: 18px;
     color: #644c62;
   }
   .button:hover{
     background: #644c62;
     font-size: 18px;
     color: #dfb563;
   }
   .form{
     width: 100%;
     height: 40px;
     border: 1px solid #CFCFCF;
     padding-left: 5px;
     padding-right: 5px;
   }
   .form-area{
     width: 100%;
     min-height: 300px;
     border: 1px solid #CFCFCF;
     padding-left: 5px;
     padding-right: 5px;
   }
    #ground-banner{
        width: 100%;
    }
   .banner{
       box-sizing: border-box;
       padding: 10px;
       width: 100%;
       background-color: #FFFFFF;
       margin-top: 45px;
       float: none;
   }
   .banner_text{
       width: 100%;
       margin: 0 auto;
       text-align: center;
   }
   .banner_image{
       width: 100%;
   }
   .one_clear{
     box-sizing: border-box;
     width: 50%;  height: auto;
     padding: 30px;
     float: left;
     margin-right: 0%;
   }
   .two_clear{
     box-sizing: border-box;
     width: 50%;  height: auto;
     padding: 30px;
     float: left;
   }
   .one{
     box-sizing: border-box; background-image: url(../images/under-gelb.jpg);
     width: 50%;  height: 800px;
     padding: 30px;
     float: left;
     margin-right: 0%;
   }
   .two{
     box-sizing: border-box; background-image: url(../images/under-lila.jpg);
     width: 50%;  height: 800px;
     padding: 30px;
     float: left;
   }
   .one01{
     box-sizing: border-box;
     width: 100%;
     padding-right: 10px;
     float: left;
   }
   .two01{
     box-sizing: border-box;
     width: 100%;
     padding-left: 10px;

   }
   #index01{
       width: 100%; float: left; margin-bottom: 10px;
   }
   #index02{
       width: 100%;
   }

   .footer{
       position: relative;
       width: 100%;
       max-width: 70%;
       margin: 0 auto ;
       border-top : solid 2px #D0D0D0 ;
       min-height: 150px;
       height: auto;
   }
   .footer_left p{
       width: 50%;
       position: absolute;
       top: 0;
       left: 0;
       float: left;
       font-size: 18px;
       margin-right: 20px;
   }
   .footer_right p{
       width: 50%;
       float: left;
       font-size: 18px;
       position: absolute;
       top: 0;
       left: 50%;
   }
   .clear{
    width: 100%;
    float: none;
    color: #FFFFFF;
    height: 20px;
    clear: both;
   }
   .rund{
       height: 60px;
       float: left;
       margin-right: 5px;
       margin-bottom: 5px;
   }
   .rund:hover{
       transform: scale(1.1); transition: transform .3s;
   }
   .impres{
       font-size: 16px;
   }
   #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #dfb563;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
}
   #myBtn:hover {
    background-color: #555;
}
}