A few things to keep in mind:
If both the logo and the logo for the transparencies is an inline svg

.logo, .logo a {
  overflow: visible;
}
.logo svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 450px    /*** an absolute value might be necessary for best browser support  ***/
}
#top :not(.av_header_transparency).av_alternate_logo_active .logo .subtext svg {
 opacity:0;
 filter:alpha(opacity=0)
}

the svg code inside in the head section :

<svg alt="transparent Logo Webers Webdesign" title="Webers Webdesign" version="1.1" id="Webdesign-transparent"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" width="100%" height="100%" viewBox="0 0 570 200" 
preserveAspectRatio="xMinYMid meet" xml:space="preserve">

• if width and height is set it will be responsive to the surrounding container.
• the preserveAspectRatio setting determines the way the svg shrinks with its surrounding container (xMinYMid – means it shrinks to the left side but stays in the middle on y-Achsis)

if this is the fact – you do not need to set different display options for the .logo and .logo a
see here: https://webers-testseite.de/

you can use this snippet in child-theme functions.php to place an svg inline instead of the existing img:

// insert svg as logo
function replace_logo_with_svg() {
?>
  <script type="text/javascript">
  (function($) {
    function a() {
      $( ".logo a img" ).remove();
      $.get('/wp-content/uploads/YOUR-LOGO.svg', function(svg){
        $( ".logo a" ).html( svg );
      }, 'text');
    }
    a();
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'replace_logo_with_svg');

I use svg support too – but to replace the logo via the “force replace” of that plugin might be to slow
if you want that only on special pages – you can use if clauses

you need to set some absolute width to the inlins svg logo – and for shrinking headers the display options had to be changed.
f.e.:

.logo svg {
  width: 450px;
}
.logo a {
  display: flex;
  position: relative;
}

I like in particular the navigation, which creates a top level menu item in which omitted menu items are collected as a submenu. Only when it no longer works, the hamburger is offered as an alternative menu.

You see here: https://kriesi.at/support/topic/make-all-mega-menu-images-the-same-size/#post-1305031 that the space for calculating how many list points are next to each other is only made for the row. I assume that the classe at the mega-div itself depends on the maximum value of columns.
In a row, the list points then have a class that determines how many columns are next to each other.
So if you decide to start a new row – this code will work for the most circumstances.

just besides the mega div with 5 columns – here are more general css code:

NOW : we have to see what happens to these rules when there is a second row underneath the first.

edited code to fit for new row in that mega div:

#top #wrap_all #header .avia_mega_div > .sub-menu {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding: 2% 1% !important;
}

#top #header .avia_mega_div li {
    width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}

/*** settings for different mega_div ***/
#top #header .avia_mega_div li.avia_mega_menu_columns_6 { flex: 0 1 14% }
#top #header .avia_mega_div li.avia_mega_menu_columns_5 { flex: 0 1 18% }
#top #header .avia_mega_div li.avia_mega_menu_columns_4 { flex: 0 1 23% }
#top #header .avia_mega_div li.avia_mega_menu_columns_3 { flex: 0 1 31% }
#top #header .avia_mega_div li.avia_mega_menu_columns_2 { flex: 0 1 48% }

#top #header .avia_mega_div li > .mega_menu_title { 
    display: inline-block;
    margin-bottom: 0 !important
}

#top #header .avia_mega_div li > .mega_menu_title a { 
	display: inline-grid;
    overflow: hidden !important;
}

#top #wrap_all #header .avia_mega_div > .sub-menu > li img {
    margin-bottom: 15px !important; 
    -webkit-filter: saturate(0.2);
    filter: saturate(0.2);
}

/*** just to have some indicators for hovering ***/
#top #wrap_all #header .avia_mega_div > .sub-menu > li:hover img {
    -webkit-filter: saturate(1);
    filter: saturate(1);
}

see Mega Menu on page: https://consulting.webers-testseite.de/

i think your code works
try with copy paste

function my_avf_masonry_loop_entry_content($loop_excerpt, $entry) {
  $loop_excerpt = $entry->post_excerpt;
  return $loop_excerpt;
}
add_filter('avf_masonry_loop_entry_content', 'my_avf_masonry_loop_entry_content', 10, 2);

or escape enfold settings – with different padding for first and last li.

Try this instead in your quick css:

#top #wrap_all #header .avia_mega_div > .sub-menu {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding: 2% 1% !important;
}

#top #header .avia_mega_div li {
    flex: 0 1 18%;
    width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}

#top #wrap_all #header .avia_mega_div > .sub-menu > li img {
    transition: 0.3s all ease;
    margin-bottom: 10px
}

and if you like to have some hover indicators on that try in addition:

#top #wrap_all #header .avia_mega_div > .sub-menu > li:hover img {
    transform: scale(1.05);
    transition: 0.7s all ease;
    margin-bottom: 20px
}

Well one thing to mention is that you have a max width of your content of 925px – why do you load images bigger than that.
The one is nearly twice bigger.
The same with the 768px version for the responsive case.
And it seems that you load the images as background and as layers:

you can see it between 768px and 990px

The button that is part of the fullwidth slider can only be placed on default to the left side. But with a bit css in quick css you can shift this button to a right position.

In the Element ( as on most of the advanced Layout Builder Elements ) they have the opportunity to show or hide on 4 differnt screensizes.
So i placed two fullwidth sliders on top:
( click to enlarge the images )


The second fullwidth slider with the oposite setting.

For the button positioning i gave a custom-class to the sliders : homeslider

.homeslider .avia-slideshow-button {
    position: absolute;
    right: 5vw;
    bottom: 5vw;
    padding: 15px 25px !important;
    box-shadow: 2px 2px 15px -5px #000;
    font-size: 18px;
}

it is a wordpress limitation : 2560px – all images bigger than that will be recalculated and saved as xyz-scaled.jpg ( or png etc )
– Enfold creates some image-formats for their used elements ( see functions.php line 185ff : sizes )
– on functions.php lines 246ff – you see that for these images a compression level is set to 100% – : no compression.

That is the reason why the original jpg ( with 2560px width) might be smaller in file-size as the recalculated 1500px image ( featured_large or extra_large ).
You can set this compression level by a small snippet in child-theme functions.php:
e.g. for compression level 55%:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

This will only influence the uploading process. If you want the existing images have the same compression level you might use a “regenerate Thumbnails” Plugin afterwards.

__________________

PS: you can influence this big image threshold via a filter : big_image_size_threshold see here: Link
f.e.:

function increase_big_image_size_threshold( $threshold ) {
    return 3500; // new threshold
}
add_filter('big_image_size_threshold', 'increase_big_image_size_threshold', 999, 1);

by the way @Yigit – I mention it here again now; this should actually be the standard behavior. It makes no sense when you are in the single post to set the link that leads to itself. Maybe you pass this on as a suggestion to Günter.

Did you download the “installable wordpress file only” or the “All files & documentation” zip ? ;)

PS: stell die Seite mal auf Deutsch um !
bin gespannt ob das hier dann noch vorkommt: