if you inspect the svg ( on mac i do take sublime text for it – on pc i can open it with Notepad ++) there are set inline styles ( similar to html – you can do that with xml too )
Illustrator f.e. will do that too but always name the classes : st0, st1, st2 etc – and all settings for the groups will go to that inline style as classes.
i did for the icon : mir0; miretta : mir1 and interiors : mir2
with these classes you can now set new colors via fill option in your quick css.

why do i like to rename the classes. If you have more than one inline svg on your page – and all have this nomenclature – the last inline svg in the DOM will overwrite the classes with its properties.

PPS: if you checked all that – i will return on my testpage to my own logo again.

ok now the font – do you have from the letters an info. …
The Miretta Letters i do not find but we have a good png file of it to vectorize – see your footer.
the Interiors Letter fits well with Mrs Eaves Font.

see now the Logo: https://enfold.webers-webdesign.de/wp-content/uploads/Miretta-Logo.svg

We had one thing to do before you put in as logo file.
Enfold adds this preserveAspectRatio attribute to the logo, because that’s what few people know about svg creation. However, they set it so that x and y value shrink to the left center. But we don’t want to overwrite our statement inside the svg. Therefore Günter set a filter to avoid this overwriting. This comes as a snippet in the child theme functions.php
( if you like to shrink the logo to the left – then you don’t need that snippet – the position of the icon in the middle of the logo will be untouched of that )

function custom_svg_images_get_html( $svg, $attachment_id, $url, $preserve_aspect_ratio, aviaSVGImages $obj_svg_img, $svg_original ){
  $return_default_svg = false;
  if($return_default_svg){
    return $svg;
  }
  return $svg_original;
}
add_filter( 'avf_svg_images_get_html', 'custom_svg_images_get_html', 10, 6 );

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

/*** only if you like to see that the logo is shrinking inside its container to the middle ***/
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

I have now rebuilt this in a quick procedure (very unprecise: Link ). Of course, it is better to have the original layout template. And the font would be good to know, then you can save the part of rebuilding already times. It is only meant as a demo.
Look again at the svg in the DOM.

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}
#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}
#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

and you see each group got his own class – so your can colorize it you like by fill option – and to see the preserveaAspectRatio Effect you had to hamper width shrinking of logo and logo container

#header #miretta .mir0 {
  fill: green
}
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

see example page: https://enfold.webers-webdesign.de/

by the way – your css code :

@media only screen and (min-width: 1210px) {
  .home_post_layout2 article:nth-child(2n) {
    padding-top: 100px;
  }

  .slide-entry-wrap:not(:nth-child(1)) {
    margin-top: -100px;
  }
}

is the reason why on bigger screens this happens:

does the logo exist in a vector format. svg is one but illustrator etc. too.
We need this.
You don’t need to update – it is pure layout and a bit css.
PS: what is the name of the font
( click the image to enlarge )

if you inspect my logo on that page you see that the xml based notation of a svg graphic is nearby a html programming.
it could have parts like style infos and tags. see 1, 2, 3 i have that “bildmarke” in a group tag and the “letters” in different ones. I can address them with css. so my Groups got ID’s. You see on the inspection – that i set the fill-opacity of that “bildmarke” directly to zero.

This is the look of it all seen without fill-opacity zero inside the svg:

Now i can use the enfold class header-scrolled to switch the visibility.
Css code here is:

.header-scrolled #bildmarke {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

.header-scrolled #name_1,
.header-scrolled #sub_heading {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #bildmarke,
#header:not(.header-scrolled) #name_1,
#header:not(.header-scrolled) #sub_heading {
  transition: 1s all ease;
}

i would realize it by creating the logo as svg.
Shouldn’t be too difficult with fonts and a figurative mark.
Depending on where you want your image mark to appear after scrolling, I would then place it on the left or in the center directly inside the svg, and set the fill-opacity of this group to zero.
Then you can even change the fill-opacity animated with the class header-scrolled.

By the way – what font is it – i found similar fonts – but not exactly the same.
see here : https://enfold.webers-webdesign.de/

are you familiar with inspecting the DOM? Look what is your portfoliobox-ID

use this to get influence on image source as a snippet in your child-theme functions.php:

function my_avf_newsbox_image_size( $image_size, array $args, array $instance ){
  if( $args['widget_id'] == ( 'portfoliobox-3' || 'newsbox-2' || 'newsbox-4' ) ){
    $image_size = 'full';
  }
  return $image_size;
}
add_filter( 'avf_newsbox_image_size', 'my_avf_newsbox_image_size', 10, 3 );

______________
just for INFO:
change full to what you like to have ( small, medium, large etc. pp.) you can find the names of the enfold image-sizes on functions.php lines 211ff:

$avia_config['imgSize']['widget'] 		= array('width'=>36,  'height'=>36);			// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		= array('width'=>180, 'height'=>180);		       // small image for blogs
$avia_config['imgSize']['featured'] 		= array('width'=>1500, 'height'=>430 );			// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 );			// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		= array('width'=>495, 'height'=>400 );			// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 );			// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 = array('width'=>845, 'height'=>684 );			// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 	= array('width'=>710, 'height'=>375 );			// images for magazines
$avia_config['imgSize']['masonry'] 	= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321);		        // big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar'] = array('width'=>1210, 'height'=>423 );		// images for fullsize pages and fullsize slider

