this is based on the snippet above. – but you had to be aware that portfolio links are all url links – so the link goes then to the lightbox – and not to the portfolio page.
You could possibly check whether it is an internal link or not.

the snippet looks to the anchor – and to its href – if href is an image link – then all stayes as it is – if not …

function lightbox_with_mixed_content_type() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		$('.mixed-contenttype a').each(function(){
			var anchorLink = $(this).attr('href');
			if (/\.(jpg|png|gif|webp|jpeg)$/.test(anchorLink)) {
				//console.log(anchorLink + " is an image link");
			} else {
				$(this).attr('rel', 'lightbox').addClass('mfp-iframe');
			}
		});	
	})(jQuery);
});
</script>
<?php 
}
add_action('wp_footer', 'lightbox_with_mixed_content_type', 999);

but as mentioned above – the ajax portfolio grid will not do that .

yes but i suppose that then the av-masonry-entry is not the right selector too.
What kind of element do you use?
Inspect your page with developer tools and have a look what class the link itself has – on masonry it is av-masonry-entry.

On Portfolio Grid – you had choosen the Option : !Open a preview of the entry (known as AJAX Portfolio)” these are totaly different settings. Choose “Open in lightbox” then we can talk about mixed content.
The custom link could be done on the portfolio page itself – via “Additional Portfolio Settings” !

etc. Each of those elements need an own solution. – sometimes there had to be a preventDefault or a stopPropagation of the existing event.

a quick and easy way is to style that link as button :

.more-link {
	padding: 5px 10px !important;
	color: var(--enfold-main-color-button-font) !important;
	background-color: var(--enfold-main-color-primary);
	border-radius: 5px !important;
}

.more-link:hover {
	color: #FFF !important; 
	opacity: .9;
	transition: all .4s ease-in-out;
	box-shadow: 1px 1px 5px #333;
}

change colors to your needs

am besten wäre, wenn alle Bilder die gleichen Größen haben!

damit das Bild nicht die folgenden Einstellungen bei großen Screenweiten macht, wäre eine Anpassung des media-query nötig.
(Die Grenze hängt davon ab, wann das Bild beginnt auf die kleiner Screenweite zu reagieren – das hängt von den Bilddimensionen ab und dem min-height Wert)

(Das kann man aber auch gut empirisch herausfinden diese Grenze, indem man das Ganze zunächst testet mit einem negativen rechts wert ( right: -80px) und ohne das media-query einsetzt und den Screen solange zusammenschiebt, bis links keine Lücke mehr ist. Diese Breite überträgt man dann als media query Grenze.)

teste mal bitte:

@media only screen and (max-width:1405px) {
  #top .avia-fullwidth-slider .avia-slideshow li img {
    position: absolute;
    left: unset !important;
    top: 0 !important;
    right: -20px !important;
  }

  #top .avia-fullwidth-slider .avia-slideshow li {
  overflow: visible !important;
  height: inherit !important;
  }

  #top .avia-fullwidth-slider .avia-slide-wrap {
    width: 100% !important;
    height: 100% !important;
  }
}

die custom-class befände sich am avia-fullwidth-slider

solltest Du mehrere Bilder unterschiedlich positionieren müssen musst du für jede li gesondert die Positionen setzen li.slide-1; li.slide-2 etc. – also
zusätzlich :

#top .avia-fullwidth-slider .avia-slideshow li.slide-1 img {
    right: 0 !important;
}

#top .avia-fullwidth-slider .avia-slideshow li.slide-2 img {
    right: -50px !important;
}

ok – post Überschneidung – dann muss ich ein wenig rätseln …

do you have influence on those settings?

on my apache servers i do set this via htaccess file
f.e.

<IfModule mod_headers.c>
Header set X-Frame-Options "sameorigin"
Header set Referrer-Policy "strict-origin-when-cross-origin"
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options "nosniff"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header always set Content-Security-Policy "upgrade-insecure-requests"
Header set Cross-Origin-Embedder-Policy "unsafe-none"
Header set Cross-Origin-Opener-Policy "same-origin"
Header set Cross-Origin-Resource-Policy: "same-site"
Header always set Permissions-Policy "geolocation=(), midi=(),sync-xhr=(),accelerometer=(), gyroscope=(), magnetometer=(), camera=(), fullscreen=(self)"
</IfModule>

Results can be checked here f.e.: https://securityheaders.com/?q=guenterweber.com&followRedirects=on

That is what i mentioned above – that you are using a different lightbox plugin:

