/* --- Navigation global --- */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid gold;
  border-radius: 10px;
  font-size: 1.8em;
  color: darkred;
  padding: 5px 10px;
  font-family: 'UnifrakturCook', cursive;
  cursor: pointer;
  transition: background 0.3s ease;
}
.menu-toggle:hover {
  background: gold;
  color: white;
}

/* --- Header-Navigation (oben rechts) --- */
#mainNav {
  margin-left: auto; /* schiebt die Navi nach rechts */
}
#mainNav ul {
  display: flex;
  justify-content: flex-end; /* rechtsbündig */
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
#mainNav li {
  display: flex;
  align-items: center;
}
#mainNav a {
  font-family: 'UnifrakturCook', cursive;
  color: darkred;
  font-size: 1.3em;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  transition: background 0.3s, transform 0.2s;
  display: inline-block;
}
#mainNav a:hover {
  background: gold;
  color: darkred;
  transform: scale(1.05);
  text-shadow: 1px 1px 2px #fffbe6;
}

/* --- Footer-Navigation (unten rechts) --- */
#footerNav {
  margin-left: auto; /* sorgt für rechtsbündig */
}
#footerNav ul {
  display: flex;
  justify-content: flex-end; /* rechtsbündig */
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}
#footerNav a {
  font-family: 'UnifrakturCook', cursive;
  color: darkred;
  text-decoration: none;
}
#footerNav a:hover {
  text-decoration: underline;
}

/* --- Mobile Navigation --- */
@media (max-width: 768px) {
  /* Header mobil */
  #menuToggle {
    display: block;
    margin: 10px auto;
  }

  #mainNav {
    display: none;
    background-color: #fffbe6;
    border-top: 2px solid gold;
    padding: 10px 0;
  }
  #mainNav.active {
    display: block !important; /* greift auf die von JS gesetzte Klasse */
  }
  #mainNav ul {
    flex-direction: column;
    align-items: center;
  }
  #mainNav li {
    margin: 10px 0;
  }
  #mainNav a {
    font-size: 1.5em;
    background-color: transparent;
    padding: 8px 20px;
  }
  #mainNav a:hover {
    background-color: gold;
    color: darkred;
  }

  /* Footer mobil */
  #footerMenuToggle {
    display: block;
    margin: 10px auto;
  }

  #footerNav {
    display: none;
    background-color: #fceabb;
    border-top: 2px solid gold;
    padding: 10px 0;
  }
  #footerNav.active {
    display: block !important; /* greift auf die von JS gesetzte Klasse */
  }
  #footerNav ul {
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
}