/* ! Sidebar-Navigation */
/* === Variablen anpassen, wenn du andere Maße willst ===================== */
:root {
  --sidebar-w: 20vw;               /* Breite der Sidebar ab md (Legacy) */
  --header-h: 64px;                 /* Fallback-Höhe deines Headers */
  --sidebar-width: 20vw;           /* ausgefahren */
  --sidebar-width-collapsed: 4rem;  /* eingeklappt: nur Icons */
  --sticky-gap: 0px;                /* falls oben gebraucht */
}

/* === Sticky Sidebar ab md =============================================== */
@media (min-width: 768px) {

  /* Vermeide 'transition: all' (ruckelt + triggert unnötige Reflows) */
  #sidebar {
    position: sticky;
    top: var(--header-h);
    align-self: flex-start;
    background-color: rgba(var(--bs-white-rgb), 0.5) !important;
    /* Nutze klare Breitenangaben, die interpolierbar sind */
    flex: 0 0 var(--sidebar-width-collapsed);
    width: var(--sidebar-width-collapsed);
    height: calc(100dvh - var(--header-h));
    overflow: visible;
    /* Smoothen: width + flex-basis harmonisieren */
    transition:
      flex-basis .28s ease,
      width .28s ease;
    will-change: width, flex-basis;
    z-index: 1020; /* unter Header/Modals, über Content */
    border-right: 1px solid rgba(0,0,0,.06); /* optional */
  }

  #sidebar.is-open {
    flex-basis: var(--sidebar-width);
    width: var(--sidebar-width);
  }

  /* Der scrollbare Bereich in der Sidebar (dein Inhalt) */
  #sidebar .offcanvas-body {
    padding: 1rem 0.75rem;
    /* wenn --sticky-gap 0 ist, trotzdem valide */
    max-height: calc(100dvh - var(--header-h) - var(--sticky-gap));
    overflow: visible; /* Scrollen innerhalb der Menüs, nicht hier */
  }

  /* Content-Spalte rechts: sauber schrumpfen/scrollen */
  .flex-fill { min-width: 0; }

  /* Toggle-Button-Position & Feedback */
  .btn-nav-toggle {
    position: absolute;
    bottom: 1.75em;
    left: calc(100% - 1em);
    transition: transform .25s ease;
  }
  #sidebar.is-open .btn-nav-toggle { transform: rotate(180deg); }

  /* -------------------------------------------
     WICHTIG: keine display:none für Menüs!
     Wir „verstecken“ über max-width + opacity
     ------------------------------------------- */

  /* Container für den Text-/Linkbereich rechts neben dem Icon */
  #sidebarnav .sidebarnav-menu {
    overflow: hidden;
    max-width: 0;                /* nimmt eingeklappt keinen Platz ein */
    opacity: 0;
    transform: translateX(-6px); /* leichter Slide-in */
    pointer-events: none;        /* nicht klickbar, solange „zu“ */
    transition:
      max-width .28s ease,
      opacity  .18s ease .08s,
      transform .18s ease .08s;
    will-change: max-width, opacity, transform;
  }

  /* Ausgefahren: Platz geben & sichtbar machen */
  #sidebar.is-open #sidebarnav .sidebarnav-menu {
    max-width: 1000px;           /* ausreichend groß wählen */
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }

  /* Label kann separat leicht einfaden/verschieben */
  #sidebarnav .sidebarnav-menu-label {
    white-space: nowrap;
    display: inline-block;
    opacity: .001;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
    will-change: opacity, transform;
  }
  #sidebar.is-open .sidebarnav-menu-label {
    opacity: 1;
    transform: none;
  }
}

/* === Mobil: normales Offcanvas-Verhalten beibehalten ===================== */
@media (max-width: 767.98px) {
  #sidebar {
    position: fixed; /* Bootstrap macht das ohnehin; hier nur zur Klarheit */
    width: var(--bs-offcanvas-width, 85vw);
    max-width: 100%;
    top: 0;
    border-right: none;
    transition: none; /* Offcanvas steuert mobil die Animation */
  }
}

/* === Fancy Collapse: Fade + Slide (ohne JS) ============================ */

/* Grundzustand – unsichtbar, leicht nach links versetzt */
.collapse-fx {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

/* Offener Zustand bleibt neutral */
.collapse-fx.show {
  opacity: 1;
  transform: none;
}

/* Während Bootstrap die Höhe animiert (.collapsing), kein Effekt */
.collapsing.collapse-fx {
  opacity: 1;
  transform: none;
}

/* Optional: gleichmäßige Innenabstände, keine Bewegung */
.collapse-fx > .nav,
.collapse-fx > ul {
  padding-top: .25rem;
  padding-bottom: .25rem;
  transition: none !important;
}

/* Bessere Klickflächen im Submenu */
#sidebarnav .nav .nav-link {
  padding: .25rem 0;
  border-radius: .375rem;
}
#sidebarnav .nav .nav-link:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb, 13,110,253), .5);
  outline-offset: 2px;
}

/* Respektiere reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce) {
  .collapse-fx,
  .collapsing.collapse-fx,
  .sidebarnav-menu-label::after {
    transition: none !important;
    transform: none !important;
  }
}

/* Pfeil-Icon im Bootstrap-Stil, größer und klar erkennbar */
.sidebarnav-menu-label::after {
  content: "";
  display: inline-block;
  width: 1.25em;                /* größer: vorher 0.875em */
  height: 1.25em;
  margin-left: .45rem;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M6.646 12.354a.5.5 0 0 1 0-.708L9.293 9 6.646 6.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z'/%3e%3c/svg%3e") center/contain no-repeat;
  vertical-align: -.1em;       /* leicht nach unten, damit mittig zur Schrift */
  transition: transform .25s ease;
}

/* Rotiert beim Öffnen (Bootstrap Collapse) */
.sidebarnav-menu-label[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

/* Wenn Sidebar eingeklappt ist: Submenus komplett ausblenden */
#sidebar:not(.is-open) #sidebarnav .collapse {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important; /* mt-2 neutralisieren */
}
/* Falls während Animation: collapsing-Status auch verbergen */
#sidebar:not(.is-open) #sidebarnav .collapsing {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}
/* ! Sidebar-Navigation */