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


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

   color: white;
}


body {

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


}



.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  color:blue;
}










.container {
  display: grid;

  grid-template-columns: 0.25fr 1fr 1fr  1fr 1fr 0.25fr ;

  grid-template-areas:
  "  . header header header header ."
    ". nav  nav nav  nav . "
	 ".  headline  headline  headline  headline  ."
	". b1 b2 b3 b4 ."
	". b5 b6 b7 b8 ."
	". b9 b10 b11 b12  ."
	". b13 b14 b15 b16 ."
	". b17 b18 b19 b20 ."
	". b21 b22 b23 b24 ."
		". b25 b26 b27 b28 ."
		". b29 b30 b31 b32 ."
		". b33 b34 b35 b36 ."
		". b37 b38 b39 b40 ."
		". b41 b42 b43 b44 ."
		". b45 b46 b47 b48 ."
		". b49 b50 b51 b52 ."
	   "  footer  footer    footer footer   footer footer   "  ;		 
 
  padding-top: 0px;		
 column-gap: 5px;
 row-gap: 5px;
   font-size: 12px;
 Color:#37474F;
 /* text-align: center;*/
}



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

.container {
  display: grid;

  grid-template-columns: 0.1fr  1fr 1fr 0.1fr ;

  grid-template-areas:
  "  . header header ."
    ".  nav  nav . "
	 ".   headline  headline  ."
	". b1 b2  ."
	". b3 b4 ."
	". b5 b6 ."
	". b7 b8 ."
". b9 b10 ."
". b11 b12 ."
". b13 b14 ."
". b15 b16 ."
". b17 b18 ."
". b19 b20 ."
". b21 b22 ."
". b23 b24 ."
". b25 b26 ."
". b27 b28 ."
". b29 b30 ."
". b31 b32 ."
". b33 b34 ."
". b35 b36 ."
". b37 b38 ."
". b39 b40 ."
". b41 b42 ."
". b43 b44 ."
". b45 b46 ."
". b47 b48 ."
". b49 b50 ."
". b51 b52 ."
" footer   footer footer   footer "  ;		 
 
  padding-top: 0px;		
 column-gap: 5px;
 row-gap: 5px;
   font-size: 12px;
 Color:#37474F;
 /* text-align: center;*/
}

}

















@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns:1fr ;
       grid-template-areas:
      "header"
      "nav"
	  "headline"
	"b1"
	"b2"
	"b3"
	"b4"
	"b5"
	"b6"
	"b7"
	"b8"
	"b9"
	"b10"
	"b11"
	"b12"
	"b13"
	"b14"
	"b15"
	"b16"
	"b17" 
	"b18"
	"b19"
	"b20"
	"b21"
	"b22"
	"b23"
	"b24"
		"b25"
		"b26"
		"b27"
		"b28 "
		"b29"
		"b30" 
		"b31" 
		"b32 "
		"b33" 
		"b34"
		"b35"
		"b36 "
		"b37" 
		"b38" 
		"b39" 
		"b40"
		"b41"
		"b42" 
		"b43" 
		"b44"
		"b45"
		"b46" 
		"b47" 
		"b48"
		"b49" 
		"b50" 
		"b51" 
		"b52"

 
	 
      "footer";

  padding-top: 0px;

  
   }
 
}













a {

  transition: color 0.3s ease, transform 0.3s ease; /* sanfte Übergänge */
}



a:link {

margin-left:0px;
 font-style: italic;

color: black;
}
/* visited link */
a:visited {

  color: black;
  
}

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

  
  
  }

/* selected link */
a:active {
  color: black;
  

}

a:link {
  text-decoration: none;
}




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

.nav {
 grid-area: nav;
 

    font-family: myFirstFont;
   font-size:15px;

	padding-right:15px;  
	    padding-top: 10px;
 padding-bottom: 10px;

text-align:center;	  
}

@media only screen and (max-width: 1000px) {
  .nav {
text-align: justify;
  }
}


.headline {

  grid-area: headline;
 text-align: left;
     
  color:black;
   padding: 0px; 
  font-size:20px;
  margin:2px;
  
}




