@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Playball);

html {
  background: #f0d9a2;
  background: #F1F3F4;
  color: #5d0505;
}

body {
  color: #333333;
	margin: 0em auto;
	padding: 0.5em;
	max-width: 65em;
	font-family: sans-serif;
	display: flex;
	flex-flow: row wrap;

	}

h1, h2 {
	font-family: Playball;
	font-size: 1.8rem;
	}

x-zitat {
	font-style: italic;
	}

/* Header =========================================================== */

header, nav, nav a, article, aside, footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	border-color: #d5d5d5;
	padding: 5px;
	margin: 10px;  
	-webkit-flex: 1 100%;
	flex: 1 100%;

  }

header {
	display: flex;
	flex-flow: row wrap;
	flex: 1 100%;
	padding-top: 1.0em;
	}

header * {
	flex: 1 1 0%;
	}

header h1 {
	font-size: 2.5rem;
	margin: 0 0.5em;
	}

header img {
	width: 18%;
	float: right;
	}

/* Navigation oben =========================================================== */
header nav {
	flex: 1 1 100%;
	}

nav, nav ul {
	margin: 0;
	padding: 0;
	}

nav ul {
	display: flex;
	margin: 0.8em 0em;
	}

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

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

nav a:hover {
	background: orange;
	border-color: #5d5050;
	color:  #5d0505;
	}

nav a[aria-current=page] {
	color:orange;
	font-weight:bold;
	}

nav a[aria-current=page]:hover,
nav a[aria-current=page]:focus {
	color:#5d0505;
	}

nav li a {
	border-radius: 1.0em;
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	border-color: red;
	border-color: #dfac20;
	}

/* Navigation Seite =========================================================== */

aside {
	padding: 0.8em 0 0 1em;
	padding: 0.8em;
		/*	max-width: 15.0em;   verändert das Rahmendesign */
	}

aside h2 {
	font-size: 1.8rem;	
	font-size: 180%;	
	margin: 0.4em 0 0 0.3em;
	}

aside ul {
	list-style-type: disc; 
	margin-top: 0.5em;
	padding: 0.5em;
	list-style-position: inside;
	}

aside li {
	padding: 0 0 0.1em 0em;
	}

aside a {
	font-size: 0.9rem;
	color: blue;
	padding-left: 0.1em;
	}


aside a:hover, 
aside a:focus {
	background: orange;
	border-color: #5d5050;
	color: #5d0505;
	}

/* Artikel =========================================================== */

article {
    order: 2;
	text-align: left;
	padding: 0 1.5em 2em 1.5em;
	color: #222222;
	background: #fffbf0;
	padding: 0.5em 3em 3em 3em;
	}

article img {
	width: 33%;
	float: none;
	margin-left: 0.2em;
	}
/*	
#home {
	text-align: center;
	}
*/

#kontakt p {
	font-family: verdana,tahoma,arial,calibri,sans;
	font-size: 1.0rem;
	line-height: 1.3;
}

#anekdoten p {
	font-family: 'Times New Roman', 'Paltino Linotype', Garamond, serif;	
	font-size: 1.15rem;
	line-height: 1.3;
}

#anekdoten h2, #kontakt h2 {
	margin-bottom: 1.5em;
}

#home, 
#anekdoten h2 {
	text-align: center;
}

/* ----------------Seitenfuß ================================================= */

footer {
	display: flex;
	flex-flow: row wrap;
	order: 3;
	padding: 0 1.5em;
	font-size: 0.9rem;
	}

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

footer p:last-child {
	text-align: right;
	}

/* ------------- Smart Phones und Tablets mit mittlerer Auflösung ------------- */
@media all and (min-width: 600px) {
	@media all and (min-width: 35em) {
		header img {
			margin-right: 0px;
			margin-bottom: 10px;
		}

		aside{
			flex: 1 auto;
			order: 3;
		}

		footer {
			order: 4;
		}
	}
}

/* ------------- Large screens ------------- */
@media all and (min-width: 800px) {
	@media all and (min-width: 50em) {
		article {
			/* Der Article wird 2.5x so breit wie die beiden asides! */
			order: 2;
			flex: 7 1 0%;
			flex: 8 1 0%;
			}

		aside {
			flex: 2 1 0;
			order: 3;	
			}
		}
	}