do you have a svg on your logo ?
you can see here a playground with your logo – but if we had a svg we could set single parts of the logo to not be seen when the header is scrolled.
https://webers-testseite.de/cynthia/tuddal/

i only have styled it yet for the wider screens – but when you got the svg this comes next.

on the link of the masonry items – you have a class: portfolio_entries-xyz the xyz is the portfolio “category” ( this is actually a taxonomy)

you can place it in a pseudo-container like:
see here: https://webers-testseite.de/pureinstall/portfolio-masonry/
(this was originally a help to place the selection next to the masonry.)

.portfolio_entries-buecher .av-masonry-outerimage-container:before {
  content:"";
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://webers-testseite.de/pureinstall/wp-content/uploads/Buecher.png);
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center 30%;
  z-index: 2;
}

and: on posts and categories the class is: category-xyz the category name is the xyz

for background-attachment : fixed
there is a better way to have it – because on IOS Devices – this looks strange – on scrolling it flickers
( google on that background-attachment : fixed and Safari Browsers )

there is a little trick to have that: the background-image that should have background-attachment : fixed goes to the pseudo container :before –
and that container is set to position fixed!
So the code above will look like this ( for my page-id ) :

#top.page-id-38479 {
  background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_bg.jpg);
  background-repeat: repeat;
  background-position: center center;
  background-attachment: scroll;
}

#top:before {
  background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_background_treatments.png);
  background-repeat: repeat-y;
  background-position: left top;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

#top.page-id-38479 #main {
  background-color: rgba(255,255,255,0.2) !important;
}

#top.page-id-38479 .main_color {
  background-color: transparent !important;
}

.html_stretched #top.page-id-38479  #wrap_all {
  background-color: transparent !important;
}

with the fixed image on repeat-y now

First of all – what kind of layout do you have choosen on Enfold: General Layout : a stretched or a boxed or at the end a fixed frame layout?
If you have a boxed layout f.e. – you will have then on General Styling a “Body Background” Option

But this is only one part of your example page.
If you like to have a full transparent content – like on your example page there had to be a lot of css settings to be made.

best would be if you start with that boxed layout – it is possible to have this with a fixed frame.
It is hard to have this with a slideshow in the background..
That was my old attempt to reach this – but the slideshow timing will not be synchronized the more time passes:
https://webers-testseite.de/goldfinger/
( These are two identical slideshows that runs on theory synchronized – the one on top shows only a narrow strip and has a high z-index – the other has a low z-index)
But that is not necessary for your solution with a static background-image.
It will be best to help you if we can see the page it concerns.
it is easy to have a body background-image via quick css f.e. and even to have more than one background-image on the same container:
you see on that page how it is done for a 1/1 container with three background-images and different settings :
https://webers-testseite.de/multiple-background-images/

in other words it is possible to have this http://naturkosmetik-studio.at/Images/IMG_background.png as one background pattern that is set to repeat or not to scroll away – and those leaves too but with no repeat.

maybe you have a /products etc in your bin!
empty that bin and try again

I changed the code a little bit above. So that you don’t have only one Acceptance checkbox – assign a class to the IDs – here I have chosen acceptance.
You have to be careful when assigning multiple elements – they are separated by commas but are enclosed in quotes as group.
$('#avia_5_1 , #avia_6_1').addClass('acceptance');
all your acceptance checkboxes must be listed here

now you can also see the advantage over .filter : Only if all elements with the class pass the filter, the statement is considered true.
see again: https://webers-testseite.de/contact/

function change_submit_button(){
if(is_page('123456')){
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){ 
	$('#avia_5_1 , #avia_6_1').addClass('acceptance');
	$(".acceptance").prop('checked', false);
	$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
			'background-color': 'red',
			'pointer-events': 'none',
			});

	$(".acceptance").on( "click", function(){
	    var a = $(".acceptance" );
	    if(a.length == a.filter(":checked").length){
	        $('form.avia_ajax_form').find('input[type="submit"]').val("Submit").css({
			'background-color': 'green',
			'pointer-events': 'auto',
			});
		}
		else{
			$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
			'background-color': 'red',
			'pointer-events': 'none',
			});
		}
	});
});
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'change_submit_button');

and i guess you have some troubles with : CORS: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-

on my test page is stayes at the menu.
can you try this:

function shift_search_icon(){
?>
<script type="text/javascript">
(function($){
	$('#avia-menu').find('#menu-item-search').clone().appendTo('#menu-menu3');
         $('#avia-menu').find('#menu-item-search').remove();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'shift_search_icon');

just to see if detach() is the problem

ok – we posted the same time.
How did you create that footer? is it a page as footer ?

as far as i know
1) the enfold main menu is always: .main_menu
( a class here because if you got menu below logo there will be an extra container ( #header_main_alternate) for that cloned menu)
2) the top menu : #avia2-menu
3) footer menu: #avia3-menu
these are theme_locations not names of the menu.

are you familiar with developer tools of your browser? Inspect the footer menu and see what ID this menu has got.

but nevertheless – have you seen my concerns about the position?

You like to have an acceptance button – but for enfold contact form?

By the way – dear Dev’s – might be a nice to have thing: acceptance Checkbox

You had to know the ID of the checkbox you like to have as an acceptance button. ( on my example it is checkbox with ID: avia_5_1 )
if you are not familiar with developer tools – you even can count from top to bottom – left to right. – you see on my test page that it is the 5th element on that form.
By the way – if it is the last visible element before submit you can use as selector even the class: av-last-visible-form-element
With the setting of that checkbox you can style and influence the behavior of the submit button:

this code here is for a specific page – you had to adjust it to your page ID.

code comes to child-theme functions.php:

function change_submit_button(){
if(is_page('38472')){
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){ 
	$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
			'background-color': 'red',
			'pointer-events': 'none',
			});

	$("#avia_5_1").on( "click", function(){
	    var a = $("#avia_5_1");
	    if(a.length == a.filter(":checked").length){
	        $('form.avia_ajax_form').find('input[type="submit"]').val("Submit").css({
			'background-color': 'green',
			'pointer-events': 'auto',
			});
		}
		else{
			$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
			'background-color': 'red',
			'pointer-events': 'none',
			});
		}
	});
});
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'change_submit_button');

PS: Change value ( Stop, Submit ) to your needs.
results page: https://webers-testseite.de/contact/

background-color : none    /*** is not a valid value  ***/

it could not be the browser cache – because i see the header fixed too.
And any other cache? we had to find then that rule concerning to a fixed header – but even with the css set the header to postion absolute – it has to scroll away.

.html_header_top.html_header_transparency #header {
    position: absolute;
}

and there is the correct class on html: html_header_sticky_disabled
( with a sticky header there should be : html_header_sticky )

so this is strange!

as participant i do not see your private content – but lightbox has in its markup a mfp-bg ( background) and the mfp-wrap for the content – i guess what you look for is the mfp-bg opacity which is on default at 0.8
this is standard definition:

.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #000;
  opacity: 0.8; 
}

but sometimes ( depends on the source you open it must have a more specific selector like:

.mfp-zoom-in.mfp-ready.mfp-bg,
.mfp-zoom-in.mfp-ready .mfp-preloader {
  opacity: 0.8;
}

Nice – thanks for the code.
I prefer my borlabs cookie – but this is a good addition for enfold usage.