@charset "utf-8";
/* CSS Document */

/* ====== Hamburger-Nav (Frontend) ====== */
#main-nav{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--sx-teal); /* nutzt deine Variable/Fallback in style.css */
}

/* Button default verstecken am Desktop */
#main-nav .nav-toggle{
  display: none;
  appearance: none;
  border: 0;
  background: #fff;
  color: #0f766e;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Mobile Layout */
@media (max-width: 900px){
  #main-nav{
    flex-wrap: wrap; /* damit die Liste unter den Button fließen kann */
  }

  /* Button sichtbar machen */
  #main-nav .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }

  /* Standard: Liste zu, erst beim Toggle sichtbar */
  #main-nav ul{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    margin: 0;
  }

  /* Falls dein include eine Wrapper-DIV o.ä. nutzt – fange beides ab */
  #main-nav.open ul{ display: flex; }

  /* Menülinks mobile 100% breit */
  #main-nav ul li a{
    width: 100%;
    display: block;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
  }
}