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.

i guess your installation is based upon a demo. so open your frontpage in edit mode – on the right side there are boxes for Publish, Page Attributes, Layout etc.
On Layout there is: “Header visibility and transparency”

or if it is not that – you had to look for an existing css that rules the header transparency. However, you should have created this yourself, because as far as I know the demos work without additional quick css entries.

The easiest way would be to see the page in question in order to be able to give better advice.

what about that way (in addition) in the docu via: avf_dynamic_stylesheet_filename
see: https://kriesi.at/documentation/enfold/personalize-theme/

All of the Styling options you set in the theme’s Styling options are saved to a file in your uploads folder called enfold.css. If you have changed the theme name or something like that you may want to rename this file to better reflect your own branding. You can use the following function to do just that:

function avia_change_filename($stylesheet){
   return 'custom_name';
}
add_filter('avf_dynamic_stylesheet_filename', 'avia_change_filename');

mach doch mal einen Versuch auf der Villa Seite und nimm dort statt des 1500×1000 px bildes das Original.
das original hat knapp 500kb das andere 1,2MB. – such mal hier im Forum nach dem Filter : avf_jpeg_quality
da erfährst du warum die recalculierten großen Bilder meist viel mehr Filesize haben als die Originale.
Wenn du nix findest melde ich mich Morgen nochmal.

naja – dein intersectionObserver Code war so nicht zu gebrauchen oder?
( ich glaube threshold war so falsch, ein Sonderzeichen war nicht ganz richtig etc. da habe ich dann lieber auf bekanntes zurückgegriffen – wobei : warum das mit dem “eintrag” funktioniert muss ich nochmal checken )

PS: wenn du die Klasse übrigens während diese Seite durchgescrollt wurde behalten möchtest lösche die else condition.

PPS: ich glaube das [].slice.call ist ein wenig Oldscool
wenn du die Zeile austauschst gegen:

var elements = Array.from(document.querySelectorAll(".scrollanimation"));

ist es am Puls der Zeit ;)

aha – ich sehe den Fehler:

schau mal wo du das css eingesetzt hast:

@keyframes anim-lineDown

da fehlt hinten eine schließende geschweifte Klammer
dadurch ist das nachfolgende css ungültig: