/*Mobile first*/

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

img {  
	max-width: 100%;
	height: auto;
	border-radius: 2px;
	}
	
.frontbild { 		/*Korrektur mit Validator*/
	 height: auto;
	 width: 500px; 
	 margin: 0 auto;
	 display: block;
	}	

.hauptgruppe {
	color: #191970; /*midnightblue*/
	}

.balken {
	padding: 8px;
	border-left: 2px solid #f00;
	} 

.line {
	border-bottom: 2px solid lavender; 
	background-color: transparent;
	}

/* html {
margin-left: 7px; 
margin-right: 7px; 
	}*/
	
#container { 		/*Mobile*/
	margin-left: 12px; 			/*vorher 11px; Text-Ränder beim Handy*/
	margin-right: 12px; 
	font-size: 16px; 		/*TEST 17px ist das KLEINERE wie VORHER!!*/
	background-color: white;  /*ghostsnow SNOW*/
	}
	
figcaption {
	font-size: small;
	text-align: center;
	}
	
em {
	font-style: italic;
	}
	
strong {
	font-weight: bold;
	}
	
#motto {
	text-align: center;
	}

blockquote {
	color: navy; 			/* #483d8b ---------- navy*/
	padding-left: 30px;
	padding-right: 30px; 	
	padding-bottom: 7px;
	padding-top: 7px;
	font-style: italic;
	}

span {
	 background-color: lightblue; /* Lightblue*/
	}
	
p {
	padding-bottom: 9px;
	padding-top: 9px;
	}
	
a:link {
	color: darkred; /*navy #000080 ----darkred*/
	}

a:visited {				
	color: olive; /* midnightblue*/
	} 

h1 { 
	color: gray; 				/*grau   #808080*/
	font-family: calibri; 
	font-size: 27px; 				/* Samstag 18 */
	text-shadow: 1px 1px 1px yellow; 
	margin-top: 5px; 			/*ALT 10*/
	padding-bottom: 10px; 		/*10*/
	margin-bottom: 0px; 		/*ALT 7*/
	}

h2 { 
	color: gray; 				/*grau   #808080*/
	font-family: calibri; 
	font-size: 22px; 				
	text-shadow: 1px 1px 1px yellow; 
	margin-top: 5px; 			/*ALT 10*/
	padding-bottom: 9px; 		/*10*/
	margin-bottom: 0px; 		/*ALT 7*/
	}


h3 { 
	padding-bottom: 10px;
	padding-top: 10px;
	font-size: 18px;
	}
	
h4 { 
	padding-bottom: 7px;
	padding-top: 7px;
	font-size: 8px;
	}

#navigation li { 				/* MOBILE */
	display: inline-block;
    list-style: none; 		/* nebeneinander, nicht listen*/ 			
	margin-top: 10px; 		/* zum Bild nach oben */
	font-size: 17px; 	
	padding-left: 5px; 
	padding-right: 3px;
	border-radius: 3px;
	padding-bottom: 3px; 
	} 
	
#navigation a {
	color: black;                 
	text-decoration: none;         
	padding: 1px; 
	font-weight: bold;
	border: 1px solid #000;
	background-color: whitesmoke;
	border-radius: 3px;
	margin-left: 2px;
	}

header, navigation, article, body {
	width: 100%;
	font-family: calibri, arial;
	padding-bottom: 3px; 
	}
	
header {
	background-color: #f5f5dc; /* beige*/
	margin: 0 auto; /* NEU*/
	display: block; /* NEU*/
	}

.mitte {
	font-size: 7px;
	color: white;
	}
	
.datenschutz {
	font-size: 13px;
	background-color: whitesmoke;
	border: 1px solid #000;
	font-weight: bold;
	color: black;
	font-family: calibri, arial;
	margin-right: 7px;
	float: right;
	margin-left: 7px;
	margin-top: 4px;
	border-radius: 3px;
	}
	

.impressum {
	font-size: 13px;
	background-color: whitesmoke;
	border: 1px solid #000;
	font-weight: bold;
	color: black;
	font-family: calibri, arial;
	margin-right: 7px;
	float: right;
	margin-left: 7px;
	margin-top: 4px;
	border-radius: 3px;
	}
	
.impressum a {
	text-decoration: none;
	color: black;
	padding: 2px;
	}
	
