* {
    box-sizing: border-box;
}
html {
	color: #000;
	height: 100%;
	background-color: #fff;
}
body {
	color: #888;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	width: 100%;
	height: 100%;
}
a, a:visited {
	color: #888;
	text-decoration: none;
}
a img {
	border: 0;
	border: none;
}
header, section {
	margin: auto;
	ont-weight: 300;
	border: 1px solid #0f0;
}
#wrapper {
	border: 0px solid #f00;
	width: 100%;
	overflow: hidden;
}
.bar1, .bar2, .bar3 {
    width: 30px;
    height: 3px;
    background-color: #777;
    margin: 4px 0;
	transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(0px, 0px) ;
    transform: rotate(-45deg) translate(-4px, 5px) ;
}
/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(0px, 0px) ;
    transform: rotate(45deg) translate(-4px, -6px) ;
}

header {
	border: 0px solid #0ff;
	height: 4em;
	line-height: 4em;
}	

#logo {
	margin: 1em 0.3em;
	display: block;
	height: 2em;
	float: left;
}

#toggle-nav {
	background: rgba(0,0,0,0.2);
	display: block;
	position: absolute;
	right: 0;
	top: 2em;
	padding: 0.45em 0.2em;
	color: white;
	cursor: pointer;
}
#toggle-nav:hover {
	background: rgba(0,0,0,0.4);
}


#toggle-nav {
	display: none;	
}

#steuerung {
	font-size: 0.9em;
	ont-weight: 700;
	height: 1px;
	display: block;
	float: right;
	argin: auto;

}

#steuerung  li {
	float: left;
}

#steuerung li a {
	height: 100%;
	width: 100%;
	padding: 0em 0.5em;
	display: inline-block;
}

#steuerung  li a:hover {
color: #5c5;
}

#steuerung  li:hover {
	ackground-color: #b00;
}
/* Seitenaufbau  */
section {	/* mindest Content Höhe */
	min-height: 300px;
}
#main-cont {
	border: 0px solid #f0f;
	isplay: block;
}
h1 {	/* h1 Tag */
	color: #5c5;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2em;
	padding: 1em;
}
.fliesstext {  /* allgemeiner Text */
	line-height: 1.5em;
	display: inline;
}
/* ######## FOOTER ########## */
footer {
	height: 2em;
	background-color: #5c5;
	color: #fff;
}	
footer a,
footer a:visited {
	color: #fff;
}
footer a:hover {
	color: #999;
}
#footerline {
	border: 0px solid #f0f;
	margin: auto;
	font-size: 0.9em;
	line-height: 2em;
}
#impr {
	border: 0px solid #f0f;
	float: left;
	width: 18.5em;
	padding-left: 1em;
}
#contactinfo {
	border: 0px solid #f00;
	display: inline-block;
	margin: 0 1em;
}

.mail {
	float: right;
}

@media only screen and ( min-width: 1250px ) {
    /* breites Browserfenster 
    body { ackground-color: yellow;}
*/
	header, section, #footerline {
		width: 1200px;
	}
	header {
		height: 4em;
	}
	#toggle-nav {
		display: none;	
	}
	#logo {
		top: 1em;
		height: 2em;
	}
}

@media only screen and ( max-width: 1250px ) {
    /* breites Browserfenster 
    body { ackground-color: #fbf;}
*/
	header, section, #footerline {
		width: 1000px;
	}
	header {
		height: 4em;
	}
	#toggle-nav {
		display: none;	
	}
	#logo {
		top: 1em;
		height: 2em;
	}
}
@media only screen and ( max-width: 1050px ) { 
    /* breites Browserfenster 
    body { ackground-color: #aa0;}
*/
	header, section, 	#footerline {
		width: 700px;
	}
	header {
		height: 2.5em;
		line-height: 2.4em;
	}
	#logo {
		margin: 0.45em 0 0 0.5em;
		height: 1.6em;
	}
	#ffg {
		margin: 0 0.4em;
		font-size: 1.5em;
	}
	#toggle-nav {
		display: none;	
	}
	#steuerung {
	 font-size: 0.8em;	
	width: 310px;
	}
}
@media only screen and ( max-width: 750px ) {
    /* Tablets und mittlere Bildschirme 
    body { ackground-color: red;}
*/
	header, section, #footerline {
		width: 100%;
	}
	header {
		height: 2.5em;
		display: inline-block;
	}
	#header-line {
		height: 2em;
		line-height: 2em;
	}
	#toggle-nav {
		display: block;
	}
   #steuerung {
        height:0px;
       -webkit-transition: height 500ms ease-out;
        -moz-transition: height 500ms ease-out;
        -ms-transition: height 500ms ease-out;
         -o-transition: height 500ms ease-out;
          transition: height 500ms ease-out;

		display: inline-block;
		margin-top: -10px;
		float: none;
		overflow: hidden;
		width: 100%;
		font-size: 1em;
	}
	#steuerung  ul {
		width: 100%;
		margin-top: 0.3em;
	}
	#steuerung  li {
		width: 100%;
		border-bottom: 1px solid silver;
		margin: 0em;
		color: #000;
		text-align: center;
	}
	#steuerung li a {
		padding: 0.5em 0.5em;
	}
    #steuerung.showing {
		height: 228px;
		-webkit-transition: height 500ms ease-out;
		-moz-transition: height 500ms ease-out;
		-ms-transition: height 500ms ease-out; 
		-o-transition: height 500ms ease-out;
		transition: height 500ms ease-out;
	}
 	#mail a, #impr a {
		padding: 0.4em;
		margin: auto;
	}
	.adresszeile {
		font-size: 0.85em;
	}
	#logo {
		top: 0.4em;
		height: 1.4em;
		float: left;
	}
	#contactinfo {
		display: none;
	}
	#impr {
		float: none;
		margin: auto;
	}
}
@media only screen and ( max-width: 440px ) {
    /* mobile Geräte 
    body { ackground-color: green;}
*/
	#header-line {
		height: 2em;
		line-height: 2em;
	}
	#contactinfo {
		display: none;
	}
	#impr {
		float: none;
		margin: auto;
	}
}
.break {
	float: left;
}