/* Sidebar Container */
.sidebar {
  width: 240px;
  background-color:   #1A1A1D;
  color: rgb(230, 230, 230);
  display: flex;
  flex-direction: column;
  padding-top: 5px;
  z-index: 222;
  border-right: 2px solid #3c3c3f;

  /* Fixed on desktop */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transition: transform 0.3s ease; /* Smooth slide effect */
}

/* LOGO */
.logo-container {
  display: flex;
  border-bottom: 1px solid #3c3c3f;
  height: 40px;
  padding: 12px 20px;
  margin-bottom: 5px;
  text-decoration: none;
  color: rgb(230, 230, 230);
  align-items: center;
}

.logo-container img {
  width: 40px;
}

.logo-container.sidebar-logo {
  border-bottom: 2px solid #3c3c3f;
  padding: 12px 10px;
}

.logo-text {
  text-decoration: none;
  color: rgb(230, 230, 230);
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: -10px;
}

/* Navigation Links */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}


.nav-item i {
 text-decoration: none ;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 16px 20px ;
  color: #ddd;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  font-size: 16px;
  cursor: pointer;
  margin-top: 5px;
}

.nav-item:hover {
  background-color: #7a5af8a1;
  color: rgb(230, 230, 230);
}
.nav-item.active a {
  background-color: #7a5af8a1;
  color: #979797;
}

.nav-item i {
  margin-right: 12px;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
}

/* Footer Separator */
.seperator {
  border-top: 1px solid #3c3c3f;
  padding: 10px;
}

/* ------------------- */
/* Responsive Behavior */
/* ------------------- */

.hamburger {
  display: none; /* nur bei mobile */
  position: fixed;
  top: 15px;
  right: 20px; /* Rechts statt links */
  z-index: 1001;
  background: none;
  border: none;
  color: rgb(230, 230, 230);
  font-size: 24px;
  cursor: pointer;
}


@media (max-width: 1080px) {

  /* Sidebar initially hidden */
  .sidebar {
    transform: translateX(-100%);
  }

  /* Sidebar when active (open) */
  .sidebar.active {
    transform: translateX(0);
  }

  /* Hamburger menu appears on mobile */
  .hamburger {
    display: block;
  }

  /* Adjust content when sidebar is hidden */
  .site-info-content {
    margin-left: 0;
    border-bottom: 2px solid #3c3c3f;
    width: 100%;
  }

  .main-content {
    margin-left: 0;
  }

  .background-container {
    left: 0;
    width: 100%;
  }
}




.sidebar { z-index: 8000; }
.hamburger { z-index: 9060; }
/* site-info-content z-index wird in layout.css definiert */




.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

/* Header Ko-fi Button Styles */
.header-kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 94, 91, 0.15);
  color: #ff6b35;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 94, 91, 0.3);
  box-shadow: 0 2px 8px rgba(255, 94, 91, 0.2);
  margin-right: 15px;
}

.header-kofi-btn:hover {
  background: rgba(255, 94, 91, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 94, 91, 0.3);
}

/* Ko-fi Button ohne Icon - nur Text */

.header-kofi-btn .kofi-text {
  color: #ff6b35;
  font-weight: 500;
}

/* Header Discord Button Styles */
.header-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #7a5af8a1;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(122, 90, 248, 0.3);
  margin-right: 15px;
}

.header-discord-btn:hover {
  background: linear-gradient(135deg, #4752c4 0%, #5b6eae 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

.header-discord-btn i {
  font-size: 16px;
}

.header-discord-btn .discord-text {
  color: white;
  font-weight: 500;
}

/* Header Buttons - kein responsive Design */
}