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

a {
color: #000;
}

h1 {
padding: 0;
font-size: 3em;
}

h2 {
padding: 1.5em 0 0.5em 0;
font-size: 1.5em;
}

h3 {
padding: 1.5em 0 0.2em 0;
font-size: 1.2em;
}

p {
padding: 0 0 1em 0;
}

#container {
margin: 0 auto;
background-color: #eee;
}

#kopf {
margin: 0;
padding: 2em 2em 2em 3em;
background-color: #ccf;
color: #000;
}

#kopf .bildHead {
float: right; 
width: 300px;
padding: 0 0 1em 1em;
}

#kopf .bildHead img {
display: block; 
width: 100%;	
}

#kopf .slogan p {
margin-top: 1em;
font-size: 1.2em;
}

#kopf #toggle {
display: none;
}

/*----------navigation------------*/
#nav {
width: 15%;
float: left;
position: fixed;
padding-top: 2em;
padding-left: 5%;
}

#nav ul {
list-style-type: none;
padding-bottom: 0.5em;
}
        
#nav li {
font-size: 1.3em;
}

#nav a {
text-decoration: none;
}

	#nav.home .menu li a.home,
	#nav.angebot .menu li a.angebot,
	#nav.tipps .menu li a.tipps,
	#nav.lesben .menu li a.lesben,
	#nav.krimis .menu li a.krimis,
	#nav.geschichte .menu li a.geschichte,
	#nav.links .menu li a.links,
	#nav.kontakt .menu li a.kontakt {		
		border-left: 10px solid #60c;
	}

/*----------inhalt------------*/

#inhalt {
height: 100%;
margin: 0 0 0 20%;
background-color: #fff;
padding: 0 1em;
}

#inhalt a:hover {
font-weight: bold;
}

.liste {
list-style-type: none;
}

.bildlinks {
float: left;
margin: 0.2em 1em 0.5em 0;
}

#fusszeile {
font-size: 0.8em;
padding: 0 0 1em 0;
}

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

@media only screen and (max-width:2560px) {
	#container {
		max-width:1280px;
		border:2px solid pink;
	}
}

@media only screen and (max-width:1600px) {
	#container {
		max-width:1280px;
		border:2px solid red;
	}
}

@media only screen and (max-width:1280px) {
	#container {
		max-width:1280px;
		border:2px solid orange;
	}
}

@media only screen and (max-width:1024px) {
	#container {
		max-width:1024px;
		border:2px solid yellow;
	}
}
*/

@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: #ccf;
	}

	#kopf .bildHead {
		float: left; 
		display: block;	
		width: 41vw;		
		margin: 0;
		padding: 0;
	}

	#kopf .bildHead img {
		display: block; 
		width: 100%;
		/*display:none;*/		
	}
	
	#kopf .slogan {
		margin-left: 44vw;		
	}
	
	#kopf .slogan h1 {
		font-size: 5vw;
		padding-top: .5em;
	}

	#kopf .slogan p {
		margin-top: 1vw;
		font-size: 2.5vw;		
	}

	#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%;
		position: static;
		margin: 0;
		padding: 0;
	}
	
	#nav .ohnenachoben {
		display: none;
	}
	
	.menu {
		min-width: inherit;
		margin: 0;
		padding: 0;		
		/*zugeklappt*/
		overflow: hidden;
		/*wichtig!*/
		line-height: 0;		
		max-height: 0;
		width: 100% !important;	
		background-color: #ccf; /*lila*/
	}		

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

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

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

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

/*@media screen and (max-width:812px)*/
/*
@media only screen and (max-width:1242px) and (min-width:828px) and (orientation:portrait) and (device-aspect-ratio:3/4) {
	#container {
		max-width:1242px;
		border:2px dotted green;
	}	
	
	#kopf .bildHead {
		float:none;	
		width:100%;	
		border:3px solid red;				
	}	
	
	#kopf .slogan {
		margin-left: 1em;
	}	

	#kopf .slogan h1 {
		font-size:2em;
		color:red;
	}
	
	#kopf .slogan p {	
		display:none !important;
	}
	
	#kopf #toggle {		
	}		
}
*/

