@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: 22.5% 22.5% 22.5% 22.5%;
  /*grid-template-rows: 50px 50px 30px 350px 30px 250px 10px 30px 30px 30px;*/
  grid-template-rows: 50px 50px 30px 350px 30px 350px 350px 20px 30px 30px 30px;
  column-gap: 0.0%;
  row-gap: 0.0%;
  width: 100%;
  margin: 2% 5% 3% 5%;
  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: #004000;
 }
 
 
 .r2c1 {
 grid-column: 1 / span 4;
 grid-row: 2 / span 1;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #ff0000;
 }
 
 
 .r3c1 {
 grid-column: 1 / span 4;
 grid-row: 3 / span 1;
 display: flex;
 justify-content: left;
 align-items: center;
 }
 
 
 .r4c1 {
 grid-column: 1 / span 4;
 grid-row: 4 / span 1;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 
 
 .r5c1 {
 grid-column: 1 / span 4;
 grid-row: 5 / span 1;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 
 
 .r6c1 {
 grid-column: 1 / span 2;
 grid-row: 6 / span 1;
 display: flex;
 justify-content: right;
 align-items: center;
 }
 .r6c3 {
 grid-column: 3 / span 2;
 grid-row: 6 / span 1;
 display: flex;
 justify-content: left;
 align-items: center;
 }
 
 
 .r7c1 {
 grid-column: 1 / span 2;
 grid-row: 7 / span 1;
 display: flex;
 justify-content: right;
 align-items: center;
 }
 .r7c3 {
 grid-column: 3 / span 2;
 grid-row: 7 / span 1;
 display: flex;
 justify-content: left;
 align-items: center;
 }


 .r8c1 {
 grid-column: 1 / span 4;
 grid-row: 8 / span 1;
 display: flex;
 justify-content: center;
 align-items: center;
 }


 .r9c1 {
 grid-column: 1 / span 2;
 grid-row: 9 / span 1;
 display: flex;
 justify-content: right;
 align-items: center;
 background-color: #004000;
 }
  .r9c3 {
 grid-column: 3 / span 2;
 grid-row: 9 / span 1;
 display: flex;
 justify-content: left;
 align-items: center;
 background-color: #ff0000;
 }


 .r10c1 {
 grid-column: 1 / span 2;
 grid-row: 10 / span 1;
 display: flex;
 justify-content: right;
 align-items: center;
 background-color: #004000;
 }
 .r10c3 {
 grid-column: 3 / span 2;
 grid-row: 10 / span 1;
 display: flex;
 justify-content: left;
 align-items: center;
 background-color: #ff0000;
 }

 
 .r11c1 {
 grid-column: 1 / span 4;
 grid-row: 11 / span 1;
 display: flex;
 justify-content: center;
 align-items: center;
 }




/* 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.r3c1 li a {  
    display: block;
    color: #000000;
    padding: 8px 8px;
    text-decoration: none;
    height: 20px;
    border: 1px solid black;
}

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

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

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

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






/* span */
p.dienste {
  font-family: Open Sans; 
  color: #ffffff;
  font-size: 1.5em;
  -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
  padding-left: .5em;
  padding-right: .5em;
  word-spacing: 1.5em;
  letter-spacing: .1em;
}
p.dienste2 {
  font-family: Open Sans; 
  color: #ffffff;
  font-size: 1.5em;
  -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
  padding-left: .5em;
  padding-right: .5em;
  word-spacing: .5em;
  letter-spacing: .1em;
}


/* Schrift */
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;
}




/* Bilder */
img.logo {
  max-height: 350px;
}
img.ninja {
  max-height: 300px;
  
}
img.bild1 {
  max-height: 350px;
}





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




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




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


@media only screen and (max-width: 1000px){

.grid {
  grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
  grid-template-rows: 40px 40px 30px 350px 30px 300px 300px 20px 30px 30px 30px;
  margin: 2% 1% 3% 1%;
}

img.bild1 {
  max-height: 300px;
}

p.dienste {
  font-size: 1.25em;
  word-spacing: 1.0em;
}
p.dienste2 {
  font-size: 1.25em;
}

	
}

@media only screen and (max-width: 850px){

.grid {
  grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
  grid-template-rows: 40px 40px 30px 350px 30px 250px 250px 10px 30px 30px;
  margin: 2% 1% 3% 1%;
}

img.bild1 {
  max-height: 250px;
}

}

@media only screen and (max-width: 710px){

.grid {
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 40px 40px 30px 350px 30px 200px 200px 10px 30px 30px;
  margin: 2% 0% 3% 0%;
}

img.bild1 {
  max-height: 200px;
}


p.dienste {
  font-size: 1.0em;
  word-spacing: .8em;
  font-weight: bold;
}
p.dienste2 {
  font-size: 1.0em;
  font-weight: bold;
}
	
}



@media only screen and (max-width: 560px){

.grid {
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 40px 40px 30px 250px 30px 150px 150px 10px 30px 30px;
  margin: 2% 0% 3% 0%;
}

img.logo {
  max-height: 200px;
}

img.bild1 {
  max-height: 150px;
}

p.dienste {
  font-size: .9em;
  word-spacing: .6em;
  font-weight: bold;
}
p.dienste2 {
  font-size: .9em;
  font-weight: bold;
}

p.oeff {                /*Datenschutzerklärung*/
  font-size: .8em;
  padding-left: .3em;
  padding-right: .3em;
}

}


@media only screen and (max-width: 430px){

.grid {
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 40px 40px 30px 250px 30px 100px 100px 10px 30px 30px;
  margin: 2% 0% 3% 0%;
}



img.bild1 {
  max-height: 100px;
}

p.dienste {
  font-size: .75em;
  word-spacing: .75em;
  font-weight: bold;
}
p.dienste2 {
  font-size: .75em;
  font-weight: bold;
}

p.oeff {                /*Datenschutzerklärung*/
  font-size: .8em;
  padding-left: .3em;
  padding-right: .3em;
}

}


@media only screen and (max-width: 340px){

.grid {
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 30px 30px 30px 200px 30px 100px 100px 10px 20px 20px;
  margin: 2% 0% 3% 0%;
}

img.logo {
  max-height: 150px;
}

p.dienste {
  font-size: .75em;
  word-spacing: .25em;
  font-weight: bold;
}
p.dienste2 {
  font-size: .75em;
  font-weight: bold;
}

p.oeff {                /*Datenschutzerklärung*/
  font-size: .8em;
  padding-left: .1em;
  padding-right: .1em;
}

}