And you realy uploaded a fontello font to your enfold?
the font is called fontello – that is what you can see on the enfold options page:

because default font-name of enfold included fonts is entypo-fontello.
if you have generated it on fontello.com all zip files will have a fontello-name – besides that you had to put in a font-name there on generating. This inserted font-name will be the one shown on that enfold-list.

in connection with Enfold I work exclusively with the Classic Editor – then of course in ALB mode.
I can’t see how the error should have looked like, but I never had problems with the Classic Editor.

sorry i’m participant as you are – so no private content for me .
i thought that you concern to the shortcode part – it is the equivalent of your layout above.

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.