f.e.:

.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between !important;
}

.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper::before, 
.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper::after {
  display: none;
}

/*** the flex-items ***/
.responsive #top #wrap_all #av-extra-columns .flex_column {
  flex: 0 1 15%;
  margin: 0px !important;
  margin-bottom: 20px !important;
  margin-left: 0px !important;
  padding: 5px;
  width: unset !important;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 1px 1px 5px #aaa;
}

/*** flex-item media queries - to have on iPad that too ***/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 0 1 30%;
      width: unset !important;
  }
}

@media only screen and (max-width: 519px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 0 1 48%;
      width: unset !important;
  }
}

@media only screen and (max-width: 379px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 1 1 100%;
      width: unset !important;
  }
}

place only the columns that should be part of the flex-container (color-section) and the text-block in an extra color-section before. ( “Las lesiones por trauma …”)

btw: if you only set your custom-ID (av-extra-columns) – and remove the css you set til now
– i will optimize your flex code a bit on that. !

Sorry – i thougth he uses only the better and easier solution of Ismaels link here: https://kriesi.at/support/topic/search-box-in-overlay-search-box/#post-1320840
A combination of both solutions should be avoided.

In my solution the search input field is placed by the shortcode via menu-item – so the inputfiled gets a link functionality. Thats the reason i removed from that input field (only – by the selector ) the href.

and you realy placed the edited file here:

so on my pages it works ? …
https://webers-testseite.de/

i would create a svg ( vectorise ) of your logo – group the “wooden shoes” to a class and set them to display none on header-scrolled

the reason why i ask is – if it is an image placed to a text-block via media library – you can set these options on hovering the image after placement – click that pencil (edit) and fill in what you need: especially the noLightbox class:

besides that – what do you like to obtain by – that on a “shrinking” header?

newH = el_height/1;

Changing only this line – causes the header height to jump when it has covered the scroll distance.
Here you can see the mathematical background of the shrinking header : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/

maybe it is better to hamper the shrinking via Enfold Options – header – Header Behavior : Shrinking Header

One thing is to use the header: logo – center, menu – below
and then change position in dom via child-theme functions.php:

function change_position() { 
?>
<script>
(function($){
	$('#header_main_alternate').insertBefore($('.av-logo-container'));
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_position');

next will be to calculate the shrink amount – i test that in the meanwhile.

the p tag got a top/bottom margin of 0.85em

p {
    margin: 0.85em 0;
}

even if you set this to Zero – there will be a litle distance.
But what if you place a separator/whitespace line above the image with a height of 0.85em ?

and on responsive case – that text under the image – you can set the whitespace to hide on smaller screens.

And because of event.which is deprecated ( i erased that function above ) use better:
( on child-theme functions.php )

function disable_enter_key(){
?>
<script type="text/javascript"> 
(function($) {
	$(document).on('keypress keydown keyup', '#searchform', function(e) {
	  if(e.keyCode == 13) {
		e.preventDefault();
		return false;
	  }
	});
})(jQuery);	
</script>
<?php
}
add_action('wp_footer', 'disable_enter_key');

by the way: on small screens ( mobile devices ) the ajax response list maybe too big for the screen. On default – it is not scrollable that window:

#top #searchform .ajax_search_response {
    max-height: calc(100vh - 200px);  /* test it with fitting settings */
    overflow-y: auto;
    height: auto;
}

disadvantage: maybe you do only hamper enter key on desktop devices ! because on my mobile the text input will be closed by enter key ;)
so maybe that line above to replace by:
$(document).on('keypress keydown keyup', 'html:not(.avia_mobile) #searchform', function(e) {

you are reffering to a page ( you link above https://kriesi.at/support/topic/open-popup-modal-with-button/ ) – there are several snippets – but this is an older topic – you have to replace that line with mine – not to replace the whole code . This is mikes link to Ismaels Post . You see that here is the setting of no-scroll class on the initiating anchor. And you see that there is window on load.
___________
Some info on that.
So you have placed a hidden code block on the page. That codeblock got an unique ID – and an anchor is linking to that ID.
How would a (non-lightbox) link to an ID on the same page behave?
You click it, and it scrolls to the anchor there.
The trick with this modal window is that the html code is inside a code block. Nevertheless, the code block is in a place inside your DOM. So if this codeblock is at the bottom – the modalwindow opens, but still the window scrolls to the place where the codeblock is in the layout. This can be prevented in Enfold, by setting the class no-scoll to that link.

The fact that the background no longer moves with the scroll when the lightbox is open has become standard – or so I thought. (This is what Mike had recommended and belongs to the earlier solution to assign the property overflow-y: hidden to the html.
If you could please post your snippet here, then I can tell you better in this regard what to change.

try to give to the link that initiates the modal window a custom-class ( has to go to the anchor itself ) : no-scroll

PS: pay attention that is a very old topic – in the meanwhile we got jQuery 3.5.1 –
the code jQuery(window).load(function(){ is deprecated
and you had to use instead:

$(window).on('load', function(){

Du möchtest keinerlei Link dort haben?
Ist das wirklich das was ein Besucher deiner Seite erwarten würde, wenn er die Suche anstrengt?
Wenn ich irgendwo auf einer Seite einen Begriff suche erwarte ich auch, dass mir der entsprechende Link dorthin auch angezeigt wird.
Was bezweckst Du damit?
__________
You don’t want to have any link there?
Is that really what a visitor to your site would expect when they search?
When I search for a term somewhere on a page, I also expect the corresponding link to be displayed.
What do you want to achieve with that?

.ajax_search_response a {
    pointer-events: none !important;
}

PS – du kannst auch die ajax Suche ganz abschalten und direkt zur Suchseite weiterleiten.