/* Menükasten */
#menu2 {
  background-color:#141414;
  padding:25px 20px 0 20px;
  border:1px solid rgba(96,109,131,0.70);

  box-shadow:
    inset 0 0 4px rgba(96,109,131,0.35),
    4px 5px 10px rgba(0,0,0,0.45);

  margin-bottom:50px;
}

/* Menüliste mit Haltebalken */
#menu2 ul {
  list-style:none;
  margin:0;
  padding:0 0 4px 0;

  display:flex;
  justify-content:flex-start;
  gap:4px;

  background:
  linear-gradient(
  to bottom,
  transparent 0,
  transparent calc(100% - 8px),
  rgba(96,109,131,0.25) calc(100% - 8px),
  rgba(96,109,131,0.25) 100%
  );
}

/* Menüpunkte */
#menu2 li {
  margin:0;
  padding:0;
}

/* Menüknöpfe */
#menu2 a {
  display:block;
  padding:8px 13px;

  color:#B1B1B1;
  text-decoration:none;
  background-color:#424a58;

  border:1px solid rgba(210,220,235,0.35);
  border-bottom:none;

  border-radius:6px 6px 0 0;

  text-shadow:1px 1px 2px rgba(0,0,0,0.7);

  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,0.18),
    1px -1px 3px rgba(0,0,0,0.55);

  transition:color 0.25s ease, background-color 0.25s ease;
}

/* Hovereffekt */
#menu2 a:hover {
  color:#fff;
  background-color:#4b5668;
}

/* Media */

@media (max-width:700px) {

  #menu2 {
    padding:16px 10px 0 10px;
    margin-bottom:30px;
  }

  #menu2 ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    width:100%;
    margin:0 auto;
    padding:0 0 8px 0;
  }

  #menu2 li {
    margin:0;
  }

  #menu2 a {
    font-size:14px;
    padding:7px 10px;
  }

}