:root {
	--regular_color: #535353;
	--regular_background: #fff;
	--higlight_color: #fff;
	--highlight_background: #643772;
}
html {
	margin:0;
	padding:0;
	height:100%;
	font-family: 'aleo';
	font-size:14px;
	line-height: 1.2em;
	color: var(--regular_color);
	background-color: var(--regular_background);
}
		*, *::before, *::after {
			position:relative;
			box-sizing:border-box;
			vertical-align:top;
			cursor:inherit;
		}

body {
	padding:0; margin:0; min-height:100%; 
	display:flex; flex-direction:column;
}

body > header { flex:0 0 auto;
	display:block; padding:1rem 0.5rem;
	background: #de2309; /* fallback */
	background: linear-gradient(to right, #f15a25 0%, #fb9332 100%);
}
	
	body > header a, 
	body > header a:visited, 
	body > header a:link, 
	body > header a:active, 
	body > header a:hover { color:#fff; text-decoration:none; }
	
	body > header h1 { width:940px; max-width:100%; margin:0 auto; line-height:1.2em; font-size:3rem; font-weight:400; letter-spacing:0.05em; }
	body > header h3 { width:940px; max-width:100%; margin:0 auto; line-height:1.2em; font-size:1.7rem; font-weight:400; }
		body > header h3 span { font-size:0.66em; font-style:italic; }

body > menu { flex:0 0 auto;
	background: #e6e6e6; /* fallback */
	background: linear-gradient(to bottom, #aaa 0%, #e6e6e6 20%, #e6e6e6 90%, #ddd 100%);
	margin:0; padding:0.75rem 0; list-style-type:none; overflow:visible;
	display:flex; flex-direction:row; justify-content:flex-end;
}	
	body > menu ul#menunav { display:flex; flex-direction:row; justify-content:flex-end; flex:0 0 auto;
		width:940px; max-width:100%; height:1.5em; padding:0; margin:0 auto; 
		line-height:1.5em; list-style-type:none; text-transform:uppercase;
	}	
		
		body > menu ul#menunav li { display:inline-block; padding:0; margin:0 0.5em; flex:0 0 auto; 
			height:1.5em; line-height:1.5em; overflow:hidden;
			text-shadow:0 1px #fffc;
		}	
			body > menu ul#menunav li a { padding:0 0.5em; }
			body > menu ul#menunav li.sub { }
				body > menu ul#menunav li.sub > a:after { content:url('./imgs/arrow.png'); margin:0 0 0 0.25em; vertical-align:top; }
				
				body > menu ul#menunav li.sub ul { padding:0.25em; margin:0; 
					border-top:1px solid #fff; border-radius:0.25rem;
					background:#eee; box-shadow:0 2px 3px #888; 
					text-transform:none; 
					position:absolute; top:1.5em; left:0;
					z-index:10;
				}
					
					body > menu ul#menunav li.sub ul li { display:block; margin:0.25em 0.5em; }
				
				body > menu ul#menunav li.sub:hover { overflow:visible; }
				
			body > menu ul#menunav li.last { margin: 0 0 0 0.5em; }
			
	
	body > menu select#selectnav { flex: 0 0 auto; display:none; font-size:1.2em; margin:0 0.25rem; }


html.narrow ul#menunav { display:none; }
html.narrow select#selectnav { display:block; }

body > .content { flex:0 0 auto;
	width:952px; max-width:100%; padding:1rem 0.25rem; margin:3rem auto;
}

