try to play a little and start with: height and font-size

#top .av-icon-circles-container .avia-icon-circles-icon {
  text-align: center;
  font-size: 50px;
  line-height: 0 !important;
  height: 80px;
  width: 80px;
  margin: -33px;
}

#top .avia-icon-circles-icon::before {
  position: relative;
  top: 49%;
}

.main_color #top .av-icon-circles-container .avia-icon-circles-icon.active {
  border: 3px solid #608a12;
  transform-origin: center center;
}

it might be necessary to move the icon inside the circle ( via pseudo-container : before ) . Since I can’t see your private message, I can’t give you any better advice.

put this to your quick css:

#top .avia-content-slider .slide-meta-time {
  display: none;
}

the change on color of the h1 had to be set in quick css. But with that filter here the option if framed or not is preserved.

function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ){
  if( $context == 'avia_slideshow' ){
    $args['heading'] = 'h1';             
  }
  return $args;
}
add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );

but i do not see how to differ between fullscreen and fullwidth sliders – the filter is inside the helper: class-avia-slideshow.php
and f.e. no extra_args are set.

maybe the filter avf_slideshow_title can be used – but i think it is only to change the content of title .

you can do that by adding the html entities or by adding it by copy and paste.
But if you are writing in text-block editor and using the standard key ( shift 2 ) from your keyboard – it will insert the english opening and closing double quotes.
The language than decides how they will look like on frontend – if you choose french as page language they will automatically translated to those Guillements. in German we have those curly brackets ( and the ampersand function only changes the straight double quotes to curly double quoutes by wrapping in a span with class ) etc. pp.
But now – if your page is set to german and you like to have those guillemets this is an option to do so.

PS:
On mac german keyboard ( QWERTZ)
« : option q
» : shift option q

Yes – there is a definition for those quotes in enfold-functions.php with avia_ampersand function.
but even if i overwrite that function ( as a pluggable function – it is easy to do ) i can not set for quillemets ( » and. « )

i think that the lang setting for that page is disturbing the way it might work.
…

if you are using the de_X setting for your page try this in your child-theme functions.php:

