* {margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
a {text-decoration: none}
h2 {margin-bottom: 0.6em; color: white;}
h3 {margin-bottom: 0.6em;}
body 	{margin: 0 auto;
		padding: 0.3em; 
		max-width: 50em;
		background-color: #ccc; 
		display: flex; flex-flow: column;
		font-family: 'Source Sans Pro', sans-serif;
		/*font-family:"source-sans-pro-light";*/
		color: black;
		}
.fett {font-weight: bold}
header img {width:100%; position: relative;}
#menu_icon {width: 10%;
			position: absolute; top: 15px; left: 15px;}

#main_nav  {margin: 0 1em; flex-flow: column;  white-space: nowrap; }

#main_nav ul li {display: block; border-bottom: 1px #ccc solid;
		padding: .1em; 
		font-size: 1.1em; font-variant: small-caps; font-weight: bold;
		list-style-type: none;}
#main_nav a:link {color: #026bbe}
#main_nav a:visited {color: #920088}

.view_sm {display: inline}
.view_br {display: none} 
.view_br:target {display: flex} 

.menu { position: absolute;
		top: 1em;
		left: 1em;
		margin-right: 0em ;
		padding: 0em;
		text-align:left;
		background-color: white; 
		list-style: none;
		z-index: 1000;
		}
main {	margin-top: 1em; 
		display: flex; flex-flow: row nowrap;
		justify-content: flex-start;}

#content {flex: 1 1 80%; margin-left: 1em ; padding: .2em; }
#content p {margin: 0 1em .5em 0;  color: #000; text-align: justify}
#content b {color: #ae468a}
article {max-width: 600px}


.bilderrahmen { width: 25%;
		margin-bottom: .5em;  }
.skaliert {width: 100%}
.skaliert30 {width: 30%; margin: 0 15px}
.links {float: left; margin-right: 2em; }
.rechts {float: right; margin-left: 0.5em }	

footer {margin: .5em 0; text-align: center; background-color: #888; color: white; display: flex; justify-content: center;}
#end_nav {margin-left: 2em; }
#end_nav ul {display: flex; }
#end_nav ul li {display: block; font-size: 1.2em; 
		margin: 0 2em .3em 0; font-variant: small-caps; }
#end_nav ul li a {color: white ;}

/* ***************  Aktuelles ********************* */
.nachricht {display: flex; flex-flow: row wrap; 
	justify-content: flex-start;padding: 0.4em 0; margin-bottom: .4em;  }
.nachricht-bildrahmen {flex: 1 1 30%; margin-right: 1em; 
		 max-width: 30%; /* max-height: 15em */}
.nachricht-textblock {flex: 1 1 50%;display: flex; flex-flow: column}	
.nachricht-bild { max-width: 100%; margin-right: 1.5em; max-height: 100%}
.nachricht-titel {font-size: 1.2em; font-weight: bold; }
.nachricht-text {margin-top: .3em}

/* *****************  Über mich     ***********************/
.netzwerk-logo {width: 50%}

/* *****************  Preise     ***********************/
table td {font-weight: bold; padding: .3em}

/* *************** Fotogalerie  ************************/
#fotobox {display: flex; flex-flow: row wrap; justify-content: flex-start;}
.thumb {height: 12em; margin:5px }
.fullsize {text-decoration: none}

/* ***************** Datenschutz ***********************/
#scroll_area {height: 20em; overflow: auto; text-align: left; margin: 1.5em}
#scroll_area li {font-variant: normal; font-size: 1em}
#scroll_area h2, #scroll_area h3, #scroll_area h4 {margin-top: .6em}

/* ***************** Kontakt ***********************/
.kontakt li {margin-left: 1em; }
.phone {height: 1.3em; vertical-align: bottom}
		
/******************************************************** 		
 --------- Einstellungen für große Viewports --------- 
 ************************************************************ */
@media (min-width: 32em){

#menu_icon  {display: none}
.menu {display: inline; background-color: inherit;
		position: relative; top: 0; left: 0px;}
#main_nav  {margin: 0 1em; flex: auto; 
			flex-flow: column;  white-space: nowrap;}

#main_nav ul li {display: block; border: none; 
		padding: .1em; 
		font-size: 1.2em; font-variant: small-caps; font-weight: bold;
		list-style-type: none;}
#main_nav a:link {color: #026bbe}
#main_nav a:visited {color: #920088}
#main_nav > ul > li:first-child {display: none; }
		
.view_sm {display: none;}	
.view_br {display: flex;}

}