body > footer { flex:0 0 auto;
	padding:0.25em;
	background: #e6e6e6; /* fallback */
	background: linear-gradient(to bottom, #ddd 0%, #e6e6e6 10%, #e0e0e0 50%, #bbb 85%, #888 100%);
	text-shadow:0 1px #fffc;
}
	body > footer a { display:block; margin:1rem auto 3rem auto; text-align:center; font-size:1.2rem; } 
		body > footer a img { height:1.5em; vertical-align:text-bottom; opacity:0.85; }


a, a:visited, a:link { color:#000; text-decoration:none; cursor:pointer; }
a:active, a:hover { color: #e53607; }
a.current { text-decoration:underline; }
a:hover.current { color:#000; }

*.spacer { flex:1 1 auto; }

html div.content { display:flex; flex-direction:column; flex-wrap:wrap; padding:2rem 0.25rem; }
	html div.content h1 { width:100%; border-bottom: 1px solid #ddd; margin:0 0 2rem 0; padding:0.5rem 0.25rem 1rem 0.25rem; color: #e53607; font-style:italic; font-weight:400; }
	
	html div.content a { padding:0.25em 0.5em; border-radius:0.1em; background:#d4d6da; }
		html div.content a img { height:1em; display:inline; }
	html div.content a.download { padding:0; background:transparent; }
		html div.content a img { height:auto; }
	html div.content a.external:before { content:url('./imgs/link_external.png'); }
	
	html div.content div.quote { flex:0 0 auto; }
	html div.content div.flex_switch { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; margin-top:2rem; }
		html div.content div.flex_switch div.cite { width:50%; }


div.quote { display:flex; flex-direction:row; font-size:1.8rem; 
	background:#9d867c; color:#fff; font-style:italic; border-radius:0.5rem; }
	
	div.quote div.quote_start { width:23px; height:20px; flex:0 0 23px; background:url("./imgs/quote_start.png") no-repeat; margin-top:0.75em; margin-left:1em; align-self:flex-start; }
	div.quote div.quote_content { flex:1 1 auto; padding:1rem; line-height:1.2em; align-self:center; }
		div.quote div.quote_content div.quote_from { font-size:1rem; line-height:1.2rem; text-align:right; padding-left:25%; padding-top:0.5rem; }
	div.quote div.quote_end { width:23px; height:20px; flex:0 0 23px; background:url("./imgs/quote_end.png") no-repeat; margin-bottom:0.75em; margin-right:1em; align-self:flex-end; }
	div.quote div.quote_img { flex:0 0 25%; margin:0.25rem; overflow:hidden; align-content:center; overflow:hidden; }
		div.quote div.quote_img img { width:100%; border:1px solid #eee; border-radius:0.25rem; overflow:hidden; }
html.wide div.quote { font-size:2.0rem;  }
html.narrow div.quote { font-size:1.6rem; }
	html.narrow div.quote div.quote_img {flex:0 0 33%; }


div.cite { 
	padding:0.5em;
	border-top:1px solid #ddd;
}
	div.cite p { margin:0 0 1em 0; width:100%; }
	div.cite p.from { font-weight:bold; }
	div.cite a { padding:0.25em 0.5em; border-radius:0.1em; background:#d4d6da; }

div.flex_column { display:flex; flex-direction:column; }
div.flex_column.impressum { max-width:42em; margin:0 auto; }

div.flex_row { display:flex; flex-direction:row; flex-wrap:wrap; }
div.flex_row.kontakt { align-items:center; }
	div.flex_row.kontakt img { display:block; border:1px solid #eee; border-radius:0.25rem; margin-right:0.5rem; } 
	div.flex_row.kontakt p { margin:0 0.5rem; font-size:1.25rem; line-height:1.66em; }

div.topic { padding:1rem 0.25rem; border-top:1px solid #ddd; }
	div.topic h5 { margin:1em 0 0.5em 0; font-size:1em; }
	div.topic p { margin:0.5em 0; }
	div.topic a { padding:0 0.25em; border-radius:0.2em; background:#d4d6da; }

div.flex_2 { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
	margin:2rem 0;
}
	
	div.flex_2 div.flex_column.topics { flex:1 0 48%; margin-right:0.5rem; }
	div.flex_2 div.flex_column.imgs { flex:0 1 auto; }
		div.flex_2 img { width:100%; border:1px solid #eee; border-radius:0.25rem;}
	
html.narrow div.flex_2 { }
	html.narrow div.flex_2 div.flex_column.topics { flex:1 0 48%; }

div.flex_3 { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
	margin:2rem 0;
}
	div.flex_3 div.topic { flex:0 0 30%; }
	
html.narrow div.flex_3 { }
	html.narrow div.flex_3 div.topic { flex:0 0 48%; }

div.flex_4 { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;
	margin:2rem 0;
}
	div.flex_4 div.topic { flex:0 0 23%; }
html.narrow div.flex_4 { }
	html.narrow div.flex_4 div.topic { flex:0 0 48%; }