for copy and paste the function ( do not copy the leading <?php see pastbin : https://pastebin.com/JQfUCDqZ

PPS: all credits goes to : https://www.buchundberger.net/blog/stefan-buchberger/

hm – tested it on newest Enfold – seems not to work as expected – and even the known snippet of generating groups – does not work anymore in that manner that even if there are images in text-block element with that group-class are together in one Group.
Between Image Alb even in different color-sections the snippet works!

(on using group-1, group-2 etc. )

function handle_lightbox_groups_in_gallery(){
?>
<script>
(function($){
    $(window).on('load',function() {
        $('.group-1 .lightbox-added').attr('data-group', '1');
        $('.group-2 .lightbox-added').attr('data-group', '2');
        $('.group-3 .lightbox-added').attr('data-group', '3');
        $('.group-4 .lightbox-added').attr('data-group', '4');
        $('.group-5 .lightbox-added').attr('data-group', '5');
        $('.group-6 .lightbox-added').attr('data-group', '6');
        $('.group-7 .lightbox-added').attr('data-group', '7');
        $('.group-8 .lightbox-added').attr('data-group', '8');
        // …

        var groups = {};
        $('.lightbox-added').each(function() {
          var id = parseInt($(this).attr('data-group'), 10);
          if(!groups[id]) {
            groups[id] = [];
          }
          groups[id].push( this );
        });

        $.each(groups, function() {
          $(this).magnificPopup({
              type: 'image',
              mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
              closeOnContentClick: false,
              closeBtnInside: false,
              gallery: { enabled:true }
          })
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'handle_lightbox_groups_in_gallery');

You do not need to make absolute settings for the scope of the slide out. Relative settings are also accepted here:
In the meantime, the distribution of the property: backdrop-filter is very good, so that it is now quite possible to use it with high browser support.
It will offer you a kind of frosted glas effect for the slide-out.

@media only screen and (min-width:990px){
  .av-burger-overlay-scroll {
    background-color: rgba(255,255,255,0.7) !important;
    width: 40% !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

So you don’t have to set this class for all home pages, just leave the lines included.
For the other grid-row elements you then have to set the custom-class gridrow-special

function get_rid_of_flex_cell_inner(){ 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('#top.home #av-layout-grid-1 .flex_cell_inner > *').unwrap();
    $('#top .gridrow-special .flex_cell_inner > *').unwrap();
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'get_rid_of_flex_cell_inner');

@media only screen and (min-width: 768px) {
  .responsive #top.home #wrap_all #av-layout-grid-1 .flex_cell,
  .responsive #top #wrap_all #main .gridrow-special .flex_cell {
    padding-bottom: 100px !important
  }
  #top.home #av-layout-grid-1 .avia-button-wrap,
  #top #wrap_all #main .gridrow-special .avia-button-wrap {
    position: absolute;
    top: calc(100% - 80px);
    width: 33%;
  }
}

It goes without saying that if you take 4 grid cells you have to adjust the width of the button-wrapper to 25%.
If you switch at 989px – you need to change the media query to that as well.

the problem with it is the flex_cell_inner container – it hampers the absolute positioning of the button-wrapper.

if you need this more than once – give a custom-class to those grid-rows – i now adjusted the code to that page only by ID.
so to get rid of that container under preserving the child elements put this to your child-theme functions.php

function get_rid_of_flex_cell_inner(){ 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('#top.home #av-layout-grid-1 .flex_cell_inner > *').unwrap();
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'get_rid_of_flex_cell_inner');

put this to your quick css:

@media only screen and (min-width: 768px) {
  .responsive #top.home #wrap_all #av-layout-grid-1 .flex_cell {
    padding-bottom: 100px !important
  }
  #top.home #av-layout-grid-1 .avia-button-wrap {
    position: absolute;
    top: calc(100% - 80px);
    width: 33%;
  }
}

EDIT: – sorry i see that you got a lot of translations – so best ist to give a custom-class to that grid-row ( on all translated pages )
e.g. : gridrow-special and use that

If it is only that page – it is on all translations the home page – so #top.home will be a good selector for it – see above

Yes mike – but this is half the solution it could be.
Better would be :

maybe it is possible for a mod to change the code for a more global use, in the sense that only pages without transparent logo will have this filter.

do you need inline svg for that alternative logo – or is a img src ok?
see: https://webers-web.info/impressum/

the trick will be to insert another subtext logo. But this logo is not in dependency to av_header_transparency but to header-scrolled class.

Edit: just a moment – i had to optimize the codes

https://vimeo.com/832590165

And you used that option on editing the images slides ( click on those images ) on that second popup window to get the overlay:

Doing this on the slides itself is nice to change the overlay color for each image/video

you want only an image – or a slideshow as body background?
A fullscreen image is easy to have ( if you have on general Layout a boxed or fixed frame layout) – on enfold options: general styling : “body background”
You have all those options to insert even a seamless background-image and have background-repeat etc.
It is then simply implemented by means of a newly created extra container: bg_container.

.bg_container {
  background-image: url(/wp-content/uploads/…);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
}

this is the fixed version – but you can have different options.
see on css-tricks: https://css-tricks.com/perfect-full-page-background-image/

The problem on that is that enfold organizes the entries (artikles) on a grid layout by column setting.
See here example page of enfold grid layout blog: https://kriesi.at/themes/enfold-2017/blog/blog-default/
if you take a look on developer tools you see that on a 3column grid groups of 3 entries are build to have that layout:
in a three-column grid layout, 3 entries each have their own wrapper

(click to enlarge the image)

so if you have the chance to handle the whole grid as one wrapper and have some media queries to style them you had to bring all entries to one wrapper
put this to your child-theme functions.php

function wrap_articles_in_one_flex_container(){ 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
        $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
    });
    $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'wrap_articles_in_one_flex_container');

And then style that one wrapper f.e. with flexbox layout on quick css:

#top .avia-content-slider .slide-entry-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top.blog .slide-entry::before, 
#top.blog .slide-entry::after {
  display: none;
}

#top .avia-content-slider .slide-entry-wrap .slide-entry {
  flex: 0 1 calc(33% - 30px) ;
  margin: 0px 15px 30px !important;
  width: unset !important;
  padding: 0px !important;
}

@media only screen and (max-width:989px) {
  #top .avia-content-slider .slide-entry-wrap .slide-entry {
    flex: 0 1 calc(50% - 30px);
    margin: 0px 15px 30px !important;
  }
}

@media only screen and (max-width:767px) {
  #top .avia-content-slider .slide-entry-wrap .slide-entry {
    flex: 0 1 100%;
    margin-bottom: 30px !important;
  }
}

see here : https://webers-testseite.de/blog/

One thing to mention: a paginated blog will not work correctly that way – because the amount of entries each page will not be influenced.

PS: On the example page of enfold there is an audio entry – and on this one the width calculation does not work because of a setting by Enfold. On this page it would be necessary to set the width:

#top .avia-content-slider .slide-entry-wrap .slide-entry .mejs-container {
  min-width: unset !important;
  width: unset !important;
}