.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: left;
    width: 60%;
	height: 100%;
	margin-right: 0;
	margin-left: 1%;
    background: cornflowerblue;
	background-image: url("../gf/paper.jpg");
}

.header {
    background: coral;
    background-image: url("../gf/blattgruen.jpg");}

.aside1 {
   width: 10%;}
.aside2 {
  width: 10%;}

@media all and (min-width: 768px) {
    .aside { flex: 1 auto; }
    .main    { flex: 3 0px; }
    .aside1 { order: 1; } 
    .main    { order: 2; }
    .aside2 { order: 3; }
}
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: lightgreen;
}
ul.topnav li {
	float: left;
	border-right:2px solid #bbb;
    border-left:2px solid #bbb;
}
ul.topnav li a {
    display: block;
    color: darkblue;
    text-align: center;
    margin: 0 7px;
    padding: 10px 12px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: yellow;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

span {color: red;}
img {
    max-width: 100%;
    height: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}
th, td {
  border: none;
  padding: 4px;
  text-align: left;}

  tr:nth-child(even){background-color: #f2f2f2}

body {
  background: url(../gf/carportdach.jpg) no-repeat center fixed; 
  background-size: cover;
}