/* Wilde Slide Navigation */
.nav-container {
  position: fixed;
  top: 25%;
  right: 0;
  transform: translateY(-50%);
  z-index: 10000;
  width: 420px;
}

.nav-slide {
  position: absolute;
  right: -380px;
  width: 420px;
  background: none;
  border: none;
  box-shadow: none;
  transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  padding: 25px 20px;
  transform: rotate(1deg);
}

.nav-container:hover .nav-slide {
  right: 0;
  transform: rotate(-1deg);
}

.nav-tab {
  position: absolute;
  left: -110px;
  top: 5%;
  transform: translateY(-50%) rotate(-3deg);
  background: linear-gradient(135deg, #f89c1c, #ffb03a);
  color: white;
  padding: 18px 35px;
  border-radius: 80% 20% 60% 40% / 50% 80% 20% 70%;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 4px;
  text-transform: uppercase;
  box-shadow: -3px 3px 15px rgba(248, 156, 28, 0.4);
  cursor: pointer;
}

/* Standard Link Style */
.nav-slide a {
  display: block;
  padding: 12px 18px;
  margin: 10px 0;
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 2px solid rgba(255,255,255,0.3);
  position: relative;
}

/* Bunte Grundfarben für jeden Link */
.nav-slide a:nth-child(2) { 
  background: #ff6b35;
  transform: rotate(-2deg); 
  margin-left: 5px; 
}
.nav-slide a:nth-child(3) { 
  background: #782c9e;
  transform: rotate(1.5deg); 
  margin-left: -3px; 
}
.nav-slide a:nth-child(4) { 
  background: #058d64;
  transform: rotate(-1deg); 
  margin-left: 8px; 
}
.nav-slide a:nth-child(5) { 
  background: #f89c1c;
  transform: rotate(2deg); 
  margin-left: -5px; 
}
.nav-slide a:nth-child(6) { 
  background: #9b4bc4;
  transform: rotate(-1.5deg); 
  margin-left: 10px; 
}
.nav-slide a:nth-child(7) { 
  background: #06b57f;
  transform: rotate(1deg); 
  margin-left: 0px; 
}
.nav-slide a:nth-child(8) { 
  background: #ff8855;
  transform: rotate(-0.5deg); 
  margin-left: 5px; 
}
.nav-slide a:nth-child(9) { 
  background: #ffb03a;
  transform: rotate(1.5deg); 
  margin-left: -8px; 
}

/* Hover Effekte */
.nav-slide a:hover {
  transform: rotate(0deg) scale(1.12) translateX(-15px) !important;
  box-shadow: -12px 12px 25px rgba(0,0,0,0.4) !important;
  z-index: 100 !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.nav-slide a:nth-child(2):hover { 
  background: linear-gradient(135deg, #ff6b35, #ff8855, #ffb03a) !important; 
  border: 3px solid #ff6b35 !important;
}
.nav-slide a:nth-child(3):hover { 
  background: linear-gradient(135deg, #782c9e, #9b4bc4, #ff6b35) !important; 
  border: 3px solid #782c9e !important;
}
.nav-slide a:nth-child(4):hover { 
  background: linear-gradient(135deg, #058d64, #06b57f, #f89c1c) !important; 
  border: 3px solid #058d64 !important;
}
.nav-slide a:nth-child(5):hover { 
  background: linear-gradient(135deg, #f89c1c, #ffb03a, #ff6b35) !important; 
  border: 3px solid #f89c1c !important;
}
.nav-slide a:nth-child(6):hover { 
  background: linear-gradient(135deg, #9b4bc4, #782c9e, #ff8855) !important;
  border: 3px solid #9b4bc4 !important;
}
.nav-slide a:nth-child(7):hover { 
  background: linear-gradient(135deg, #06b57f, #058d64, #ffb03a) !important;
  border: 3px solid #06b57f !important;
}
.nav-slide a:nth-child(8):hover { 
  background: linear-gradient(135deg, #ff8855, #ff6b35, #782c9e) !important;
  border: 3px solid #ff8855 !important;
}
.nav-slide a:nth-child(9):hover { 
  background: linear-gradient(135deg, #ffb03a, #f89c1c, #058d64) !important;
  border: 3px solid #ffb03a !important;
}

.nav-slide a.active {
  background: linear-gradient(135deg, #ff6b35, #f89c1c);
  transform: rotate(-2deg) scale(1.05);
  box-shadow: -5px 5px 15px rgba(255,107,53,0.3);
}

/* MOBILE */
@media (max-width: 768px) {
  .nav-container {
    width: 75%;
    top: auto;
    bottom: 70%;
    transform: translateY(0);
  }
  
  .nav-slide {
    width: 65%;
    right: -70%;
    font-size: 12px;
    padding: 18px 15px;
  }
  
  .nav-tab {
    left: -75px;
    top: 8px;
    transform: rotate(-5deg);
    font-size: 16px;
    padding: 10px 20px;
    letter-spacing: 2px;
    border-radius: 60% 20% 80% 30% / 40% 70% 30% 60%;
  }
  
  .nav-slide a {
    font-size: 12px;
    padding: 10px 15px;
    margin: 6px 0;
  }
  
  .nav-container:hover .nav-slide {
    right: -20%;
  }
}