* {
margin: 0;
padding: 0;
}
		
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
background-color: #ddd;
color: #f06;
}

a {
color: #f06;
}

h1 {
font-size: 2.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 20%;
}
		
h2 {
font-size: 1.5em;
margin-left: 20%;
}

h3 {
font-size: 1.5em;
margin: 1em 0 0.3em 0;
padding: 0;
}

h4 {
font-size: 1.2em;
margin: 1em 0 0 0;
}

p {
padding-bottom: 0.5em;
}

#container {
margin-bottom: 1em;
margin: auto;
background-color: #fff;
}

/*----------kopf------------*/

#kopf {
margin-bottom: 3em;
padding: 0.5em 0 1.5em 0;
background-color: #fc0;
border-bottom: dashed 3px #fff;
}

#kopf #toggle {
display: none;
}

/*----------navigation------------*/

#nav {
width: 16%;
float: left;
}

#nav ul {
list-style-type: none;
}

#nav li {
margin: 0 0 1.5em 2em;
font-weight: bold;
}

#nav a {
text-decoration: none;
}

/*----------inhalt------------*/
     
#inhalt {
margin-left: 20%;
margin-right: 1em;
height: 100%;
}

/*---------formular-------------*/

form {
margin: 1em 0 1em 0;
}

fieldset {
width: 95%; 
border-left: solid 1px #fc0;
border-top: solid 2px #fc0;
border-right: solid 2px #fc0;
border-bottom: solid 1px #fc0;
}

label  { 
width: 20%; 
float: left;
padding: 1em 0 0 1em;
}

input, textarea { 
width: 90%;
font-size: 1em;
margin: 10px;
border-left: solid 1px #fc0;
border-top: solid 2px #fc0;
border-right: solid 2px #fc0;
border-bottom: solid 1px #fc0;
}

.auswahl {
float: left;
margin: 0 0 0 1em;
}

.email_zusatz {
display: none;
}

.abschicken { 
background-color: #ffc;
color: #f06;
border: solid 2px #fc0;
width: 50%;
margin-left: 30%;
}

input:focus, input:hover, textarea:focus, textarea:hover {
background-color: #ffc;
color: #f06;
}

.geschenkabo {
padding: 2em 0 0 1em;
}

/*----------fusszeile-----------*/

#fusszeile {
font-size: 0.8em;
padding-top: 1em;
padding-bottom: 0.5em;
}

/*----------responsiv-----------*/

@media only screen and (min-width:769px) {
	#container {
		max-width: 1280px;
		/*border: 2px solid black;*/
	}
}

@media screen and (max-width:768px) {
	#container {
		max-width: 768px;
		/*border: 3px solid aqua;*/
	}	
		
	#kopf {
		margin: 0;
		padding: 0;
		background-color: #fc0;
	}
	
	#kopf #toggle {
		display: block;
		float: right;
		margin: 2vw 2vw 0 0;
		width: 6vw;	
	}
	
	#kopf #toggle img {
		width: 100%;	
	}

	#kopf .clear {
		clear: both;
	}

	#nav {
		float: none;
		display: block;		
		width: 100%;		
		margin: 0;
		padding: 0;
	}	

	#nav.home .menu li a.home,
	#nav.abo .menu li a.abo,
	#nav.inserate .menu li a.inserate,
	#nav.kontakt .menu li a.kontakt {		
		color: #f06;
	}
		
	.menu {
		min-width: inherit;
		margin: 0;
		padding: 0;		
		/*zugeklappt*/
		overflow: hidden;
		/*wichtig!*/
		line-height: 0;		
		max-height: 0;
		width: 100% !important;	
		background-color: #fff;
	}		

		/*Menusymbol*/
	.menu.active, 
		/*Navigation*/
	.menu > ul.active {			
		max-height: 150em;				
	}

	.menu ul {
		display: block;
		padding: 1.5em 1.5em 0 0;
		margin: 0;
		background-color: transparent !important;
	}

	.menu ul li {
		margin: 0;
		display: block;
		border-bottom: 1px solid #fc0;
		padding: 0 0 1em 0;			
	}

	.menu ul li a {		
		margin: 0;
		padding: 0;
		font-weight: normal;
		text-decoration: none;
		color: #60c;			
	}
	
	#inhalt {
		margin: 0 0 0 0.5em;
	}		
}

@media screen and (max-width:667px) {
	#container {
		max-width: 667px;
		/*border:2px solid lime;*/
	}
	
	#kopf #toggle {
		width: 6vw;	
		margin-top: 1vw;
	}
	
	#kopf #toggle img {
		width: 100%;	
	}		
}

@media screen and (max-width:568px) {
	#container {
		max-width: 568px;
		/*border: 2px solid red;*/
	}
		
	#kopf #toggle {
		width: 6vw;	
	}
	
	#kopf #toggle img{
		width: 100%;	
	}	
}

@media screen and (max-width:480px) {
	#container {
		max-width: 480px;
		/*border: 2px dotted blue;*/
	}
	
	#kopf #toggle {
		width: 5vw;
		margin-top: 0;	
	}
	
	#kopf #toggle img {
		width: 100%;	
	}		
}

@media screen and (max-width:380px) {	
	#container {
		max-width: 100%;	
		/*border: 2px dotted orange;*/		
	}

	#kopf {
		margin: 0;
		padding: 0;
		width: 100%;
		background-color: #fc0;
		border: none;
	}
	
	#kopf #toggle {
		display: block;
		float: right;
		width: 12vw;
		margin: 6vw 5vw 0 0;			
	}
}

@media screen and (max-width:320px) {
	#container {
		max-width: 100%;	
		/*border:2px dotted blue;*/		
	}
}