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

* {
	margin: 0;
	padding: 0;
	}

body {
	width: 50em;
	max-width: 90%;
	margin: 0 auto;
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 0.9em;
	letter-spacing: 0.03em; 
	line-height: 1.5em;
	}
	
p a {
	color: #C00;
	text-decoration:none;
	}
	
p a:hover {
	color: #333;
	}

/* Style the header */
header {
  	width: 100%;
	height: auto;
	padding-top: 0.9em; 
	}

nav ul {
	margin-top: 0.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	}

nav li {
	list-style: none;
	margin: 0.5em 0;
	padding: 0.2em;
	}
	
nav li a {
	list-style: none;
	margin: 0.5em 0;
	font-size: 1.0em; 
	text-decoration: none;
	}

@media (min-width: 45em) {
	nav ul {
		flex-direction: row;
		}
		
	nav li {
		flex: 1;
		background-color: #FFF;
		width:14em;	
		}
	
	nav li a {
		text-decoration: none;
		}
	}

nav a {
	display: block;
	padding: 0.1em 0.4em 0.1em 0.3em;
	text-decoration: none;
	color:#C00;
	
	font-weight: normal; 
	font-style: italic; 
	letter-spacing: 0.05em;	
	}

/*nav li[aria-current] a {
	background-color: #FFF;
	}*/

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: #333;
	}

article {
  	float: left;
  	padding: 1.1em;
	margin: 3em 1.5em 0 0;
 	width: 80%;
	background-color: #fff;	
 	height: auto; /* only for demonstration, should be removed */
	}

/* Clear floats after the columns */
section:after {
  	content: "";
  	display: table;
  	clear: both;
	margin: 1.5em 0 0 0;
	}

/* Style the footer */
footer {
	}

.flex-container {
	display: flex;
	flex-direction: column;
	}
	
.mittig {
	justify-content: center;
	}
	
.vorne {
	justify-content: flex-start;
	}

/* große Viewports */
@media all and (min-width: 37.5em) {
	.flex-container {
		flex-direction: row;
		}
	}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 37.5em) {
	nav, article, aside {
   		width: 100%;
    	height: auto;
  		}

		p a {
		text-decoration: underline;
		
		}	
		nav li a {
		text-decoration: underline;
		}	
	}

h1 {
  	font-size: 0.9em;
	letter-spacing: 0.03em;
 	text-decoration: none;
  	color: #000;
	}

h2 {
  	font-size: 0.9em;
	letter-spacing: 0.03em;
	margin-top: 3.5em;
 	text-decoration: none;
  	color: #000;
	}
		
h3 {
	font-size: 0.9em;
	letter-spacing: 0.03em;
	margin-left: 3.5em;
 	text-decoration: none;
  	color: #000;
	font-weight: 100;
	}
	
hr {
	margin-top: 1.5em;
	}