in case you had to use this with columns ( and said above the dividers are always look inwards the container ) and want it like your example above outside the column give to the column a custom class like: divider-outside

#top .flex_column.divider-outside .avia-divider-svg.avia-divider-svg-top {
  transform: none;
  transform: rotate(180deg);
  transform-origin: top center;
}
#top .flex_column.divider-outside .avia-divider-svg.avia-divider-svg-bottom {
  transform: rotate(0deg);
  top: 100%;
  bottom: unset;
}

So far i understand you is the parent theme look thats what you like to have ( as before ) and after child is active some settings change …

I installed the child theme and followed all the instructions

import parent theme settings – sometimes it is better to do it manually – means : activate again your parent theme – export those settings to your local machine. – Activate the child again and import that file.

The image solution – but what if you like to have an image as background for the whole color-section area – where do you insert it in the alb? this is possible by css – to have multiple background-files : https://webers-testseite.de/multiple-background-images/
but had to be done in quick css for each section.

the alternative solution:
Enfold offers the option to have those dividers on color-sections and on columns.
One difficulty is to have this “border-styling” outside the container – and for columns this is the fact then.

how to have custom svg files as dividers? https://kriesi.at/documentation/enfold/columns/#adding-custom-svg-dividers

i do prefer the custom path to those svg files because i do organize my media library not per year and month. So all media are inside uploads folder.
Maybe a mod or a dev can tell us how to use the path independet solution with the attachment id ?

go to the example page again and see last color-section with the links of the two grass files. https://enfold.webers-webdesign.de/ryan2/#av_section_5
you can download them : open and then save page

this snippet is for making the uploads folder the folder for custom svgs:

function my_svg_path(){
  $path = get_site_url().'/wp-content/uploads';
      return $path;
}
add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10 );

and now to register the custom svg files with their options:

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
$custom_shapes = array(
	'grass'		=> 	array(
				'key'			=> 'grass',
				'title'			=> __( 'Grass', 'avia_framework' ),  // this notation with avia_framework offers the possibility to translate to other languages
				'has_width'		=> true,
				'has_flip'    	=> true,
				'attachment'	=> 1,
				'filename'		=> 'grass'
				),

	'grass-semi' => array(
				'key'			=> 'grass-semi',
				'title'			=> __( 'Grass Semi', 'avia_framework' ),
				'has_width'		=> true,
				'has_flip'    	=> true,
				'attachment'	=> 2,
				'filename'		=> 'grass-semi'
				),

	);
return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

now you got on your color-section ( and colums too ) on layout – svg-dividers the chance to insert your own custom svg:

is that image enough info – or do you need further help?
( click to enlarge the image )
Select your layer with the text – on the right side you got that:

As said above – i had to see the concerning DOM to give exact advice.
i actually found the takeover of the tags quite nice. So you have even more design options.
i don’t know why my code is not working on your test page, because the structure has not been changed to Enfold5.
The difference is – that i use the magnificPopup api to give the popup title a different source.

Maybe it is because i set the titleSrc to false and have my own markup ( to avoid lightbox counter )

function popup_tooltips_with_links() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function(){
    $('.av-image-hotspot_inner').magnificPopup({ 
      type: 'image',
      mainClass: 'avia-popup',
      closeOnContentClick:  false,
      midClick: true,
      gallery: {
      enabled: true
      },
      image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                    '<div class="mfp-close"></div>'+
                    '<div class="mfp-img"></div>'+
                    '<div class="mfp-bottom-bar">'+
                      '<div class="mfp-title"></div>'+
                    '</div>'+
                  '</div>',
      },
      callbacks: {
        markupParse: function (template, values, item) {
          values.title = item.el.closest('.av-image-hotspot').attr('data-avia-tooltip');
        },
      },
  }); 

  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'popup_tooltips_with_links');

i had to see the page it belongs. When seeing numbers on recurring elements i tend to use an index in each function.
But it is hard to give advice without the concrete page – so maybe Ueli send me an email if he does not like to make the link public.

Is it similiar to that demo page: https://kriesi.at/themes/enfold-restaurant/reservations/ but with links on the tooltips ?

try something like this:

function popup_tooltips_with_links() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function(){
    $('.av-image-hotspot_inner').magnificPopup({ 
    type:               'image',
    mainClass:          'avia-popup',
    closeOnContentClick:  false,
    midClick:         true,
    gallery: {
      enabled:      true
    },
    callbacks: {
      markupParse: function (template, values, item) {
        values.title = item.el.closest('.av-image-hotspot').attr('data-avia-tooltip');
      },
    },
  }); 

  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'popup_tooltips_with_links');

See: https://enfold.webers-webdesign.de/tooltips/
( i did not want on that lightbox a counter – so i got my own markup here )

If you do not like to show the tooltip:

.avia-tooltip.av-tt-hotspot {
  display: none !important;
}

but think of – that breadcrumbs are hampered on transparent headers.

first – see Mikes hint –
because we now have inline svg files – you maybe change the fill from a given path with change of darkmode.
second : the update must be a big one – because the click function is deprecated since jQuery 3 :

// $('.darkmode-toggle').click(function() {
// use instead:
$('.darkmode-toggle').on('click', function(){