Search Icon on Mobile Flyout Menu problem

May I first say that your main navigation is very confusing; due to a lack of space, a second row is opened – and the contrast is suboptimal if you want it that way;)
My recommendation for your site would therefore be to always use the hamburger menu – even with large screen widths.

How would you like the search to be displayed in the burger menu?
Only as a magnifying glass – or already as an input field?
See: https://pureinstall.webers-testseite.de/

Possible to do both (see link)

make your screen width small to see the hamburger active …

PS : maybe you give that a chance?
Test:

html #top  #menu-item-search a {
  transform: translateX(25px) scale(0.6);
  transform-origin: right;
  width: 85px !important;
}

html #top  #menu-item-search a {
  border: 1px solid #FFF !important;
  font-size: 40px !important;
  color: #8FCCF7 !important;
  text-align: center !important;
  padding: 0px !important;
  position: relative;
  top:1px;
}

html.av-burger-overlay-active #top #menu-item-search a {
  position: relative;
  color: #19304D !important;
  background-color: #27868E !important;
  border: 1px solid #e1e1e1 !important;
}

html #top  #menu-item-search:hover a {
  color: #FFF!important;
  background-color: #237299 !important;
  border: 1px solid #FFF !important;
}

html.av-burger-overlay-active #top #menu-item-search:hover a {
  color: #333!important;
  background-color: #27868E !important;
}

#top .avia-search-tooltip .avia-arrow-wrap {
  top: -20px;
  right: 35px;
}

#top .header_color #menu-item-search .avia-tt {
	background: #237299 !important;
}

#top .header_color #menu-item-search  #searchsubmit {
  background-color: #399bcb;
}