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/

there is the option to break on 989px too

in this case if you choose 989px the columns will have an extra class on flex_column: av-break-at-tablet

the ruleset to handle repsonsive break is on default:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all .av-break-at-tablet .flex_cell, 
  .responsive #top #wrap_all .flex_column.av-break-at-tablet {
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }
}

so if you like to change it on one page only and for columns you can use in combination with the page ID

@media only screen and (max-width: 1099px) {
  .responsive #top.page-id-49045 #wrap_all .flex_column.av-break-at-tablet {
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 20px;
    width: 100%;
    display: block;
  }
}

if you like to influence only a specific column group – use a custom class for that.