body{background-color: #ede2cf;margin:0;padding:0;}
body,html{height:100%;}

/* reset */
a:focus{outline: none;} 
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
img{border:none;}

/* Bl�cke */
.wrapper{position:relative;width:100%;min-height:100%;max-width:600px;margin:0 auto;border-top:1px solid #ece7e2}
.container{position:relative;padding: 0px 10px;width: 100%;}
.kleinkunstpreis{margin:1em 0 2em 0;}
.kleinkunstpreis img{width:120px;height:120px;}

/* Buchhinweis */
div#overlay{min-height:100%;width:100%;background-color:#fff;position:absolute;top:0;left:0;text-align:center;display:none;}
.jquery div#overlay{display:block;}

div.overlayContent{clear:left;width:100%;max-width:1000px;margin:auto;padding:1em;}
#overlay h2{margin:0;font-size:170%;}
#overlay h1{margin: .1em 0 .1em 0;font-size:250%;line-height:1.2;}
#overlay .subtitle{margin-top:0}
#overlay .subtitle strong{color: #375364;}
#overlay img{max-width:80%;}
.row2{padding-left:1em;}
.buttons{padding-right:1em;margin-top:2em;}
.buttons a {display:inline-block;background-color:#375364;padding:.2em 1em;text-decoration:none;border-radius: .5em;color:#fff;font-weight:bold;margin:.5em;}

/* Zitate */
blockquote{padding:0 0 1em 0; margin:1em 0;font-style:italic;background: url(../grafik/zitat.png) no-repeat top left;text-indent:2em;}
.autor{font-style:normal;text-align:right;}
footer {display:none;}

/* onlineshow */
.online_show{margin: 2em 0;color:#fff;}
.online_show p{padding:.8em 1.2em;background-color:#496da8;color:#fff;display:inline-block;text-align:center;border-radius:.5em;}
.online_show *{color:inherit;}
.online_show strong{font-size:1.2em;}
.online_show a{text-decoration:none;display:inline-block;}
.online_show a u{text-decoration:underline;}

/* Navi oben*/
nav{position:relative;z-index:10;}
nav a{text-decoration:none;text-transform:uppercase;display: block;white-space:nowrap;}
nav a:hover,nav ul li.current ul a:hover,nav ul li.curr_parent ul a:hover{color: #ac0036;}
nav ul{margin:0;padding:10px 10px;list-style-type:none;background-color: #fff;}
nav ul li{padding:2px 0px;display:block;line-height: 20px;}
nav ul li a{padding:10px 0;border-bottom: 2px solid #ece7e2;}
nav ul ul li a{padding-left:0;border:none;}
nav ul ul{position:relative;padding: 4px 0 4px 20px;background-color: #fff;border-bottom: 2px solid #ece7e2;min-width:0;display:none;}
nav ul ul li{display:block;line-height: normal;padding:0;border-bottom: 2px solid #ece7e2;min-width: 70px;}
nav ul ul li:last-child{border-bottom: none}
nav ul ul li a{text-transform:none;padding:4px 0;}
nav ul li.current a,nav ul li.curr_parent a{color:#999;}
nav ul li.current ul a,nav ul li.curr_parent ul a{color: #333;}
nav ul ul li.current a{color:#999;}

/* typo */
*{color: #333;font-size: 13px;font-family:Arial, Helvetica, sans-serif;border:0px solid #fff;line-height: 1.42857;}
h1,h2{font-weight: 400;font-family: 'PT Sans Narrow', sans-serif;text-transform:uppercase;}
h1{text-transform:uppercase;font-size: 200%;color:#ac0036;margin:0;}
h2{font-size: 150%;color: #375364;margin:0 0 1em 0;}
h2>small {display: block}

.grid-container {
	display: none;
}
.grid-container img {
	width: 100%;
}
.grid-main { grid-area: main;}
.grid-left { grid-area: left; }
.grid-right { grid-area: right; }

/*Facebook*/
p.social{margin-top:5em;}
p.social a{display:inline-block;margin-right:1em;}

@media (min-width: 380px){
	nav{width:250px;}
	.bg_wrapper{
		z-index:1;
		height: auto;
		min-height: 280px;
		width:40%;
		position:fixed;
		right:0;
		top:20%;
		text-decoration: none;
		padding-left: 10px;
	}
	.grid-container {
		display: grid;
		gap: 10px 10px;
		grid-auto-flow: row;
		grid-template-areas:
			"main main"
			"left left"
			"right right";
		max-width: 600px;
		margin-right: 15px;
	}
}
@media (min-width: 700px) {
	.bg_wrapper{
		width: 50%;
	}
}
@media (min-width: 850px) {
	.grid-container {
		grid-template-areas:
			"main main"
			"left right";
	}
}
@media (min-width: 380px) AND (max-width: 519px){
	blockquote{padding-bottom:3em;width:60%;}
	nav, .online_show{width:60%;}
}
@media (min-width: 520px) {
	blockquote{padding-bottom:4em;width:50%;}
	nav, .online_show{width:50%;}
}

@media (min-width: 700px) {
	.row1,.row2{width:48%;display:inline-block;vertical-align:middle;}
	.row2{height:100%;}
	div.center{height:50%;width:1px;float:left;margin-bottom:-300px;}
	div.overlayContent{height:600px;}
	#overlay img{max-width:100%;max-height:100%;}
	div#overlay{min-height:600px;height:100%;}
	
	.kleinkunstpreis img{width:140px;height:140px;}
}
@media (min-width: 970px) {
	blockquote{padding-left:2em;text-indent:0;}
	p.social{position:absolute;bottom:0;}
	.wrapper{max-width:950px;margin:0 auto;height: 100%;min-height:750px;}
	nav{min-width:50%;border-bottom: 1px solid #000;width:auto;display:inline-block;}

	nav ul.navi{display:block;margin:0;padding:0;background-color: transparent;}
	nav ul li{padding:0 10px;display:inline-block;position:relative;line-height: 20px;}
	nav ul li a{padding:0;border:none;}
	nav ul ul{position:absolute; top:20px;left:0;border-radius: 0 0 5px 5px;border: 0px solid #000;width:auto;padding: 4px 10px;}
	.container{display:inline-block;position:absolute;top:5%;width:auto;height:90%;min-height:600px;}	
	.kleinkunstpreis{margin:1em 0 3em 0;min-height:20%;}
	h1{font-size: 300%;}
	h2{font-size: 220%;color: #375364;margin:0 0 1em 0;}
}
@media (min-height:820px) AND (min-width: 970px){
	.online_show{margin-top:4em;}
}