:root {
  --menu-width: 300px;
 /* --bgcolor-dark: #1D1D1B;
  --textcolor-dark: #1D1D1B;
  --textcolor-light: #efefef;*/
}

/*body { margin: 0; font-family: Arial, sans-serif; }*/

.menu-toggle {
  /*position: fixed; top: 20px; right: 20px; z-index: 1100;*/
  cursor: pointer; background: var(--bgcolor-dark);
  color: var(--textcolor-light); border: none; padding: 10px 15px;
}

.overlay {
  position: fixed;
  inset: 0; 
  background: rgba(0,0,0,0.5);
  opacity: 0; 
  visibility: hidden; 
  transition: 0.3s; 
  z-index: 999;
}
.overlay.open { opacity: 1; visibility: visible; }

.sidebar {
  padding-top: 15px;
  position: fixed; 
  top: 0; 
  left: calc(-1 * var(--menu-width));
  width: var(--menu-width); 
  height: 100dvh;
  background: var(--bgcolor-dark); color: var(--textcolor-light);
  transition: left 0.3s ease; z-index: 1000;
  display: flex; flex-direction: column; justify-content: space-between;
  /*overflow-y: auto;*/
  overflow: hidden;
}

.sidebar > div:first-child {
overflow-y: auto;
flex: 1; /* nimmt den verfügbaren Platz ein */
min-height: 0; /* wichtig für Flex + overflow */
}

.sidebar.open { left: 0; }

ul { 
  list-style: none; 
  margin: 0; 
  padding: 0;
  padding-left:10px; }

li {
  padding: 5px;
  padding-left: 15px; 
  cursor: pointer;
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  text-transform: uppercase;
}

li:hover { background: rgba(255,255,255,0.1); }

li.active {
  background: rgba(255,255,255,0.2);
  font-weight: bold;
}

.submenu {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.submenu.open { max-height: 500px; }

.submenu li { padding-left: 30px; font-size: 0.9em; }
.submenu .submenu li { padding-left: 50px; font-size: 0.85em; }

.arrow { transition: transform 0.3s ease; }
.arrow.open { transform: rotate(90deg); }

.menu-footer {
  padding: 15px; border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
}

.menu-footer span { margin: 0 10px; cursor: pointer; }