/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');*/

@font-face {
 font-family: 'Roboto'; /* Gewünschter Name */
 src: url('Roboto-Italic.eot'),
      url('Roboto-Medium.eot');
           /* für IE9 */
 src: url('Roboto-Italic.eot') 
           format('embedded-opentype'),
      url('Roboto-Medium.eot') 
           format('embedded-opentype'),
           /* für IE6-IE8 */
      url('Roboto-Italic.woff') 
           format('woff'),
      url('Roboto-Medium.woff') 
           format('woff'), 
          /* für moderne Browser */
      url('Roboto-Medium.ttf') 
           format('truetype'),
      url('Roboto-Medium.ttf') 
           format('truetype');
         /* für Safari, Android, iOS */
}

body {
    margin: 0;
}

html {
    overflow-y: scroll;
}

h1 {
    color: #f14e3f;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 2.0rem;
    letter-spacing: 0.05rem;
    line-height: 1.2;
}

h2 {
    color: black;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    letter-spacing: 0.05rem;  
}

p {
    color: black;
    background-color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1em;
    letter-spacing: 0.05rem;
    line-height: 1.3;
    padding-left: 10px;
    padding-bottom: 10px;
    margin: 0px
}

p.art {
    font-style: italic;
    color: grey;
    padding-top: 0px;
}


.link_mail {
    color: white;
    text-decoration: none;
    font-weight: 300;
    font-size: 1.0rem;
    letter-spacing: 0.02rem;
    padding-left: 30px;
}

.link_impressum {
    color: white;
    text-decoration: none;
    font-weight: 300;
    font-size: 1.0rem;
    letter-spacing: 0.02rem;
}

a.navi_on {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 0.02rem;
    line-height: 1.4;
    background-color: #f14e3f;
    padding-left: 10px;
    padding-right: 10px;
}

a.navi_off {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    font-style: italic;
    letter-spacing: 0.02rem;
    line-height: 1.4;
    padding-left: 10px;
    padding-right: 10px;
    color: #000000;
}

a.galerienavi_on {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.0rem;
    letter-spacing: 0.02rem;
    line-height: 1.1;
    background-color: #f14e3f;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
}

a.galerienavi_off {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.0rem;
    font-style: italic;
    letter-spacing: 0.02rem;
    line-height: 1.1;
    padding-left: 10px;
    padding-right: 10px;
    color: #000000;
    text-align: right;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
    grid-template-rows: 40px 240px 20px 50px 150px auto auto auto auto 50px 60px;
    grid-template-areas: "leerlinks kopfmail kopffarbe leerrechts"
        "leerlinks logo logo leerrechts"
        "leerlinks welle welle leerrechts"
        "leerlinks navi navi leerrechts"
        "leerlinks galerienavi galerienavi leerrechts"
        "leerlinks galerieinhalt1 galerieinhalt2 leerrechts"
        "leerlinks galerieinhalt3 galerieinhalt4 leerrechts"
        "leerlinks galerieinhalt5 galerieinhalt6 leerrechts"
        "leerlinks galerieinhalt7 galerieinhalt8 leerrechts"
        "leerlinks leerraum leerraum leerrechts"
        "leerlinks fuss fuss leerrechts";
    grid-gap: 0;
    font-family: 'Roboto', sans-serif;
    color: black;
    text-align: center;
}

.kopfmail {
    background: #f14e3f;
    grid-area: kopfmail;
    margin-left: 0px;
    border-bottom-left-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;    
}

.kopffarbe {
    background: #f14e3f;
    grid-area: kopffarbe;
    margin-right: 0px;
    padding-right: 20px;
    padding-top: 3px;
    border-bottom-right-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

.logo {
    background: white;
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.logoimg {
    height: 200px;
}

.farbimg {
    height: 20px;
}

.galerieimg1 {
  width:100%;
  height:auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

.galerieimg3 {
  width:100%;
  height:auto;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 00px;
    border-top-right-radius: 00px;
    }

.welle {
    background: white;
    grid-area: welle;
    font-size: 1.5rem;
    color: #f14e3f;
    letter-spacing: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.navi {
    background: white;
    grid-area: navi;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.galerienavi {
    background: white;
    grid-area: galerienavi;
}

ul.galerie {
    list-style-position:inside;
    margin: 0;
    padding: 0;
    text-align: center;  
}

li.galerie {
    display: block;
    margin: 10px;
    text-decoration: none;
    text-align: center;
}

.galerieinhalt1 {
    background: white;
    grid-area: galerieinhalt1;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt2 {
    background: white;
    grid-area: galerieinhalt2;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt3 {
    background: white;
    grid-area: galerieinhalt3;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt4 {
    background: white;
    grid-area: galerieinhalt4;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt5 {
    background: white;
    grid-area: galerieinhalt5;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt6 {
    background: white;
    grid-area: galerieinhalt6;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt7 {
    background: white;
    grid-area: galerieinhalt7;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.galerieinhalt8 {
    background: white;
    grid-area: galerieinhalt8;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

/*
.inhalt1 {
    background: white;
    grid-area: inhalt1;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: right;
}

.inhalt2 {
    background: white;
    grid-area: inhalt2;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}
*/

.leerraum {
    background: white;
    grid-area: leerraum;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fuss {
    background: #f14e3f;
    grid-area: fuss;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.fuss {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;    
}

li.fuss {
    display: block;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

@media only screen and (max-width: 1000px) {
    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 40px 240px 20px 50px 140px auto auto auto auto auto auto auto auto 50px 60px;
        grid-template-areas: 
            "kopfmail kopffarbe"
            "logo logo"
            "welle welle"
            "navi navi"
            "galerienavi galerienavi"
            "galerieinhalt1 galerieinhalt1"
            "galerieinhalt2 galerieinhalt2"
            "galerieinhalt3 galerieinhalt3"
            "galerieinhalt4 galerieinhalt4"
            "galerieinhalt5 galerieinhalt5"
            "galerieinhalt6 galerieinhalt6"
            "galerieinhalt7 galerieinhalt7"
            "galerieinhalt8 galerieinhalt8"
            "leerraum leerraum"
            "fuss fuss";
    }
    
   /*
    .kopfmail {
    border-bottom-right-radius: 30px;
    }
    
    .kopffarbe {
    display: none;
    }
    */
    
    h1 {
    font-size: 1.8rem;
    }
    
    h2 {
    font-size: 1.3rem;
    }

    p {
    font-size: 1.0rem;
    }
    
    .logoimg {
    height: 170px;
    }

    .galerienavi {
    justify-content:center
    }
    
    li.galerie {
    text-align: center;
    }