* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 1px;
  text-align: center;
  background: lightblue;
  color: black;
}


/* Style the Responsive navigation bar */
.navigation-menu {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #0000ff;
  position: absolut;
  height: 100%;
  overflow: auto;
}

.navigation-menu a {
  display: block;
  color: white;
  padding: 16px;
  text-decoration: none;
}
 
.navigation-menu a.active {
  background-color: lightblue;
  color: black;
}

.navigation-menu a:hover:not(.active) {
  background-color: DodgerBlue;
  color: white;
}


.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

/* max-width: alles über (Anzahl)px ergibt wieder einen Wechsel zur Vertikale Navigation */
@media screen and (max-width: 3000px) {
  .navigation-menu {
    width: 100%;
    height: auto;
    position: relativ;
  }
  .navigation-menu a {float: left;}
  div.content {margin-left: 0;}
}

/* max-width: alles über (Anzahl)px ergibt wieder einen Wechsel von der Vertikalen und Text zentrierten zur Horizontalen Navigation */
@media screen and (max-width: 500px) {
  .navigation-menu a {
    text-align: center;
    float: none;
  }
}

/* Column container */
.row {  
  display: flex;
 flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* .side ausblenden wenn nur ein kleinerer Bildschirm bis 1466 Pixel vorhanden ist */
@media screen and (max-width: 1466px) 
{
.side {
   display: none
    }
 }


/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}



/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}