/*iphone X*/
/*@media screen and (max-width:568px)*/
/*2436 x 1125 = 812 x 375*/

/*
@media screen and (max-width:812px) and (orientation:landscape) {
	#container {
		max-width:812px;
		border:2px dotted red;
	}	
	
	#kopf .slogan h1 {
		font-size:5vw;
	}		
}
*/

/*iphone 6, 6S, 7, 8*/
/*@media screen and (max-width:667px)*/
/*1334 x 750 = 667 x 375*/

@media screen and (max-width:667px) {
	#container {
		max-width: 667px;
		/*border:2px solid lime;*/
	}
	
	#kopf .slogan h1 {
		font-size: 5.5vw;
	}

	#kopf .slogan p {
		font-size: 2.75vw;		
	}

	#kopf #toggle {
		width: 6vw;	
		margin-top: 1vw;
	}
	
	#kopf #toggle img {
		width: 100%;	
	}		
}

/*iphone 5S, 5S, SE*/
/*@media screen and (max-width:568px)*/
/*1136 x 640 = 586 x 320*/

@media screen and (max-width:568px) {
	#container {
		max-width: 568px;
		/*border:2px solid red;*/
	}
	
	#kopf .slogan h1 {
		font-size: 5vw;
	}

	#kopf .slogan p {
		font-size: 3vw;		
	}

	#kopf #toggle {
		width: 6vw;	
	}
	
	#kopf #toggle img {
		width: 100%;	
	}	
}

/*iphone 4S*/
/*@media screen and (max-width:480px)*/
/*960 x 640 = 480 x 320*/

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

	#kopf .slogan h1 {
		font-size: 5.5vw;
	}

	#kopf .slogan p {
		font-size: 3.25vw;		
	}

	#kopf #toggle {
		width: 5vw;
		margin-top: 0;	
	}
	
	#kopf #toggle img {
		width: 100%;	
	}		
}

/*iphone X*/
/*@media screen and (max-width:375px)*/
/*
@media screen and (max-width:375px) and (orientation:portrait){
	#container {
		max-width:375px;
		border:2px dotted red;
	}			
}
*/

@media screen and (max-width:380px) {	

	#container {
		max-width: 100%;	
		/*border:2px dotted orange;*/		
	}

	#kopf {
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #ccf;
	border: none;
	}
	
	#kopf .bildHead {
		float: none;	
		width: 100%;			
		display: block;		
	}
	
	#kopf .bildHead img {
		width: 100%;
		display: block;
	}
	
	#kopf .slogan {
		float: left;	
		margin: 0;
		width: 70%;
	}

	#kopf .slogan h1 {
		text-align: right;
		font-size: 8.5vw;
		margin: 0;
		padding: 10px 0;
	}
	
	#kopf .slogan p {
		display: 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;*/	
	}
}

/*ipad 768*/
/*ipad portrait > device-aspect-ratio: 3/4*/
/*ipad landscape > device-aspect-ratio: 4/3*/

/*iphone XS Max*/
/*2688 x 1242 = 896 x 414*/
/*
@media only screen and (max-width:1242px) and (orientation:portrait)
*/

/*iphone XS*/
/*2436 x 1125 = 812 x 375*/
/*
@media only screen and (max-width:1125px) and (orientation:portrait)
*/

/*iphone X*/
/*2436 x 812 = 812 x 375*/
/*
@media only screen and (max-width:812px) and (orientation:portrait)
*/

/*iphone 8 Plus*/
/*1920 x 1080 = 736 x 414*/
/*
@media only screen and (max-width:1080px) and (orientation:portrait)
*/

/*iphone XR*/
/*1792 x 828 = 896 x 414*/
/*
@media only screen and (max-width:828px) and (orientation:portrait)
*/

/*iphone 5S, 5S, SE*/
/*@media screen and (max-width:568px)*/
/*1136 x 640 = 586 x 320*/

/*iphone 4S*/
/*960 x 640 = 480 x 320*/
/*
@media only screen and (max-width:320px)
*/