/*--------------------------------------------------------------------*
|	Legacy
*--------------------------------------------------------------------*/

header, section, footer, aside, nav, main, article, figure {
	display: block;
}

/*--------------------------------------------------------------------*
|	Seitenaufbau inklusive Navigation
*--------------------------------------------------------------------*/

html {
	height: 100%;
}

body {
	position: relative;
	margin: 0 auto;
	padding: 50px;
	min-height: 50em;
	max-width: 70em;
	box-sizing: border-box;
}

main {
	padding: 0.5em;
}

#nav {
        position: absolute;
        right: 0.5em;
        top: 0;
}

#nav-switch {
	text-align: right;
	height: 74px;
}

#nav-switch button {
	font-size: 50px;
	display: none;
	vertical-align: middle;
}

#nav-content {
	margin-top: 0.5em;
	width: 9.8em;
}

#nav.selected #nav-content {
	display: block;
	width: auto;
}

/*--------------------------------------------------------------------*
|	Navigationselemente
*--------------------------------------------------------------------*/

#nav ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

#nav li {
	padding: 0.5em 0.2em;
	border: 1px solid gray;
	border-radius: 0.5ex;
	/*margin-bottom: 0.4ex;*/
	box-shadow: -5px 5px 5px gray;
}

#nav li a {
	display: block;
}

/*--------------------------------------------------------------------*
|	Seiten-Header und Seiten-Footer
*--------------------------------------------------------------------*/

header aside {
	margin-right: -10em;
	border-bottom: 2px solid gray;
}

footer {
	clear: both;
	border-top: 1px solid gray;
	text-align: center;
	font-size: smaller;
}

/*--------------------------------------------------------------------*
|	Quirks
*--------------------------------------------------------------------*/

/*
ul, ol, dl {
	overflow: auto;
}
*/

/*--------------------------------------------------------------------*
|	Farben und Fonts
*--------------------------------------------------------------------*/

html {
	background: url(streuobstwiese-sommer-no-600x450.jpg) #05142c;
	background: url(loewenburg-aussicht-nw-600x450.jpg) #05142c;
	background-attachment: fixed;
	background-size: 100% 100%;
	background-position: center center;
	background-size: cover;
}

body {
	background: white;
	color: black;
	border: 1px solid gray;
	font-family: Sans-Serif;
}

main a {
	color: blue;
}

main a:focus, main a:hover {
	background: blue;
	color: white;
}

/*--------------------------------------------------------------------*
|	Farben und Textdekoration für Navigation
*--------------------------------------------------------------------*/

#nav li a {
	color: black;
	text-decoration: none;
}

#nav ul.n1 li {
	background: #f5a539;
}

#nav ul.n2 li {
	background: #008848;
}

#nav ul.n3 li {
	background: #80c048;
}

#nav.canhover li:hover {
	background: yellow !important;
}

nav.shortcut {
	display: none;
}

nav.shortcut button {
	background: #f5a539;
	padding: 1ex;
	border-radius: 1em;
	color: black;
}

/*--------------------------------------------------------------------*
|	Seitenaufbau für schmale Displays
*--------------------------------------------------------------------*/

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

	html {
		background: none;
	}

	body {
		border: none;
		box-shadow: none;
	}

	main {
		margin: 0;
	}

	header aside {
		margin-right: 0 !important;
	}

	#nav {
        	position: fixed;
        	right: 0;
	}

	#nav-switch button {
		display: inline;
	}

	#nav-content {
		display: none;
	}

	#nav li {
		margin-bottom: 0;
		padding: 0.5em;
	}

	nav.shortcut {
		display: block;
	}
}

/*--------------------------------------------------------------------*
|	Navigation highlight
*--------------------------------------------------------------------*/

/*
body.thema-aktuell #nav li.navi-aktuell,
body.thema-anbieter #nav li.navi-anbieter,
body.thema-anfahrt #nav li.navi-anfahrt,
body.thema-fundus #nav li.navi-fundus,
body.thema-geschichte #nav li.navi-geschichte,
body.thema-impressionen #nav li.navi-impressionen,
body.thema-karte #nav li.navi-karte,
body.thema-loewenburg #nav li.navi-loewenburg,
body.thema-siebengebirge #nav li.navi-siebengebirge,
body.thema-speisekarte #nav li.navi-speisekarte,
body.thema-start #nav li.navi-start,
body.thema-veranstaltungen #nav li.navi-veranstaltungen,
body.thema-webcam #nav li.navi-webcam {

	margin-left: -0.5em;
	border-left: 0.5em solid black;
}
*/

