/* Basis-Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* Menü-Icon */
.menu-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
  background: white;
}

/* Hauptmenü-Container */
.menu-container {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background: #333;
  transition: 0.3s;
  z-index: 90;
}

#menu-toggle:checked ~ .menu-container {
  left: 0;
}

/* Menü-Liste */
.menu {
  padding-top: 60px;
  list-style: none;
}

.menu li {
  border-bottom: 1px solid #444;
}

.menu a, .menu label {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.menu a:hover, .menu label:hover {
  background: #555;
}

/* Untermenüs */
.submenu, .subsubmenu {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
  background: #2a2a2a;
}

.submenu li {
  border-bottom: 1px solid #393939;
}

.subsubmenu {
  background: #222;
}

/* Pfeil-Icons */
.arrow::after {
  content: "▶";
  float: right;
  transition: 0.3s;
}

.submenu-toggle:checked + label .arrow::after {
  transform: rotate(90deg);
}

.subsubmenu-toggle:checked + label .arrow::after {
  transform: rotate(90deg);
}

/* Untermenüs öffnen */
.submenu-toggle:checked ~ .submenu,
.subsubmenu-toggle:checked ~ .subsubmenu {
  max-height: 1000px;
}

/* Overlay für Hintergrund */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

#menu-toggle:checked ~ .overlay {
  visibility: visible;
  opacity: 1;
}