#app {
  background-color: white;
}

#auto_sidebar {
  width: 4.25rem;
  color: black;
  transition: width 0.3s ease-in-out;
}

.hideIfSmallSidebar {
  display: none;
}

#auto_sidebar .menu-item-text {
  display: none;
}

#auto_sidebar.showing-text .menu-item-text {
  display: inline; /* oder block/inline-block */
  /* Optional: kleine Fade-In-Animation */
  opacity: 1;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#auto_sidebar li .sub-menu {
  position: absolute;
  top: 0;
  left: 0; /* Basis-Referenz = linke Kante des Eltern-LIs */
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease-in-out,
  opacity 0.3s ease-in-out;
  z-index: 2000; /* Nach Bedarf anpassen, damit das Submenü über anderen Elementen liegt */
}

/* Beim Hovern: Submenü soll sichtbar „herausfahren“ */
#auto_sidebar li:hover .sub-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Style des Submenüs */
#auto_sidebar li .sub-menu div {
  left: 4.25rem;
  border-color: darkgray;
  border-style: solid;
  border-width: 1px;
  border-radius: 0 0.375rem 0.375rem 0;
}

#auto_sidebar li:hover > a, .selected-item {
  background-color: #CCCCCC !important;
}

/* Radien der Hervorhebung */
#auto_sidebar a {
  border-radius: 0.375rem;
}

#auto_sidebar .sub-menu a {
  border-radius: 0 0.375rem 0.375rem 0;
}

#auto_sidebar > ul > li:first-child {
  margin-top: .5em;
}


/* Anzeige des Submenüs */
#auto_sidebar li:hover .sub-menu:last-child {
  display: initial;
}

#auto_sidebar li:hover .sub-menu[style *= "left: 4.25rem"] {
  display: initial;
}

/* Style des offenen Submenüs */
.open-sub-menu {
  max-width: inherit;
  margin-left: 1em;
  display: none;
}

footer {
  color: white;
  text-align: center;
}

#sidebar {
  padding: 1px;
  display: flex;
  flex-direction: column;
}

#sidebar {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.rwth-blue {
  background-image: linear-gradient(to right, #00549f 0%, #407fb7 71%, #00549f 100%);
}

.rwth-blue-opacity-25 {
  background-image: linear-gradient(to right, #c7ddf2 0%, #d3e2f0 51%, #c7ddf2 100%);
}

.rwth-blue-opacity-10 {
  background-image: linear-gradient(to right, #e8f1fa 0%, white 51%, #e8f1fa 100%);
}

.rwth-blue-border {
  border: solid 1px #8ebae5;
}

.search-input::placeholder {
  color: darkgray;
}