/*CSS edited by Klaus Rütterswörden (2019)*/

body {
		font-family: 'MedievalSharp', cursive;
		display: flex;
		flex-flow: row wrap;
		margin: 0 auto;
		max-width: 70em;		
}

body {
		background: url('../bg_images/holz.jpg');
		background-repeat: no-repeat;
		background-attachment: fixed;
		}
		
html	::-webkit-scrollbar {
		display: none;	/* Hide scrollbar for Chrome, Safari and Opera */
		}
		
html {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
}	
		
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header,
nav,
nav a,
article,
section,
aside,
footer,
impressum {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
	flex: 1 100%;
}

header {
	background: url(../bg_images/pergament_02.jpg);
	border-color: #d5d5d5;
	display: flex;
	flex-flow: row wrap;
}

header img.right {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

header * {
	flex: 1 1 0%;
}

header img {
	flex: 0 0 150px;
	margin-right: 20px;
}

header nav {
	flex: 1 1 100%;
}

header h1 {
	font-size: 4.0em;
	text-align: center;
}

nav,
nav ul,
nav li,
impressum,
impressum ul,
impressum li {
	margin: 0;
	padding: 0;
	border: none;
}

nav ul,
impressum ul {
	display: flex;
	flex-direction: column;
}

nav li,
impressum li {
	list-style-type: none;
	margin: 1.3em 0;
	flex: 1 1 100%;
}

nav a {
	display: inline-block;
	width: 95%;
	background: #fffbf0;
	border: 1px solid #dfac20;
	margin: 0;
	text-decoration: none;
	text-align: center;
}

nav a:hover,
nav a:focus {
	background-color: #dfac20;
}

impressum a {
	display: block;
	padding: 0.4em;
	text-decoration: none;

	text-align: center;
	border: hidden;
	border-radius: 10px;
	/*box-shadow: 0 5px 10px white inset;*/
	color: grey;
	background-color: transparent;
	transition: all .25s ease-in;
}

impressum a:focus,
impressum a:hover
{
	font-weight: bold;
	color: darkblue;
	background-color: transparent;
}

section {
	background: #F1F3F4;
	opacity: 0.7;
	border-color: slateblue;
}

section ul,
section li {
	margin: 0;
	padding: 0;
	border: none;
}

section ul {
	display: flex;
	flex-direction: column;
}

section li {
	list-style-type: none;
	margin: 1.3em 0;
	flex: 1 1 100%;
}

section a {
	display: inline-block;
	background: #fffbf0;
	margin: 0;
	text-decoration: none;
	text-align: right;
	background: transparent;
	line-height: 1.2em;
}

section img.right {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

section img.left {
	float: left;
	margin: 0 0 0.5em 0.5em;
}

section a:hover {
	font-weight: bold;
	background: transparent;
}

section a:focus {
}

section p {
	/*line-height: 0.3em;*/
	line-height: 1.0em;	
}

section h2 {
	line-height: 1.0em
}

article {
	background: url(../bg_images/pergament_02.jpg);
	border-color: #d5d5d5;
}

article img.right {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

article img.left {
	float: left;
	margin: 0 0 0.5em 0.5em;
}

aside {
	background: url(../bg_images/pergament_02.jpg);
	border-color: #d5d5d5;
}

aside ul,
aside li {
	margin: 0;
	padding: 0;
	border: none;
}

aside ul {
	display: flex;
	flex-direction: column;
}

aside li {
	list-style-type: none;
	/*margin: 1.3em 0;*/
	margin: .5em 0;

	flex: 1 1 100%;
}

aside a {
	display: inline-block;
	background: #fffbf0;
	margin: 0;
	text-decoration: none;
	text-align: left;
	background: transparent;
	line-height: 1.2em;
}

aside a:hover {
	font-weight: bold;
	background: transparent;
}

aside a:focus {
}

aside img.right {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

aside img.left {
	float: left;
	margin: 0 0 0.5em 0.5em;
}


aside h2 {
	line-height: 1.5em
}


footer {
	background: url(../bg_images/pergament_02.jpg);
	border-color: #d5d5d5;	
	display: flex;
	flex-flow: row wrap;
}

footer * {
	flex: 1 1 100%;
	/*justify-content: space-between;*/
}

footer p {
	text-align: right;
}

adress p {
	font-weight: bold;
	color: darkblue;
    text-align: right;
}

/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {
	header img {
		margin-right: 50px;
	}
	nav ul,
	impressum ul{
		flex-direction: row;
	}
	nav li,
	impressum li	{
		margin: 0 10px;
		flex: 1 1 0%;
	}
	infobox ul {
		flex-direction: row;
	}
	infobox li {
		margin: 0 10px;
		flex: 1 1 0%;
	}	
	article {
		order: 2;
	}
	#news {
		order: 3;
	}
	aside {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		flex: 1 1 auto;
		order: 4;
	}
	footer {
		order: 5;
	}
}
/* Large screens */

@media all and (min-width: 50em) {
	article {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		
		order: 3;
		flex: 5 1 0%;
	}
	aside {
		flex: 2 1 0%;
	}
	#news {
		order: 2;
		align-self: center;
		height: 120px;
	}
}

h1 {
	background: transparent;
	border: none;
	padding-left: 0;
	text-align: center;
}