.sidebar {
    display: flex;
    flex-direction: column;   /* Hauptliste vertikal */
    width: 20vw;              /* 20% des Viewports */
   /*min-width: 200px;         /* optional */
    background-color: #ccc;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: none;    /* Firefox */
    height: auto;
    position: relative;
}

.sidebar::-webkit-scrollbar { /* Chrome, Safari, Edge: Scrollbalken ausblenden */
  display: none;
}

/* Hauptliste */
.sidebar ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style: none;
    gap: 0.7rem;              /* Abstand zwischen <li> */
}

/* Hauptpunkte */
.sidebar ul li {
    display: flex;
    flex-direction: column;   /* Submenu darunter */
}

/* Links */
.sidebar ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    cursor: pointer;
}

/* Symbol davor */
.sidebar > ul > li > a::before {
    content: "►";      
    color: #333;           /* blaues Symbol */
    margin-right: 0.5rem;     /* Abstand zum Text */
}
/* Submenu standardmäßig verborgen */
.submenu {
    display: flex;            /* Flexbox für gap */
    flex-direction: column;
    max-height: 0;            /* Start verborgen */
    overflow: hidden;
    
}

.sidebar .submenu li a::before {
    content: "•";      
    color: #333;              /* Hellgrau */
    margin-right: 0.5rem;
}
.submenu.open {
    max-height: 1000px;  /* ausreichend für alle Unterpunkte */
    gap: 0.1rem;
    padding-left: 1.5rem;
    transition: max-height 1s ease; /* sanftes Aufklappen */
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    color: #007BFF;
}

.sidebar.collapsed {
  width: 16px;                  /* Hover-Bereich zum Wiederaufklappen */
  min-width: 16px;
  min-height: calc(100vh - 5.5rem);
  min-height: calc(100dvh - 5.5rem);
  padding: 0;
  background: rgba(200, 200, 200, 0.35);
  border-right: none;
  overflow: hidden;
  cursor: e-resize;
  z-index: 25;
}

.sidebar.collapsed::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 8px;
  background: rgba(160, 160, 160, 0.45);
  pointer-events: none;
}

/* Abstand bei eingeklappter Sidebar: .container:has(.sidebar.collapsed) (style_general.css) */

.sidebar.collapsed > ul,
.sidebar.collapsed > p,
.sidebar.collapsed .mathe-lp-hint {
  display: none;
}