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

Then I sincerely hope that translation errors like those in “The Hungarian Phrasebook” don’t creep in.
https://youtu.be/grA5XmBRC6g?si=Mqnuk1FpjPJAipeQ&t=50

Please leave technical terms untouched, as they are commonly used.
A button is simply a button, and you can hover it, etc. …

If you absolutely want such translations, get the corresponding Lang file from the Lang folder (only po is needed to edit).
Open the po-file in f.e. poedit (free po editor) Search for your Phrase – f.e. “Show Fullscreen Button (HTML5 videos)”
Enter your translation and save (poedit will save the new po-file and generates the concerning mo-file too).
Upload these files to your child-theme/lang/ folder and put this to your child-theme functions.php:

function overwrite_language_file_child_theme() {
    $lang = get_stylesheet_directory().'/lang';
    return $lang;
}
add_filter('ava_theme_textdomain_path', 'overwrite_language_file_child_theme');

keep the sequence of variables inside your translation.
F.e. : But we are proud to say that %s contributed %s entries already.
first the name of the author for %s – then the number of contributions for %s

e.g. for german translations:
Wir sind jedoch erfreut, dass %s bereits %s Beiträge beigesteuert hat.
and not:
Wir sind jedoch erfreut, dass bereits %s Beiträge von %s beigesteuert wurden.

i do not see where your code misses some settings:
f.e. where does this comes from?

#top .av_inherit_color * {
  color: inherit;
}

try in your quick css:

#top .av-large-testimonial-slider .avia-testimonial_inner {
    display: inline-table;
}

#top .av-large-testimonial-slider .avia-testimonial_inner * {
  color: #FFF;
}

#top .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
  color: #FFF;
  opacity: 1 !important;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
  fill: #FFF !important;
  opacity: 0.5;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon:hover svg:first-child {
  opacity: 1
}

Give your visitors a bit more time to read the testimonial – ( autorotation is to fast )

__________
btw:
you entered the custom class with a dot on Link
Enter it without
nevertheless it is added correctly to avia-testimonial-wrapper

there are some Plugins that will offer such a function: CatalogX (Freemium) or WooCommerce Catalog Mode
or you might use code snippets – but it is not as easy as it sounds. There are still backdoors that can be used to find something.

but this might give you a chance to exclude some Products by slugs ( f.e.: members-only or premium)

This is what an AI like Claude would give to you:

// 1. Hide from queries
add_action('pre_get_posts', 'hide_member_products_from_guests');
function hide_member_products_from_guests($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }
    
    if (!is_user_logged_in()) {
        $tax_query = $query->get('tax_query') ?: array();
        
        $tax_query[] = array(
            'taxonomy' => 'product_tag',  // product_cat → product_tag
            'field'    => 'slug',
            'terms'    => array('members-only', 'premium'),  // Deine Tag-Slugs
            'operator' => 'NOT IN'
        );
        
        $query->set('tax_query', $tax_query);
    }
}

// 2. Visibility Filter
add_filter('woocommerce_product_is_visible', 'filter_member_products_visibility', 10, 2);
function filter_member_products_visibility($visible, $product_id) {
    if (!is_user_logged_in()) {
        if (has_term('members-only', 'product_tag', $product_id)) {  // product_cat → product_tag
            return false;
        }
    }
    return $visible;
}

// 3. Block direct access
add_action('template_redirect', 'block_member_product_access');
function block_member_product_access() {
    if (!is_user_logged_in() && is_product()) {
        global $post;
        if (has_term('members-only', 'product_tag', $post->ID)) {  // product_cat → product_tag
            wp_redirect(wp_login_url(get_permalink()));
            exit;
        }
    }
}

// 4. Exclude from search (maybe an ajax pendent is needed too)
add_filter('posts_where', 'exclude_member_products_from_search', 10, 2);
function exclude_member_products_from_search($where, $query) {
    global $wpdb;
    
    if (!is_admin() && $query->is_search() && !is_user_logged_in()) {
        $where .= " AND {$wpdb->posts}.ID NOT IN (
            SELECT object_id FROM {$wpdb->term_relationships}
            INNER JOIN {$wpdb->term_taxonomy} ON {$wpdb->term_relationships}.term_taxonomy_id = {$wpdb->term_taxonomy}.term_taxonomy_id
            INNER JOIN {$wpdb->terms} ON {$wpdb->term_taxonomy}.term_id = {$wpdb->terms}.term_id
            WHERE {$wpdb->terms}.slug IN ('members-only', 'premium')  // Deine Tags hier
            AND {$wpdb->term_taxonomy}.taxonomy = 'product_tag'  // product_cat → product_tag
        )";
    }
    
    return $where;
}

// 5. Exclude from REST API 
add_filter('woocommerce_rest_prepare_product_object', 'hide_member_products_from_api', 10, 3);
function hide_member_products_from_api($response, $object, $request) {
    if (!is_user_logged_in() && has_term('members-only', 'product_tag', $object->get_id())) {  // product_cat → product_tag
        return new WP_Error('rest_forbidden', 'Zugriff verweigert', array('status' => 403));
    }
    return $response;
}