/*--------------------------------------------------------------------*
|	Textgröße
*--------------------------------------------------------------------*/

body {
	font-size: max( 1em, 12pt );
}

main {
	line-height: 140%;
}

h1 {
	font-size: 180%;
	text-align: center;
	line-height: 120%;
}

h2 {
	font-size: 150%;
}

h3 {
	font-size: 120%;
}

/*--------------------------------------------------------------------*
|	Links
*--------------------------------------------------------------------*/

main a {
	font-weight: bold;
}

main a[rel~="external"]:before {
	content: "\2197";
}

/*--------------------------------------------------------------------*
|	Seitenelemente
*--------------------------------------------------------------------*/

main li {
	margin-bottom: 0.5ex;
}

main li ol {
	list-style-type: lower-alpha;
}

main dt {
	font-weight: bold;
	margin: 0.5em 0 0.5em;
}

/*--------------------------------------------------------------------*
|	Bilder
*--------------------------------------------------------------------*/

figure {
	position: relative;
	display: table;
	margin: 1em auto;
	max-width: 100%;
	text-align: center;
}

figure figcaption {
	font-size: smaller;
	display: table-caption;
	caption-side: bottom;
}

figure.box figcaption,
nav figure figcaption {
	display: block;
}

aside>img, figure>img, figure>a>img {
	max-width: 100%;
	height: auto;
	border: 2px gray ridge;
	border-radius: 0.5em;
	vertical-align: middle;
}

a img {
	vertical-align: middle;
}

figure.full-width {
	width: 100%;
	max-width: none;
}

figure.full-width img {
	width: 100%;
}

/* copyright message */

figure>aside {
	position: absolute;
	top: 2px;
	left: 0.5em;
	display: table-caption;
	font-size: small;
	line-height: 90%;
	background: white;
	opacity: 0.7;
}

figure>aside a {
	text-decoration: none;
}

.access {
	display: none;
}

.aushang {
	clear: both;
	display: table;
	border: 1px gray solid;
	background: #ffff99;
	padding: 0.5em;
	box-shadow: 0.5em -0.5em 0.5em grey;
	text-align: left;
	word-break: break-word;
}

/*--------------------------------------------------------------------*
|	Float-Elemente
*--------------------------------------------------------------------*/

aside.fr, figure.fl, figure.fr {
	max-width: 40%;
}

.fl {
	clear: left;
	float: left;
	margin: 0 1em 1em 0;
}

.fr {
	clear: right;
	float: right;
	margin: 0 0 1em 1em;
}

.cl {
	clear: left;
}

.cr {
	clear: right;
}

/* autoclear */

section:after {
	content: "";
	display: table;
	clear: both;
}

/*--------------------------------------------------------------------*
|	Float-Elemente für schmalen Bildschirm
*--------------------------------------------------------------------*/

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

	aside.fl, aside.fr {
		clear: both;
		float: none;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

/*--------------------------------------------------------------------*
|	Alignment
*--------------------------------------------------------------------*/

.box {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 0 1em 1em;
}

.l {
	text-align: left;
}

.c {
	text-align: center;
}

.r {
	text-align: right;
}

/*--------------------------------------------------------------------*
|	Drucklayout
*--------------------------------------------------------------------*/

@media print  {

	body {
		font-family: Serif;
	}

	main {
		margin: 0;
		padding: 0;
	}

	#nav, footer, mark, .no-print {
        	display: none !important;
	}

	a {
		color: black !important;
		font-weight: normal !important;
		text-decoration: none;
	}

	main .links a[rel~="external"]:after {
		content: "\a0[" attr(href) "]";
	}

	main a[rel~="external"]:before {
		content: none;
	}
}

/*--------------------------------------------------------------------*
|	end
*--------------------------------------------------------------------*/