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.

Yes replacing it at the pseudo-container of the char itself maybe the better option. I do not know where the animation of the list will do the job.
But i guess it will be the char – so try Ismaels code first.