@charset "UTF-8";
/* CSS Document */
/* STYLE 3-TEILIGES LAYOUT */
/*	 
Teile der grid-template-areas: 
	header     
	navigation 
	foeteli 
	content_total 
	footer 

Die Klassen dazu sind:
	mainheader 
	navi   
	minis 
	content  
	mainfooter 
*/

/* SYNTAX  a:link, a:visited, a:focus, a:active // .links a:link  */

body {
	opacity: 1.0;
	background-color: #ccc;  : /* #F4C783; */
}


.navi {
	grid-area: navigation;
	background-color:  whitesmoke;  /* antiquewhite; #fff; */
	width: 100%; /* Wirkt anscheinend für max Weite der Navi-Spalte */
}
.minis {
	grid-area: foeteli;
	background-color: #fff;
}
.minis a {
	text-decoration: none;
}
.minis p, .minis h1, .minis h2, .minis h3 {
	padding-right: 3px;
	padding-left: 5px;
	}
.minis img { /* Zum Zentrieren von Fotos */
	/*display: block;*/
	margin-left: auto;
	margin-right: auto;
	margin: 2px;
	/*height: 50px;
	width: auto;*/
	/* max-width: 80%; Bei SCREENS anpassen XXX */
}

	
.content {
	grid-area: content_total;
	background-color: whitesmoke;  /* antiquewhite; #fff; */
}
.content p, .content h1, .content h2, .content h3 {
	padding-right: 3px;
	padding-left: 5px;
	}
	
.mainfooter {
	grid-area: footer;
	background-color: #036; /* 036 */
	font-family: kinesis-pro-3, Times, "Times New Roman", serif; 
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;  
	text-align: center;
	padding: 0px;
	margin: 0px;
}	
.mainfooter p {
	font-weight: 400; 
	font-family: fira-sans, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;  
}
.mainfooter a {
	font-weight: 400; 
	text-decoration: none;
	color: #036;
}
.mainfooter a:hover {
	text-decoration: none;
	font-weight: 600;
}

.wrapper {
    background-color: #fff; /* whitesmoke; */
    width: 100%;
    max-width: 960px;
    margin-top: 0;
	margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    display: grid;
    grid-gap: 20px;
    /*grid-template-columns: 40% 60%;*/ /* xxx weg am 2022_02_20 hinzugefügt 2022_01_02 brauchts das */
    grid-template-areas: 
		"header header"
		"navigation foeteli"
		"content_total content_total"
		"footer footer";
}

@media (min-width: 600px) {
 	.wrapper {
    	grid-template-columns: 20% 20% 55%; /* warum 55 statt 60% */
    	grid-template-areas:
      		"header header header"
      		"navigation foeteli content_total"
      		"footer footer footer";
  	}
}

@media (min-width: 1200px) {
body {
    background-image: url("../../img/global/background_grey.gif");
	background-repeat: repeat;
	background-blend-mode: soft-light;
}}



/* original */
@media (max-width: 600px) {
 	.wrapper {

   grid-gap: 6px;
		grid-template-columns: 100% 100% 100%; 
    	grid-template-areas:
      		"header"
      		"navigation" 
			"foeteli" 
			"content_total"
      		"footer";
  	}	

	
}	/* END DEFINITION MOBILE */

.foto {
	width: 100%;
	background-color: transparent; /*  #030 */
}
/* ----- Style textfeld */
.textfeld {
	width: 100%;
	padding: 10px;
}
.content img { /* Zum Zentrieren von Fotos */
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
	max-width: 520px; /* Bei SCREENS anpassen */
}
	
/* END STYLE 3-TEILIGES LAYOUT */