.b1 {
	
	  grid-area: b1;
  position: relative;
  text-align: center;
  color: white;
  border: 1px solid gray;
 border-radius: 0px;
  
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


span {
  background-color: red;
}




.b2{
  background:"";
  grid-area: b2;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
 opacity: 0.9;
 
}




.b3{
  background:"";
  grid-area: b3;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
  opacity: 0.9;
}



.b4{
  background:"";
  grid-area: b4;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
  opacity: 0.9;
}



.b5{
  background:"";
  grid-area: b5;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
}



.b6{
  background:"";
  grid-area: b6;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}

.b7{
  background:"";
  grid-area: b7;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}






.b8{
  background:"";
  grid-area: b8;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}






.b9 {
	
	  grid-area: b9;
  position: relative;
  text-align: center;
  color: white;
  border: 1px solid gray;
 border-radius: 0px;
  
  
}










.b10 {
	
	  grid-area: b10;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}











.b11{
  background:"";
  grid-area: b11;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}







.b12 {
	
	  grid-area: b12;
  position: relative;
  text-align: center;
  color: white;
  border: 1px solid gray;
 border-radius: 0px;
  
  
}








.b13 {
	
	  grid-area: b13;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}






.b14{
  background:"";
  grid-area: b14;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}





.b15{
  background:"";
  grid-area: b15;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}






.b16 {
	
	  grid-area: b16;
  position: relative;
  text-align: center;
  color: white;
  border: 1px solid gray;
 border-radius: 0px;
  
  
}




.b17{
  background:"";
  grid-area: b17;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;

}






.b18{
  background:"";
  grid-area: b18;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}




.b19{
  background:"";
  grid-area: b19;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}






.b20 {
	
	  grid-area: b20;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}






.b21{
  background:"";
  grid-area: b21;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}



.b22{
  background:"";
  grid-area: b22;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}





.b23 {
	
	  grid-area: b23;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}


.b24{
  background:"";
  grid-area: b24;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
}




.b25 {
	
	  grid-area: b25;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
      background-size: cover;
 background-position: center;

 overflow: hidden; 
  border: 1px solid gray;
}


.b25 img {
    transform: rotate(-10deg);
    max-width: 100%;            
    height: auto;
    display: block;
}








.b26{
  background:"";
  grid-area: b26;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
       background-size: cover;
 background-position: center;

 overflow: hidden; 
  border: 1px solid gray;
 
 
}

.b26 img {
    transform: rotate(10deg);
    max-width: 100%;            
    height: auto;
    display: block;
}





.b27{
  background:"";
  grid-area: b27;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
 color:black;
  font-size: 19px;
  

  
}






.b28{
  background:"";
  grid-area: b28;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
 
          background-size: cover;
 background-position: center;

 overflow: hidden; 
 
 
}


.b28 img {
    transform: rotate(-10deg);
    max-width: 100%;            
    height: auto;
    display: block;
}


.b29{
  background:"";
  grid-area: b29;
 text-align: center;
   padding-top: 0px;
   padding: 0px;
border: 1px solid gray;
 border-radius: 0px;
           background-size: cover;
 background-position: center;

 overflow: hidden; 
 
 
}

.b29 img {
    transform: rotate(10deg);
    max-width: 100%;            
    height: auto;
    display: block;
}










.b30 {
	
	  grid-area: b30;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
           background-size: cover;
 background-position: center;

 overflow: hidden;   
}

.b30 img {
    transform: rotate(-10deg);
    max-width: 100%;            
    height: auto;
    display: block;
}


.b31 {
	
	  grid-area: b31;
  position: relative;
  text-align: center;
  color: white;
  border: 1px solid gray;
 border-radius: 0px;
  
             background-size: cover;
 background-position: center;

 overflow: hidden; 
}


.b31 img {
    transform: rotate(10deg);
    max-width: 100%;            
    height: auto;
    display: block;
}






.b32 {
	
	  grid-area: b32;
  position: relative;
  text-align: center;
  color: black;
   font-size: 19px;
  border: 1px solid gray;
 border-radius: 0px;
  
}













.b33 {
	
	  grid-area: b33;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}






.b34 {
	
	  grid-area: b34;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}






.b35 {
	
	  grid-area: b35;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
}






.b36 {
	
	  grid-area: b36;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}





.b37 {
	
	  grid-area: b37;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}








.b38 {
	
	  grid-area: b38;
  position: relative;
  text-align: center;
  color: white;
  border: 1px solid gray;
 border-radius: 0px;
  
  
}















.b39 {
	
	  grid-area: b39;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}







.b40 {
	
	  grid-area: b40;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}







.b41 {
	
	  grid-area: b41;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}



.b42 {
	
	  grid-area: b42;
  position: relative;
  text-align: center;
  color: white;
  
  
  border: 1px solid gray;
 border-radius: 0px;
}


.b43{
  background:"";
  grid-area: b43;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
}




.b44 {
	
	  grid-area: b44;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
}



.b45 {
	
	  grid-area: b40;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
  
}






.b46 {
	
	  grid-area: b46;
  position: relative;
  text-align: center;
  color: white;
  
  border: 1px solid gray;
 border-radius: 0px;
  
  
}




.b47{
  background:"";
  grid-area: b47;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
 
 
 
}






.b48{
  background:"";
  grid-area: b48;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
}




.b49{
  background:"";
  grid-area: b49;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
}



.b50{
  background:"";
  grid-area: b50;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
}



.b51{
  background:"";
  grid-area: b51;
 text-align: center;
   padding-top: 0px;
   padding: 1px;
border: 1px solid gray;
 border-radius: 0px;
}




.footer{

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




background-image: linear-gradient(-45deg, #FFFCF0 ,   #FFFCF0,      orange, #FFFCF0,#FFFCF0 ); 
}





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

   .image2{
     display: block;   }
}
/* Responsive layout des headers  ende */