/* Container zentriert */
.content-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/* Jede Section mindestens 100vh */
section .main_section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e0e0e0;
}

/* Sticky Navbar */
.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 400;
}

/* Sidebar-Liste auf Desktop */
.side-links {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Desktop Sidebar-Liste Formatierung */
.side-links {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}
.side-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-links li {
  margin: 0.75rem 0;
}
.side-links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background 0.2s;
}
.side-links a::before {
  content: attr(data-section);
  display: inline-flex;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border-radius: 50%;
  text-align: center;
  margin-right: 0.5rem;
}
.side-links a:hover,
.side-links a.active {
  background-color: rgba(0, 123, 255, 0.1);
}

/* Wrapper transitions */
#wrapper {
  position: relative;
  transition: padding-right 0.3s;
  padding-right: 60px;
}

/* #wrapper.toggled {
  padding-right: 250px;
} */

/* Sidebar collapsed/expanded */
#sidebar-wrapper {
  position: fixed;
  top: 98px; /* bis ganz nach oben */
  right: 0;
  height: 100vh; /* volle Höhe */
  width: 100px; /* collapsed width */
  background: #212248;
  z-index: 1000; /* über allem */
  transition: width 0.3s;
  height: calc(100% - 98px);
  border-left: 0.5px solid var(--purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease;
}

#sidebar-overlay {
  position: fixed;
  top: 98px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none; /* standardmäßig ausgeblendet */
  z-index: 900; /* unter der Sidebar, aber über dem Main-Content */
}

#sidebar-wrapper.open {
  transform: translateX(0);
}

#sidebar-overlay.visible {
  display: block;
}

/* Standard: Pager‑Buttons verstecken */
.pager-btn {
  display: none;
  position: absolute;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
  z-index: 10;
}
#btn-up {
  top: 0;
}
#btn-down {
  bottom: 0;
}

/* Wenn alle Items reinpassen */
#sidebar-wrapper.centered {
  justify-content: center; /* vertical & horizontal zentriert */
}
#sidebar-wrapper.centered .pager-btn {
  display: none;
}

/* Wenn Pager‑Modus aktiv */
#sidebar-wrapper.paged {
  justify-content: flex-start; /* Liste oben starten */
}
#sidebar-wrapper.paged .pager-btn {
  display: block;
}
#items-container {
  transition: transform 0.3s ease;
}

/* .hidden-scrollbar {
  scrollbar-width: none; /* Firefox
  -ms-overflow-style: none; /* IE 10+
} */

#wrapper.toggled #sidebar-wrapper {
  width: 300px;
}

/* Toggle button styling: overlap sidebar border */
#sidebar-toggle {
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%) rotate(0deg);
  width: 36px;
  height: 36px;
  background: #212248;
  border: 2px solid var(--purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: left 0.3s, transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1200 !important;
}

/* Expanded state: button moves to left inner edge */
#wrapper.toggled #sidebar-toggle {
  /* Keep button attached to expanding sidebar edge */
  /* No left offset change: stays overlapped */
  transform: translateY(-50%) rotate(180deg);
}

/* Nur wenn die Sidebar geöffnet ist */
#wrapper.toggled .sidebar-nav a {
  flex-direction: row; /* Bild links, Text rechts */
  align-items: center; /* vertikal zentriert */
  justify-content: flex-start; /* nach links ausrichten */
  gap: 0.5rem; /* Abstand zwischen Bild und Text */
  padding: 0.5rem 1rem;
}

#wrapper.toggled .sidebar-nav img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

#wrapper.toggled .sidebar-nav span {
  white-space: normal; /* mehrzeilig erlauben */
  overflow-wrap: break-word; /* falls sehr lange Wörter umbrechen */
  hyphens: auto;
  word-break: normal; /* normale Worttrennung */
  flex: 1; /* nutzt verfügbaren Platz aus */
  text-align: left;
  line-height: 1.2;
  font-size: 0.9rem;
}

/* Navigation list */
.sidebar-nav {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {
  margin-bottom: 0;
}

.sidebar-nav li {
  width: 100%;
  margin: 0 0;
  text-align: center;
}
.sidebar-nav a {
  display: flex;
  flex-direction: row; /* images next to text */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  padding: 0.5rem;
  width: 100%;
  transition: background 0.2s;
  white-space: normal; /* allow text wrap */
}
/* Hide text when collapsed */
#wrapper:not(.toggled) .sidebar-nav span {
  display: none;
}

#wrapper:is(.toggled) .toggled-btn {
  display: none;
}

#wrapper:not(.toggled) .untoggled-btn {
  display: none;
}

/* Hover effect */
.sidebar-nav a:hover {
  background: var(--purple);
  color: #fff;
}

.sidebar-nav a.active_card {
  background-color: rgba(162, 79, 251, 0.5); /* z. B. hellblaues Highlight */
  color: #fff; /* kontrastreiche Schrift */
}

.sidebar-nav img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}
.sidebar-nav span {
  font-size: 0.9rem;
}

/* Variant Control:
   - Add class 'scrollable' on #wrapper for scrollable sidebar
   - Add class 'static' on #wrapper for fixed sidebar without scroll
*/

#wrapper.scrollable #sidebar-wrapper {
  overflow: visible; /* kein Clipping von Kindern */
}

/* Sidebar overflow for scrollable variant */
#wrapper.scrollable #sidebar-wrapper .sidebar-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  #wrapper {
    padding-right: 0;
  }
  #wrapper.toggled {
    padding-right: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 250px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* #wrapper {
    padding-right: 60px;
  } */
}

@media (max-width: 750px) {
  #wrapper:not(.toggled) .sidebar-nav {
    display: none;
  }

  #wrapper:not(.toggled) #sidebar-wrapper {
    width: 0;
  }

  #wrapper:not(.toggled) .toggled-btn {
    display: none;
  }

  #wrapper:not(.toggled) #sidebar-toggle {
    transform: translateX(-20px) translateY(-50%);
  }
}

@media (min-width: 751px) {
  #wrapper {
    padding-right: 100px;
  }
  #wrapper.toggled {
    padding-right: 250px;
  }
}

.pager-btn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  z-index: 1001;
}
#btn-up {
  top: 5px;
}
#btn-down {
  bottom: 5px;
}

/* 3) Scroll-Container */
#items-container {
  width: 100%;
  overflow: hidden;
  height: calc(
    100% - 98px * 2
  ); /* Höhe abzüglich Toggle-Button & Home-Buttons */
  transition: transform 0.3s ease;
}
#sidebar-wrapper.paged .pager-btn {
  display: block;
}

/* Shadow/Border für gepinnte Active-Items */
.sidebar-nav li.pinned-top {
  /* border-bottom: 2px solid #fff; */
  /* oder alternativ: */
  box-shadow: 0px 5px 20px 3px rgb(97 57 162);
}
.sidebar-nav li.pinned-bottom {
  /* border-top: 2px solid #fff; */
  /* oder alternativ: */
  box-shadow: 0px -5px 20px 3px rgb(97 57 162);
}

.web3-section h3 {
  color: white !important;
}

/* .main_content {
  padding-right: 100px;
}

#wrapper.toggled .main_content {
  padding-right: 300px;
} */