:root {
     --navbar-height: 45px; /* Einstellung für die Navbar- und die Dropdownmenü-Höhe */
}
nav {
     height: var(--navbar-height); /* Height 45px der Navbar - Dropdownhöhe */
     background: var(--blue);
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     max-width: 1300px;
     color: var(--white);
}
.navbar-fixed-top {
     position: fixed;
     top: 0;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     z-index: 10;
}
nav .logo {
     margin-left: 50px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 1.1em;
     text-decoration: none;
     color: var(--white);
}
nav ul {
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     list-style: none;
     margin-right: 20px;
}
nav li {
     height: 100%;
     text-align: center;
     position: relative; /* Ausgangsposition für das Dropdownmenü */
}
nav li a {
     padding: 0 30px;
}
nav li a:hover, nav li:hover {
     background: var(--lightgrey);
     color: var(--black);
}
nav ul a {
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     color: var(--white);
}
/* Vorzeichen der Checkbox verschwindet */
.toggle_button {
     width: 30px;
     height: 20px;
     position: absolute;
     top: 13px;
     right: 25px;
     display: none;
     flex-direction: column;
     justify-content: space-between;
     border: 0;
     background-color: var(--blue);
}
.bar {
     height: 3px;
     width: 100%;
     background: var(--white);
     border-radius: 100px;
}
@media(max-width: 600px) {
     nav .logo {
          margin-left: 25px;
          font-size: 17px;
     }
     .toggle_button {
          width: 30px;
          height: 19px;
          top: 13px;
     }
     .bar {
          height: 2px;
     }
     .dropdown li {
          height: 50px;
          width: 100%;
     }
}
/* folgend: Media-Umbruchwert - responsives Menü */
@media(max-width: 900px) {
     .toggle_button {
          display: flex;
     }
     nav ul a {
          background: var(--blue);
     }
     nav ul {
          height: min-content;
          width: 100%;
          background: var(--grey);
          display: none; /* nicht flex, damit es erstmal nicht erscheint - siehe #toggle_button:checked ~ ul */
          position: absolute;
          top: var(--navbar-height); /* Height 45px der Navbar */
     }
     nav li {
          height: min-content;
          width: 100%;
          padding: 0;
     }
     nav ul a {
          padding: 15px 0;
     }
     #toggle_button:checked ~ ul {
          display: block;
     }
}