@charset "utf-8";

html {
background: white;
color: black;	
font-family: Arial,Helvetica,sans-serif;
}

body {
margin: 10px auto;
max-width: 65em;
}

h1, main {
padding: 1em;
margin: 1em;
}

h2 {
margin-top: 1.5em;
}

h3 {
margin-top: 1.5em;
}

li {
margin-bottom: 1.5em;
}

#logospace {
margin-bottom: -6em;
}

#fotospace {
margin-left: 1.5em;
}

#listspace {
margin-left: 2.5em;
}

header {
border-color: transparent;
}

#logo {
  font-size: 1.5em;
  line-height: 100%;
  display: block;
  color: white;
  text-decoration: none;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  padding: 0.25em 0.25em;
  margin: 0 0 1em;
}

/* Balken für Überschrift */
h1 {
margin: 1em 0 0;
padding: 0.5em 2em;
background: yellowgreen;
color: black;
border-radius: 1em 0 1em 0;
}

/* Balken für Footer */
footer {
margin: 1em 0 0;
padding: 0.5em 2em;
background: yellowgreen;
color: black;
border-radius: 0 1em 0 1em;
}

nav a {
background: white;
color: darkgreen;
border: 2px solid transprent;
}

nav a:hover, nav a:focus {
background-color: darkgreen;
color: white;
border: 2px solid darkgreen;
}

nav a[aria-current=page] {
border: 2px solid;
}

a {
color: darkgreen;
}

table, th, td { 
border: 1px solid; 
border-collapse: collapse; 
}

/* responsives Layout */

body {
display: flex;
flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, footer {
padding: 1em;
margin: 1em;
flex: 1 1 100%;
}

header {
display: flex;
flex-flow: row wrap;
}

header * {
flex: 1 1 0%;
}

header nav {
flex: 1 1 100%;
}

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

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

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

nav a {
display: inline-block;
border-color: transparent;	  
width: 95%;
margin: 0;
text-decoration: none;
text-align: center;
font-weight: bold;
}

footer {
display: flex;
flex-flow: row wrap;
}

footer {
margin: 1em 0;
padding: 0 1em;  
}

footer * {
flex: 1 1 0%;
}

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

/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
header {
margin: 1em 0;
padding: 1em 0;
}

h1 {
height: 1em;
margin: 5em 0 0;
padding: 0.5em 2em;
background: yellowgreen;
color: black;
}

#logo {
margin: -4em 0 1em -1em;
}
	
nav ul {
flex-direction: row;
width: 80%;
margin: -10em 0 0 20%;
}

nav li {
margin: 0 1em;
width: 10em;
flex: 1 1 0%;
}

article {
order: 1;
}

aside {
order: 4;
}

footer {
order: 5;
}
}