/* buttons.css */

/* Jump-to-Top Button initial verstecken */
#jump-to-top {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: scale(0.8) !important;
}

#jump-to-top.show {
  visibility: visible !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Focus State entfernen */
#jump-to-top:focus {
  outline: none !important;
  background-color: #630f16 !important;
}

#jump-to-top:hover {
  background-color: #a21b24 !important;
}

#jump-to-top:active {
  background-color: #a21b24 !important;
}

/* Aktiver Hauptnavigationspunkt */
#nav-links a.active {
  font-weight: 500 !important;
  color: rgb(185, 28, 28) !important; /* text-red-900 */
  border-bottom: 2px solid rgb(185, 28, 28) !important;
}

/* Aktiver Untermenü-Link mit weißem Hintergrund */
#subnav:not(.bg-transparent) a.active {
  font-weight: 700 !important;
  color: rgb(185, 28, 28) !important; /* text-red-900 */
  background-color: rgba(185, 28, 28, 0.1);
  border-radius: 0.25rem;
}

/* Aktiver Untermenü-Link mit transparentem Hintergrund */
#subnav.bg-transparent a.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
  font-weight: 300;
}

/* Hamburger Button größer machen */
#menu-toggle span {
  width: 2rem; /* 32px - w-8 */
  height: 0.25rem; /* 4px - h-1 */
  margin-bottom: 0.5rem; /* 8px - space-y-2 */
  transition: all 0.3s ease;
}

/* Subnav-Position und Animation anpassen */
#subnav {
  top: 5.5rem; /* Direkt unter der Navigation */
  transform: translateY(0) translateY(-100%);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

#subnav.translate-y-0 {
  transform: translateY(0);
}

/* Sicherstellen, dass die Links im Untermenü klickbar sind */
#subnav.pointer-events-none [data-parent] {
  pointer-events: none;
}
#subnav:not(.pointer-events-none) [data-parent] {
  pointer-events: auto;
}

/* Hoverstatus für Links im Untermenü */
#subnav a:hover {
  color: rgb(185, 28, 28); /* text-red-900 */
  font-weight: 300;
  background-color: rgba(185, 28, 28, 0.05);
}

#subnav.bg-transparent a {
  color: white;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

#subnav.bg-transparent a:hover {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
}
/* Füge eine sichtbare Umrandung hinzu, damit aktive Elemente deutlicher erkennbar sind */
#subnav a.active {
  outline: 2px solid rgba(255, 0, 0, 0.5) !important;
}

/* Füge einen Hinweis zu aktiven Links hinzu (zum Debuggen) */
#subnav a.active::after {
  content: " (aktiv)";
  font-size: 0.8em;
  opacity: 0.7;
}