body {
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 color: whitesmoke;
 background-color: rgb(62, 70, 179);
 line-height: 1.6;
}

header {
 background-color: navy;
 color: white;
 text-align: center;
 padding: 20px;
}

.layout {
 display: flex;
 min-height: 90vh;
}

#navbar {
 width: 25%;
 min-width: 200px;
 background-color: lightgray;
 padding: 20px;
 box-sizing: border-box;
}

main {
 flex: 1;
 padding: 30px;
 box-sizing: border-box;
}

footer {
 text-align: center;
 padding: 10px;
 font-size: 0.9em;
 color: dimgray;
 background-color: whitesmoke;
}

#navbar a {
 display: block;
 color: navy;
 text-decoration: none;
 font-weight: bold;
 margin: 10px 0;
}

#navbar a:hover {
 text-decoration: underline;
}

#navbar a.active {
 color: white;
 background-color: navy;
 padding: 5px;
 border-radius: 4px;
}

a:focus,
button:focus {
 outline: 3px solid royalblue;
 outline-offset: 2px;
}

@media (max-width: 800px) {
 .layout {
  flex-direction: column;
 }

 #navbar {
  width: 100%;
  min-width: auto;
 }

 main {
  padding: 20px;
 }
}

#navbar a.active,
#navbar a[aria-current="page"] {
 background-color: navy;
 color: white;
 padding: 5px 10px;
 border-radius: 4px;
}

#navbar a[aria-current="page"]::after {
 content: " (aktuelle Seite)";
 position: absolute;
 left: -9999px;
}