/*@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: black;
    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: #000000;
    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: #000000;
    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 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 leerraum leerraum leerrechts"
        "leerlinks fuss fuss leerrechts";
    grid-gap: 0;
    font-family: 'Roboto', sans-serif;
    color: black;
    text-align: center;
}

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

.kopffarbe {
    background: black;
    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;
    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;
}

/*
.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: black;
    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 50px 60px;
        grid-template-areas: 
            "kopfmail kopffarbe"
            "logo logo"
            "welle welle"
            "navi navi"
            "galerienavi galerienavi"
            "galerieinhalt1 galerieinhalt1"
            "galerieinhalt2 galerieinhalt2"
            "galerieinhalt3 galerieinhalt3"
            "galerieinhalt4 galerieinhalt4"
            "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;
    }