try:

.responsive #top #section-container-width .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
}

.responsive #top #section-container-width .avia-image-diff-container {
  margin: 0 !important;
}

.responsive #top #section-container-width .av-image-diff-wrapper,
.responsive #top #section-container-width .av-image-diff-wrapper img {
  width: 100%;
  max-width: 100% !important;
  margin: 0
}

your images are 1024px width – so you had to stretch them to the container width.

use the font-manager of enfold – it works great – even for variable fontfiles

first – if you compress your font-files on a mac (OSX) it will include even the typically non visible files on OSX folder. This is what you see – when you are talking about Font: MACOSX ( font-family: macosx ).
But your font-file of berthold should be there too.

I do not know if fontsquirrel can convert otf files of variable Fonts to ttf or woff2.

just one moment – i’m looking for an older post of mine. …

https://kriesi.at/support/topic/how-to-submit-and-use-custom-fonts/#post-1470894

you can download that script app – just place it on your desktop – and drag & drop files there to zip.

Or use keka to compress your font folder. And do not include invisible files

after compression it should show inside that font zip file only the fonts – and nothing else:

if you would like to have it always visible just remove the hover pseudo-class:

here is the solution for sub-menu

#top .menu-item-has-children:hover:before {
  position: absolute;
  top: auto;
  bottom: -4px;
  left: 20px;
  display:   block;
  content: "\e886";
  font-size: 36px;
  line-height: 24px;
  font-family: 'entypo-fontello';
  color: inherit;
}

maybe you can bring that arrow to your sub-menu container. But then you can not center it below top-level menu text.
But if you are satisfied by a fixed distance from the left (f.e. 20px ) this is a not so complex solution.

or you set the avia-arrow-wrap and avia-arrow to show- and fill with background-color and border-color.

there is no extra class on top-level menu-item if a sub-menu is open. So this is probably only usable for modern browsers.
Maybe a solution to bring an extra class to top-level menu-item via script seems to be better.

try:

#top .menu-item-has-children > a {
  display: flex;
  justify-content: center;
}

#top .menu-item-has-children > a:hover:after,
#top .current_page_item.menu-item-has-children > a:after,
#top .menu-item-has-children:has(ul.sub-menu[style*="visible"]) > a:after {
  position: absolute;
  top: auto;
  bottom: -4px;
  display:   block;
  content: "\e886";
  font-size: 36px;
  line-height: 24px;
  font-family: 'entypo-fontello';
  color: var(--enfold-main-color-primary);
}

see here on “our clinic” menu-item: https://basis.webers-testseite.de/

hm i did not try that because in class-avia-slideshow.php this parameter is missing on the array:

$video_data = apply_filters( 'avf_youtube_video_data', array(
	'autoplay' 		=> 0,
	'videoid'		=> $video_id,
	'hd'			=> 1,
	'rel'			=> 0,
	'wmode'			=> 'opaque',
	'loop'			=> 0,
	'version'		=> 3,
	'autohide'		=> 1,
	'color'			=> 'white',
	'controls'		=> $controls,
	'iv_load_policy'=> 3
));

but: as always, it only works muted.
Thanks Ismael – i will keep that snippet in mind. btw: then you can set an end time too:

add_filter( 'avf_youtube_video_data', function( $data ) {
    if( !empty( $data['videoid'] ) && $data['videoid'] === 'G0k3kHtyoqc' ) {
        $data['start'] = 15;
	$data['end'] = 40;
    }
    return $data;
});

However, the video behaves this way only when first called up. Once the slideshow has run through its first cycle, these settings are no longer taken into account. Furthermore, if you have selected autoplay, the video will be interrupted after the slider autorotation duration and the next slide will be called up.

you can insert to that input field:

<iframe src="https://www.youtube.com/embed/grA5XmBRC6g?start=50&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>

but to have autoplay – you have to mute it
yes the whole iframe code works. without the mute=1 it will wait until you click the start button (then with sound)

But that’s not really a good solution. Because the video doesn’t start again when you autorotate to that slide again.

if you like to have the pipes between the links:
adjust the new switch point when the links goto a twoliner:

@media only screen and (max-width: 467px) {
  #header {
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 

and for phone-info:

/******  styling the phone-info links with pipe separator  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  gap: 0 40px; 
}

#top #header_meta .phone-info a {
  flex:  1 1 auto;
  position: relative;
}

#top #header_meta .phone-info a:not(:last-child)::after {
  content: '|';
  font-size: 18px;
  position: absolute;
  right: -24px; 
  color: #FFF;
}

There is a lot more to think of.
First – to style the header_meta with your phone-info entries.
To prevent breaks occurring where it looks unsightly, it would be a good idea to replace your entries completely with this line:

<a style="white-space: nowrap" href="/over-ons/">Over Ons</a><a style="white-space: nowrap" href="/veelgestelde-vragen/">Veel gestelde vragen</a><a style="white-space: nowrap" href="#">Nieuws</a><a style="white-space: nowrap" href="tel:+31434551268">T: +31 (0)43 455 12 68</a>

after that we will see if the pipes are neccessary.

On mobile devices, these links become two lines—and this must also be taken into account with the padding-top of main.

After you have these new phone-info – remove your code from above and try:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 110px !important;
  }

  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }

  #header_main {
    border-bottom: none;
  }

  #header:not(.av_header_transparency) #header_main {
    box-shadow: 0 5px 10px #eee;
  }

  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }

  .responsive #top #avia-menu > .menu-item-avia-special > a {
    height: 80px !important;  ;
    line-height: 80px !important; 
  }

  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #FFF !important;
  }  

  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #FFF !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #FFF;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
}

@media only screen and (max-width: 767px) {
  #header {
    position: fixed !important;
    height: 140px !important;
    max-height: 140px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet #top #main {
    padding-top: 140px !important;
  }
}

@media only screen and (max-width: 435px) {
  #header {
    position: fixed !important;
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 
/****** End *************/

/******  styling the phone-info links  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 0 30px;
}

And you don’t like to make it public? Perhaps other participants could also benefit from this.
Is it nearby my approach on: https://kriesi.at/support/topic/restricted-product-displaying-in-search-results/#post-1491770