/* CSS DOCUMENT */
header {
    background: url(projekt_header_bg.png) no-repeat;
    background-size: 100%;
    font-family: Calibri;
    grid-area: head;  
}
nav    {
    grid-area: nav;
}
aside { 
    border-style: 10px;
    border-color: black;
    text-align: center;
    grid-area: aside;
}
footer {
    background: url(projekt_footer_bg.png) no-repeat;
    background-position: bottom;
    background-size: 100%;
    font-family: calibri;
    grid-area: foot;
}
body {
         font-family: Calibri;
         display: grid;
         padding: auto;
         margin: auto;
         width: auto;
         grid-template-columns: repeat(1, 1fr) ;
         grid-template-areas:  "head"
                               "nav"
                               "main"
                               "aside"
                               "foot";
}
img {
    width: 20%;
    height: auto;
}
/*.img-a{
    position: relative;
    bottom: 50px;
    left: 50px;
}
.img-b{
    position: relative;
    bottom: 90px;
    left: 47px;
}*/
 main {
     grid-area: main;
     padding-bottom: 20%;
 }
 .nav-ul{
     width: 1px;  
     border-collapse: separate;
     border-spacing: 5px;
     font-family: Calibri;
     text-align: left;
 }
 .nav-a {
     color: black;
     padding: 2px;
     border: #ff7f27;
     border-radius: 12px;
     background-color: #ff7f27;
     text-decoration: none;
 }
 .nav-a:hover{
     color: white;

 }
 table{
     padding: auto;
     text-align: center;
     margin: auto;
     width:auto;
 }
 .names{
     font-size: 12px;
     text-align: left;
     padding: auto;
     margin: auto;
     width:auto;
 }
 @media (max-width: 30em) {
    body{
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas:   "head"
                               "nav"
                               "main"
                               "aside"
                               "foot" ;
    }
    .main-ul {
       font-size: 10px;
   }
   .main-box {
       font-size: 10px;
   }
   .aside-box {
        font-size: 10px;
        margin-left: 53px;
        margin-right: 78px;
        border-top: black;
        border-top-width: 1px;
        border-top-style: solid;
   }
   .aside-p {
        font-size: 10px;
   }
   .nav-ul {
       font-size: 10px;
       margin: 2px 1px;
       padding-bottom: 5%; 
   }
   .footer-table {
       font-size: 10px;
   }
   .names {
       font-size: 3px;
   }
    header {
    padding: 35px;
   }
   .img-a{
    position: relative;
    bottom: 25px;
    left: 40%;
    }
    footer {
    padding: 1px;
   }
}
 @media (min-width: 30em) {
     body{
         grid-template-columns: repeat(3, 1fr);
         grid-template-areas:   "head head head "
                                "nav nav aside "
                                "main main aside"
                                "foot foot foot" ;
     }
     .main-ul {
        font-size: 12px;
    }
    .main-box {
        font-size: 16px;
    }
    .aside-box {
         font-size: 14px;
         border-left: black;
         border-left-style: solid;
         border-left-width: 1px;
    }
    /*h2{
        position: relative;
        top: 2%;
    }*/
    .aside-p {
        position: relative;
        top: 25%;
         font-size: 10px;
    }
    .nav-ul {
        font-size: 16px;
        margin-right: 600px;
        padding-bottom: 5%;
        padding-right: 100px;
        position: relative;
        left: 50px;
        right: 50px;
        border-bottom: black;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .footer-table {
        font-size: 10px;
    }
    .names {
        font-size: 10px;
    }
    header {
        padding: 35px;
    }
    .img-a{
        position: relative;
        bottom: 20px;
        left: 40%;
        }
    footer {
        padding: 1px;
   }
 }
 @media (min-width: 60em) {
    body{
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas:   "head head head head head"
                               "nav main main main main"
                               "nav main main main main"
                               "aside main main main main"
                               "foot foot foot foot foot" ;
    }
    aside{
        padding-top: 10%;
    }
    .main-ul {
        font-size: 20px;
    }
    .main-box {
        font-size: 22px;
    }
    
    .aside-box {
         font-size: 18px;
    }
    
    .aside-p {
         font-size: 16px;
    }
    .nav-ul {
        margin-right: 100px;
        padding-bottom: 30%;
        position: relative;
        left: 50px;
        right: 50px;
        font-size: 20px;
        border-bottom: black;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .footer-table{
        font-size: 16px;
    }
    .names {
        font-size: 12px;
        position: relative;
        bottom: -47px;
        left: -40px;
    }
    header {
        padding: 71px;
        padding-top: 30px;
    }
    .img-a{
        position: relative;
        bottom: 30%;
        left: 3%;
        }
    footer {
        padding: 50px;
    }
    main{
        border-left: black;
        border-left-style: solid;
        border-left-width: 1px;
    }
}

.gallery {
    margin: 5px;
    /* border: 1px solid rgb(250, 0, 0); */
    float: left; 
    width: 300px;
  }
.border-img{
    width: 300px;
    height: 180px;
    border-width: 1px;
    border-style: solid;
    border-color: gray;

}
.text {
    padding: 15px;
    text-align: center;
  }
  .startseite-text {
      clear: both;
  }
.sauce-main-page {
    font-size: 12px;
}