.datenschutz a {
	text-decoration: none;
	color: black;
	padding: 2px;
	}
	

/*media queries für PC*/
	
@media only screen and (min-width: 768px) { 

         
#navigation {
	width: 100%; 			
	text-align: center;
	padding-top: 20px;
	}
	
#navigation a { 			
	font-size: 17px; 
	padding: 1px; 
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 5px;
	}
	
#navigation a:hover {
	color: white;
	background-color: indianred;
	}

html {
	background-color: gray;	/*crimson - gray - cadetblue*/
	}

#container {					/* PC*/
	width: 63%; 			
	margin: 0.3% auto;
	list-style-type: none;
	background-color: ghostwhite; /*#fffafa - GHOSTWhite- WHITESMOKE - lavenderblush*/
	font-family: calibri, arial;
	font-size: 17px; 	/* MEDIUM*/
	border: 1px solid black;
	padding-left: 1%; 
	padding-right: 1%;
	padding-bottom: 2%;
	}

header {
	text-align: center;
	}

.mitte {
	font-size: 6px; /*11*/
	color: ghostwhite;
	}

a:active {			
	background-color: silver;
	}	
	
a:link {
	color: darkred; /*NEU hinzugefügt 8. Mai*/
	}

a:visited {				
	color: olive; 
	} 

.datenschutz {
	font-size: 13px;
	background-color: whitesmoke;
	border: 1px solid #000;
	font-weight: bold;
	color: black;
	font-family: calibri, arial;
	margin-right: 7px;
	float: right;
	margin-left: 7px;
	margin-top: 4px;
	border-radius: 3px;
	}
	
a[href]:hover {						
	background-color: cornflowerblue;
	color: white;
	font-weight: ;
	}

.datenschutz a {
	text-decoration: none;
	color: black;
	padding: 2px;
	}
	
.datenschutz a:hover {
	color: white;
	background-color: indianred;
	}
	
.impressum {
	font-size: 13px;
	background-color: whitesmoke;
	border: 1px solid #000;
	font-weight: bold;
	color: black;
	font-family: calibri, arial;
	margin-right: 7px;
	float: right;
	margin-left: 7px;
	margin-top: 4px;
	border-radius: 3px;
	}
.impressum a {
	text-decoration: none;
	color: black;
	padding: 2px;
	}
	
.impressum a:hover {
	color: white;
	background-color: indianred;
	}

#navigation li { 	
	display: inline-block;
    list-style: none; 		 			
	margin-top: 7px; /* Abstand zum Bild nach oben angepasst*/
	font-size: 17px;
	padding-left: 0px; 
	padding-right: 0px; 
	} 
} 

@media (max-width: 768px) { /*Tablet*/   
	img {
   /* border: solid 1px white;*/
    width: 100%; 
	float: left;
    }
 
header {  
	max-width: 100%; 
	height: auto;
	margin: 0 auto;
	display: block;
	}

#navigation li {
	display: inline-block;
	font-size: 17px; /*17, 20 px;vorher 1.0em*/
	padding-bottom: 4px; 
	padding-top: 3px; /* Abstand nach oben zum Bild navigation!!!!!! */
	margin-top: 6px; /* neue*/
	margin-bottom: 3px;  /* 3 Neu DIENSTAG */
	padding-left: 3px; /* 3 DIENSTAG */ 
	padding-right: 3px; /* DIENSTAG */ 
	}
	
a:link {
	color: darkred; /*navy #000080*/
	}

a:visited {				
	color: olive; /* steelblue*/
	}
	
	
.datenschutz a {
	text-decoration: none;
	color: black;
	padding: 2px;
	}

.datenschutz {
	font-size: 13px;
	background-color: whitesmoke;
	border: 1px solid #000;
	font-weight: bold;
	color: black;
	font-family: calibri, arial;
	margin-right: 7px;
	float: right;
	margin-left: 7px;
	margin-top: 4px;
	border-radius: 3px;
	}
	
.impressum a {
	text-decoration: none;
	color: black;
	padding: 2px;
	}
	
.impressum {
	font-size: 13px;
	background-color: whitesmoke;
	border: 1px solid #000;
	font-weight: bold;
	color: black;
	font-family: calibri, arial;
	margin-right: 7px;
	float: right;
	margin-left: 7px;
	margin-top: 4px;
	border-radius: 3px; /* ?*/
	}

}