@charset "UTF-8";
:root {
     --text: #2e2d2c;
     --white: #fff;
     --green: #4ca928;
     --lightgreen: #edf6e9;
     --orange: #f5a200;
     --lightorange: #fef6e5;
     --yellow: #ffe000;
     --lightyellow: #fffce5;
     --red: #e2001a;
     --lightred: #fce5c8;
     --navbar-height: 60px; /* Einstellung für die Navbar- und die Dropdownmenü-Höhe */
}
* {
     margin: 0;
     padding: 0;
     font-size: 18px;
     font-family: 'IBM Plex Sans', sans-serif;
}
html {
     min-height: 100vh;
}
body {
     min-height: 100vh;
}
nav {
     height: var(--navbar-height); /* Height 80px der Navbar - Dropdownhöhe */
     background: var(--green);
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 max-width: 1500px;
 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: 22px;
     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%;
     padding: 0 30px;
     text-align: center;
     position: relative; /* Ausgangsposition für das Dropdownmenü */
}
nav li a:hover, nav li:hover {
     background: var(--red);
}
nav ul a {
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-decoration: none;
 color: var(--white);
}
nav li ul li a:hover {
     background: var(--blue);
}
.dropdown {
     height: min-content;
     width: 360px;
     background: var(--orange);
     display: none; /* nicht flex, damit es erstmal nicht erscheint - siehe nav li:hover .dropdown */
     flex-direction: column;
     position: absolute;
     left: 0;
     top: var(--navbar-height); /* Height 80px der Navbar */
}
.dropdown li {
     height: 60px;
     width: 100%;
}
.dropdown li a {
     justify-content: flex-start;
     padding-left: 30px;
     width: calc(100% - 30px); /* Damit der Curser nicht 30px nach rechts rausragt */
}
nav li:hover .dropdown {
     display: flex;
}
nav input[type="checkbox"] {
     display: none;
} /* Vorzeichen der Checkbox verschwindet */
.expandable_li {
     display: flex;
     justify-content: center;
     align-items: center;
 background: var(--green);
}
.toggle_button {
     width: 30px;
     height: 23px;
     position: absolute;
     top: 19px;
     right: 25px;
     display: none;
     flex-direction: column;
     justify-content: space-between;
 border: 0;
 background-color: var(--green);
}
.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: 18px;
          top: 22px;
     }
     .bar {
          height: 2px;
     }
 .dropdown li {
     height: 50px;
     width: 100%;
}
}
/* folgend: Media-Umbruchwert - responsives Menü */
@media(max-width: 2000px) {
     .toggle_button {
          display: flex;
     }
 nav ul a {
 background: var(--green);
}
     nav ul {
          height: min-content;
          width: 100%;
          background: var(--orange);
          display: none; /* nicht flex, damit es erstmal nicht erscheint - siehe #toggle_button:checked ~ ul */
          position: absolute;
          top: var(--navbar-height); /* Height 80px der Navbar */
     }
     nav li {
          height: min-content;
          width: 100%;
          padding: 0;
     }
     nav ul a {
          padding: 15px 0;
     }
     .expandable_li {
          display: block;
     }
     .expandable_li label {
          padding: 15px 0;
          cursor: pointer;
          display: block;
     }
     .expandable_li:hover .dropdown {
          display: none;
     }
     .expandable_li input[type="checkbox"]:checked ~ .dropdown {
          display: block;
     }
     .dropdown {
          position: static;
          width: 100%;
     }
     .dropdown li {
          padding: 0;
          display: block;
          position: static;
          background: var(--orange);
     }
     .dropdown li a {
          width: 100%;
          padding: 0;
          justify-content: center;
     }
     #toggle_button:checked ~ ul {
          display: block;
     }
}