* {
  box-sizing: border-box;
  margin:0px;
padding:0;

}


@font-face {
  font-family: myFirstFont;
  src: url(Raleway-Regular.ttf);
   color: black;
}

@font-face {
  font-family: myFirstFont2;
  src: url(LuckiestGuy.ttf);

   color: white;
}





body {



  font-size:15px; 
  text-align: justify;
  font-family: myFirstFont;
  
/*
background-size: cover;
 background-position: center;
 	 background-image: repeating-linear-gradient(-30deg,lightblue, white,lightblue,white,lightblue, white,lightblue,white,lightblue, white,lightblue );
	 */

 background-color:#FFFCF0;
 

 
 
}

  .container {
  display: grid;
  grid-template-columns: 0.2fr 1fr 1fr  1fr  1fr 0.2fr ;
  grid-template-areas:
  "   .  header header header  header  . "

". nav  nav  nav  nav ."
".  headline   headline headline headline ."


     ". . xx xx .  ."
	 ". a b c d  ."
	 ". e f g h  ."
 	 ". i f2 j k  ."
 	 ". l m n o  ."
     ". p q r s   ." 
 
	 
	 
"     footer   footer    footer  footer   footer  footer      "  ;		 
 


gap: 15px;
   font-size: 17px;


 
 color: black;
 

 
}



@media only screen and (max-width: 1500px) {
  .container {
	  display: grid;  
	  
    grid-template-columns:1fr 1fr ;
       grid-template-areas:
      "header  header "
 
"nav nav"

"headline headline "


"xx xx" 
	 
	   "a b" 
	
	 "c d" 
	    
	  "e f" 

	     "f2 g" 

	 "h  i" 


	  "j  k" 

	 
	   "l  m" 
	
	 "n o"  
	
	 
	 	 "p q"  
	"r s"
	 "footer footer";
	 
	 

  padding: 0px;
gap: 15px;

	color: black;
   }
 
}



@media only screen and (max-width: 800px) {
  .container {
	   display: grid; 
    grid-template-columns: 1fr ;
       grid-template-areas:
      "header"

"nav"

"headline" 
"xx"
    "a " 
	  "b " 
	 "c" 
	    "d " 
	  "e " 
	 "f" 
	 "f2" 
	 
	     "g " 
	  "h " 
	 "i" 

   "j " 
	  "k " 
	 "l" 
	 
	   "m " 
	  "n " 
	 "o"  
	 	 "p"  
	 
	 	 "q" 
	 
	  "r" 
	 "footer";


 gap: 8px;
   }
 
}








a:link {

margin-left:0px;
 font-style: italic;
color: saddlebrown;
}
/* visited link */
a:visited {
  color: saddlebrown;
}

/* mouse over link */
a:hover {
  color: orange;
  }

/* selected link */
a:active {
  color: saddlebrown;
}


a:link {
  text-decoration: none;
}







 























.header {
 
    grid-area: header;
	 text-align: center;
	   padding-top: 0px;
    text-align: center;
	
	
	
}










.nav {

  grid-area: nav;

  


    font-family: myFirstFont;

   font-size:15px;


text-align:center;




}



.headline {

  grid-area: headline;
font-family: myFirstFont;
 
  color:black;

 text-align: left;
font-size:20px;
 




  


}




























.xx{

  grid-area:xx;
  font-family: myFirstFont;
background-color: #ffecb3; 


padding:2px;
border: 0px solid red;
 border-radius: 0px;

  text-align: center;
 }
@media only screen and (max-width: 800px) {
  .xx {margin-bottom:40px;
  }
}


.a{

  grid-area:a;
  font-family: myFirstFont;

background-color: #ffecb3; 

padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .a {margin-bottom:40px;
  }
}


.b{

  grid-area:b;
  
  font-family: myFirstFont;


background-color: #ffecb3; 
 text-align: left;
padding:5px;
border: 0px solid red ;
 border-radius: 0px;
 }

@media only screen and (max-width: 800px) {
  .b {margin-bottom:40px;
  }
}

.c{

  grid-area:c;
  font-family: myFirstFont;

background-color: #ffecb3; 
 text-align: left;
padding:5px;
border: 0px solid red    ;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .c {margin-bottom:40px;
  }
}






.d{

  grid-area:d;

    font-family: myFirstFont;



background-color: #ffecb3; 
 text-align: left;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .d {margin-bottom:40px;
  }
}



.e{

  grid-area:e;
  font-family: myFirstFont;

background-color: #ffecb3; 

 text-align: left;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .e {margin-bottom:40px;
  }
}



.f{

  grid-area:f;
    font-family: myFirstFont;
background-color: #ffecb3; 


 text-align: center;
padding:5px;

/*
  border: 1px solid transparent;
  padding: 15px;
  border-image: url(verlauf.png) 30 round;

*/

background-size: cover;
 background-position: center;





 


border: 0px solid red;

 }