First: i think you have an additional lightbox plugin working on that page. Nivo ?

Sorry : I really don’t want to look at different plugins to work out similar tips. Unless they are ones that I personally use.

if you got the newest Enfold – you can set the mega menu as display fixed:

#top #header .avia_mega_div {
	position: fixed !important;
	width: 95vw;
	top: var(--enfold-header-height);
	left: 2vw !important;
	right: 3vw !important;
}

if you got a non shrinking header you can do that too for even older enfold versions – but you had to insert your header-height as top value.

see example : https://basis.webers-testseite.de/

on masonry element itself – on insertion (as ismael mentioned already ) or on edit the gallery – for each gallery-item there is on the right side :

But please note that this is a global change. It will always affect this image from now on!

AND do not forget to :

choose lightbox and on link settings – image link : „use custom link and fallback is image“

it is not only the double button – you can insert on caption for example this:
( just style it on the page bottom – copy that enfold button shortcode and insert it on captions field )

[av_button label='Click me' icon_select='yes-right-icon' icon='ue82b' font='entypo-fontello' icon_hover='aviaTBicon_hover' title_attr='' button_type='' link='manually,#' link_dynamic='' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='conversion' template_class='' element_template='' one_element_template='' av_uid='av-lu0tlroy' sc_version='1.0' admin_preview_bg='']

As you can see on that second image – not all of the code is needed. This is the main you need for a button – change size and position to your need and maybe remove icon_hover attribute. maybe set a custom class or ID. How to get the icon codes ? … ask.

[av_button label='your button label' icon_select='yes' icon='ue859' font='entypo-fontello' icon_hover='aviaTBicon_hover' link='manually,#' link_target='' size='medium' position='center' label_display='' title_attr='' color='light' custom_bg='' custom_font='' id='abc' custom_class='def']

it seems that on some classical posts ( not generated by ALB ) there is an image on the bottom that represents the featured image of that post – remove it by:
( see for example: https://enfold.webers-webdesign.de/standard-post/ )

#footer-page .entry-content-header {
  display: none;
}

redownload that footer : https://pastebin.com/T59KqXGW
see lines 125 and 321 – 327

– now if you use page as footer and socket it will be: <footer>…</footer>
if you use page only as #footer it will be as before <div> …</div>

well i can see on your staging site all icons now:

that css you have above does not help – because Structure was different and all classes are not present

But try f.e. instead:

#top #header .avia_mega_div {
  position: fixed !important;
  width: 100vw !important;
  height: 0px;
  left: 0px !important;
  right: 0px !important;
  top: 120px !important;
  background-color: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(8px);
  border-radius: 0 !important;
  border: 1px solid #ffffff !important;
  opacity: 0 !important; 
  display: block !important;
  transition: all 0.7s ease 
}

#top #header .menu-item-mega-parent:hover  .avia_mega_div {
  height: 220px;
  opacity: 1 !important; 
  transition: all 0.7s ease
}

#top #header .avia_mega_div .menu-item {
  opacity: 0;
  position: relative;
  transform: translateY(-120%);
  transition: transform 1s cubic-bezier(.68,-0.55,.27,1.55) 0.3s, opacity 0.3s ease ;
}

#top #header .menu-item-mega-parent:hover .avia_mega_div .menu-item {
  opacity: 1;
  transform: none;
  transition: transform 1s cubic-bezier(.68,-0.55,.27,1.55) 0.3s, opacity 0.3s ease ;
}

so what i would do : give the section containing those columns a custom class – f.e.: break-at-1100
choose on first column the break at : 989px ( to have that one class set and to use all benefits of ordering after break )
you can choose reverse order or individual position – put this to your quick css ( now no page ID is needed – all will be done by the custom class)

@media only screen and (max-width: 1099px) {
    .responsive #top #wrap_all .avia-section.break-at-1100 .flex_column.av-break-at-tablet {
        margin: 0;
        margin-bottom: 0px;
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }
    .responsive #top #wrap_all .avia-section.break-at-1100 .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .responsive #top #wrap_all .avia-section.break-at-1100 .av-break-at-tablet-flextable.av-mobile-columns-flex.av-columns-reverse, 
    .responsive #top #wrap_all .avia-section.break-at-1100 .av-break-at-tablet-flexwrapper.av-column-wrapper-individual.av-mobile-columns-flex.av-columns-reverse {
        flex-direction: column-reverse !important;
    }
}

see: https://webers-testseite.de/responsive-sizes/