just for understanding – these are the default values from loop-author.php:

// Default arguments for Author Loop
$default_args = array(
    'type'              => 'grid',
    'columns'           => 4,
    'items'             => get_option('posts_per_page', 12), // WordPress setting, fallback: 12
    'contents'          => 'excerpt_read_more',
    'preview_mode'      => 'auto',
    'image_size'        => 'portfolio',
    'paginate'          => 'no',
    'class'             => '',
    'show_modified_date' => 'no',  // 'yes' or 'no' - shows "Updated: XX" if post was modified
    'orderby'           => 'date',  // 'date', 'modified', 'title', 'rand', 'comment_count', 'menu_order'
    'order'             => 'DESC',  // 'DESC' (newest first) or 'ASC' (oldest first)
    'fallback_image'    => 'placeholder',      //  'placeholder'  or URL to fallback image 
    'post_types'        => array('post'), // Array: array('post'), array('portfolio'), or array('post', 'portfolio')
);

// Content Options for 'contents' parameter:
    // 'title'                  - Title only
    // 'title_read_more'        - Title and Read More button
    // 'only_excerpt'           - Excerpt only (no title)
    // 'only_excerpt_read_more' - Excerpt and Read More button (no title)
    // 'excerpt'                - Title and Excerpt
    // 'excerpt_read_more'      - Title, Excerpt and Read More button (default)

if you like to have it this way (grid, 4columns, exerpt with readmore, only posts ordered by date – newest first) you do not need to set the filter.
Then only the second part is needed inside functions.php.

The filter could do more – you can even differ between authors – f.e by author name. :

// 1. Layout for different authors by ID
add_filter( 'avf_author_loop_args', function( $atts, $context ) {
    if( $context == 'author' ) {
        // Common settings for all author pages
        $atts['items']             = -1;
        $atts['image_size']        = 'gallery';
        $atts['contents']          = 'excerpt_read_more';
        $atts['post_types']         = array('post', 'portfolio'); 
		
	// Fallback-Image from Media Library (Attachment-ID)
        $fallback_id = 2052;  // Your image ID from Media Library
        $fallback_img = wp_get_attachment_image_src($fallback_id, $atts['image_size']);
        $atts['fallback_image'] = $fallback_img ? $fallback_img[0] : 'placeholder';
        
        $author_slug = get_query_var( 'author_name' );

        // Individual configuration for a specific author
        if( $author_slug == 'guenni007' ) {
            $atts['type']              = 'grid';
            $atts['columns']           = 3;
        } 
        else {
            // default setting for the rest
            $atts['type']              = 'list';
        }
    }
    return $atts;
}, 10, 2);

the fallback image i get from media-library with the attachment ID
Advantage of this solution – the fallback image is based on the selected image size setting.

see:
grid for guenni007: https://basis.webers-testseite.de/author/guenni007/
list for johndoe: https://basis.webers-testseite.de/author/johndoe/

So far, it only displays posts – now I’m trying to implement a way to select the post type via $atts['post_types'] – so the author page could show all posts and portfolios from an author.
btw. Something that handles the standard file ‘loop-author.php’ in exactly the same way: it only displays the posts.
Will I manage to fix that too?

Edit : see solution on: https://kriesi.at/support/topic/how-to-customize-the-author-page/#post-1491667

just a moment – pastebin code is edited now _ the read-more button is buggy. …
…. it is fixed now – download from above

… maybe we should take out the readmore button – and place it as a sibling to av-author-grid-content. So we can then position it to always be on the bottom of equal height articles. … more to come

i try now to have a pagination by atts settings.

All my installations run without jQuery Migrate — all plugins and themes are up to date — I don’t think jQuery Migrate is needed.
You can test it

by the way: if you are on instagram page – they have as favicon a png file:

next : if you have the burger icon on the left – maybe you prefer to have that slide-out too from the left:

.av-burger-overlay-scroll {
  width: 250px;
  left: -250px;
  max-width: 100%;
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

.html_av-overlay-side .av-burger-overlay-scroll {
  left: 0;
  max-width: 100%;
  transform: translateX(-250px);
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

Sorry, no private content for me—I’m just a participant as you are. So you’ll have to wait until the mods respond to you.

btw. maybe your filter add_avia_builder_post_type_option had to be activated first.

add_theme_support('add_avia_builder_post_type_option' );

The problem this inserting it from media-library is – that inside the Original svg of Instagram a clipPath or mask is used. both – mask and clip-path are used via url and ID of that path. If there are more than one instance of the icon on the page – the ID is not unique anymore. And browser do not render them.
Enfold (as you can see in the DOM) on using Logo left – Menue below generates two navigations – the one is set to display: none on desktop and vice versa for responsive case ) svg two times in the DOM then clip-path won’t work.

I have never seen such a poorly made SVG intended for the web. The shape could have been filled using a direct gradient, but the folks at Meta apparently didn’t want that.

you are talking about this extra tooltip?

remove the title tag from the anchor by:

function remove_postnav_title_tags(){
?>
<script type="text/javascript">
(function($) {
	$(window).on('load', function(){
		$('a.avia-post-nav').removeAttr('title');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_postnav_title_tags');