@import url('https://fonts.googleapis.com/css?family=Open+Sans');


/* ********** ********** ********** ********** ********** */
body { 

   background-color: rgb(32, 32, 32);
   background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, 
   black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
   background-size: 10px 10px, 10px 10px, 10px 5px;
   font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
   background-position: 0px 0px, 5px 5px, 0px 0px;
   font-family: 'Open Sans', sans-serif;
   font-size: 1em;
   
}
/* ********** ********** ********** ********** ********** */

.grid {
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(12.5%, 1fr));*/
  grid-template-columns: 20% 20% 20% 20%;
  grid-template-rows: 50px 50px 30px 1650px 30px;
  column-gap: 0.0%;
  row-gap: 0.0%;
  width: 100%;
  margin: 2% 10% 3% 10%;
  align-items: stretch;
}


/* Seiten: alle */
.r1c1 {
 grid-column: 1 / span 4;
 grid-row: 1 / span 1;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #555555;
}


.r2c1 {
 grid-column: 1 / span 4;
 grid-row: 2 / span 1;
 display: flex;
 justify-content: left;
 align-items: top;
}


.r3c1 {
 grid-column: 1 / span 4;
 grid-row: 3 / span 1;
 display: flex;
}


.r4c1 {
 grid-column: 1 / span 4;
 grid-row: 4 / span 1;
 display: flex;
 justify-content: left;
 align-items: top;
}



.r5c1 {
 grid-column: 1 / span 4;
 grid-row: 5 / span 1;
 display: flex;
}




/* menue */
.dropdown {  
    background-image: url(Bilder/menue.png);
    background-repeat: no-repeat;
    position: fixed;
    z-index: 99;
}
 
.dropdown-content {  
    display: none;
    list-style-type: none;
    margin: 0;padding: 0;border:0px;
    width: 200px;
    height: auto;
    background-color: #ffffff;
}

.dropdown:hover .dropdown-content {  
	 position: absolute;
    display: block;
    font-family:open sans;font-size:.9em;color:#000000;font-weight:bold;text-decoration:none;
}

.dropdown:hover .dropbtn {  
    background-color: transparaent;
} 

div.r2c1 li a {  
    display: block;
    color: #000000;
    padding: 8px 8px;
    text-decoration: none;
    height: 20px;
    border: 1px solid black;
}

div.r2c1 li {  
    text-align: left;
    border-bottom-color: white;
}

div.r2c1 li:last-child {  
    border-bottom-color: white;
}

div.r2c1 li a.active { 
    /*background-color: #8c132c;*/
    color: #c0c0c0;
}

div.r2c1 li a:hover:not(.active) {  
    background-color: #8c132c;
    color: #ffffff;
}




p.oeff {                /*Datenschutzerklärung*/
  font-family: Open Sans; 
  color: #ffffff;
  font-size: 1.0em;
  -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
  padding-left: .5em;
  padding-right: .5em;
}
p.impressum {                /*Datenschutzerklärung*/
  font-family: Open Sans; 
  color: #ffffff;
  font-size: 0.9em;
  -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
  padding-left: 1em;
  padding-right: 1em;
}


a:link.face, a:visited.nav, a:active.nav       {font-size:1.0em; color:#ffffff; text-decoration: none}
a:hover.face                                   {font-size:1.0em; color:#ffff00; text-decoration: none}




/***************************************************************************************************************/
/***************************************************************************************************************/
/***************************************************************************************************************/
/***************************************************************************************************************/




/********** @media **********/

@media only screen and (max-width: 600px){
	
  .grid {
  	 grid-template-columns: 24% 24% 24% 24%;
    margin: 2% 2% 3% 2%;
  }

}