one of the logo graphic could not be found:
…/wp-content/uploads/2024/07/Logo-xyz-350x85px_w.png

why don’t you use a svg for that too?

then the knife:

#top .avia-menu.av_menu_icon_beside {
  border: none !important;
}

For someone who has only started 8 topics, I probably wrongly assumed that I was dealing with a newbie. I apologise for that. Some users come here as beginners , others are very experienced – so there is no need to be snarky here, as no one posts an expertise of their skills here, we can never know at what level we must answer. My question about the selectors used in the rule you applied also went unanswered, so unfortunately I can’t help you further.

borders are always inside the container.
so maybe show me your code with selectors to inspect. The screenshot i do not see – as a participant.

see on top: https://webers-testseite.de/grid-rows/

or try :
remove the background-image – and your settings for: #top .av_header_transparency .header_bg

html.html_header_transparency #top #header:not(.av_header_transparency) .header_bg {
  background-color: rgba(0,0,0,0.7) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.html_header_transparency #top .av_header_transparency .header_bg {
  background-color: rgba(0,0,0,0.4) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

this is a kind of frosted glas effect – it blurs the background with a given overlay color.

you like to have a transparency header – on scroll the transparency goes to a given background-color.
the transparency header should have an overlay pattern?

or do you only like to have f.e. :
(Remove the pattern image)

#top .av_header_transparency .header_bg {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#top .header_bg {
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
  background-color: transparent !important;
}

#top .av_header_transparency .header_bg {
  background-image:linear-gradient(to top,rgba(0,0,0,0.001) 0%,rgba(0,0,0,1) 70%);
  background-color:transparent !important;
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out
}

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;
}

when creating these svgs for the dividers – the opaque area must cover the entire width and be at the top of the svg.
if you have responsive svgs, then the following should be at the top of the svg tag : preserveAspectRatio="none"

if you look at the silouette of my home town on my example page, it would be awful if the width remained at 100% but the height could be set variably. in this case i have set: xml:space="preserve" preserveAspectRatio="xMidYMin meet"