@media only screen and (max-width: 800px) {
  .f {margin-bottom:40px;
  }
}



.f2{

  grid-area:f2;
    font-family: myFirstFont;

background-color: #ffecb3; 

 text-align: center;
padding:5px;

/*
  border: 1px solid transparent;
  padding: 15px;
  border-image: url(verlauf.png) 30 round;

*/

background-size: cover;
 background-position: center;





 


border: 0px solid red;

 }

@media only screen and (max-width: 800px) {
  .f2 {margin-bottom:40px;
  }
}


.g{

  grid-area:g;

background-color: #ffecb3; 

  font-family: myFirstFont;
color:black;
 text-align: center;
padding:5px;
border: 0px solid  red;
/*
 background: url(kreis.png) no-repeat center ;
 background-size: cover;
 background-position: center; */

 /* border-style: dotted ;
  border-width: thick;
  border-color:white;
  */
 }
@media only screen and (max-width: 800px) {
  .g{margin-bottom:40px;
  }
}



.h{

  grid-area:h;

    font-family: myFirstFont;


 /*background: url(kreis.png) no-repeat center ;
 background-size: cover;
 background-position: center;*/
 
background-color: #ffecb3; 
 
 text-align: left;
padding:5px;
border: 0px solid  red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .h {margin-bottom:40px;
  }
}


.i{

  grid-area:i;

  font-family: myFirstFont;


 
background-color: #ffecb3; 
 
 
 text-align: center;
padding:5px;
border: 0px solid  red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .i {margin-bottom:40px;
  }
}


.j{

  grid-area:j;


  font-family: myFirstFont;


background-color: #ffecb3; 
 text-align: center;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .j {margin-bottom:40px;
  }
}


.k{

  grid-area:k;

    font-family: myFirstFont;

background-color: #ffecb3; 

 text-align: center;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }
@media only screen and (max-width: 800px) {
  .k {margin-bottom:40px;
  }
}




.l{

  grid-area:l;

   font-family: myFirstFont;
background-color: #ffecb3; 


 text-align: left;
padding:5px;
border: 0px solid  red;
 border-radius: 0px;

 }
@media only screen and (max-width: 800px) {
  .l {margin-bottom:40px;
  }
}


.m{

  grid-area:m;

    font-family: myFirstFont;

background-color: #ffecb3; 
 text-align: center;
padding:5px;
border: 0px solid  red;
 border-radius: 0px;
}

@media only screen and (max-width: 800px) {
  .m {margin-bottom:40px;
  }
}

.n{

  grid-area:n;
  font-family: myFirstFont;

background-color: #ffecb3; 

 text-align: left;
color:black;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }

@media only screen and (max-width: 800px) {
  .n {margin-bottom:40px;
  }
}




.o{

  grid-area:o;



color:black;



background-color: #ffecb3; 


  font-family: myFirstFont;
  text-align: center;
padding:5px;

border: 0px solid  red;
 border-radius: 0px;

 

  text-align: left;

  

 
}

@media only screen and (max-width: 800px) {
  .o {margin-bottom:40px;
  }
}

 

 
 
 
 
 
 
 
 .p{

  grid-area:p;
  font-family: myFirstFont;


background-color: #ffecb3; 

 text-align: left;
 line-height: 35px;
padding:5px;

border: 0px solid  red;
 border-radius: 0px;
 }



 @media only screen and (max-width: 800px) {
  .p {margin-bottom:40px;
  }
}

.q{

  grid-area: q;
  font-family: myFirstFont;
  
background-color: #ffecb3; 


 text-align: left;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }



@media only screen and (max-width: 800px) {
  .q {margin-bottom:40px;
  }
}


.r{

  grid-area: r;
  font-family: myFirstFont;
  
background-color: #ffecb3; 

 text-align: left;
padding:5px;
border: 0px solid red;
 border-radius: 0px;
 }



@media only screen and (max-width: 800px) {
  .r {margin-bottom:40px;
  }
}







.footer{


  grid-area: footer;
 text-align: center;

background-image: linear-gradient(-45deg, orange ,white, orange ); 

}


.backcol{


  background-color:lightyellow;
  color:black;
 text-align: left;

padding-left: 8px;




  
 } 





 
 
.ort{


  background-color:tomato;
  color:white;
 text-align: center;
font-size:25px;

   padding-left: 8px;
  font-family: myFirstFont2;


  
 } 

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 0px solid gray;
  
   border-radius: 0px;
  
  
}
























 










 /* Responsive layout des headers  anfang */
.image2{
   display: none;}
@media only screen and (max-width: 1000px){
   .image1{
     display: none;   }

   .image2{
     display: block;   }
}