Lass also nur noch als hack drin:

.avia-safari.avia_mobile #wrap_all, 
.avia-safari.avia_mobile html, 
.avia-safari.avia_mobile body {
    height: auto !important;
    min-height: 0 !important;
}

.avia-safari.avia_mobile #main {
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.avia-safari.avia_mobile html {
    background-color: #11abd6 !important; 
}

#socket {
    z-index:10005
}

die untere ist dafür, wenn man manchmal schnell wischt, und “überscrollt” zeigt sich hie und da der Hintergrund (meist weiß) um das zu verhindern auf deine Footer Farbe setzen.

Bitte lies auch mal was ich so schreibe!

Warum das CSS deine Seite zerstört:
Der “Sticky-Footer”-Killer: html, body { height: -webkit-fill-available } zwingt das gesamte Dokument dazu, genau so hoch wie der Bildschirm zu sein. Das bricht oft das natürliche Scrollverhalten.

Die “Tab-Bar-Überdeckung”: Dass der Footer unten überdeckt wird, liegt am Konflikt zwischen -webkit-fill-available und 100svh. Das iPhone rechnet bei fill-available oft die untere Leiste (die Browser-UI) nicht korrekt ab, wodurch der Content “hinter” die Safari-Buttons rutscht.

Die Weißflächen: min-height: -webkit-fill-available !important in Kombination mit height: auto !important zwingt Sektionen, die eigentlich klein sein sollten, dazu, den gesamten Screen zu füllen – selbst wenn sie mitten im Content stehen.

Daher: notiere dir die bestehenden CSS Rules – und lösche diese:

html, body {
    height:-webkit-fill-available
}

#wrap_all {
    min-height:-webkit-fill-available
}

@supports (-webkit-touch-callout: none) {
    .av-minimum-height, .fullsize {
        min-height: -webkit-fill-available !important;
        height:auto !important
    }
}

@supports (-webkit-touch-callout: none) {
    .av-fullscreen, .av-minimum-height {
        min-height:100svh !important
    }
}

und versuche mal diese hier:

/* 1. Globalen Zwang für html/body nur auf Mobilgeräten aufheben */
/* Nur für Mobile + Safari (iPhone/iPad) */
.avia-safari.avia_mobile #wrap_all, 
.avia-safari.avia_mobile html, 
.avia-safari.avia_mobile body {
    /* Wir heben den globalen Zwang auf, der das Scrollen und die Footer-Sichtbarkeit stört */
    height: auto !important;
    min-height: 0 !important;
}

/* 2. Gezielter Fix für die Weißflächen und Footer-Überdeckung auf iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* Nur wenn Enfold Safari und Mobile erkennt */
    .avia-safari.avia_mobile .av-minimum-height, 
    .avia-safari.avia_mobile .fullsize,
    .avia-safari.avia_mobile .av-fullscreen {
        /* Nutze dvh (Dynamic Viewport Height) für korrekte Footer-Berechnung */
        min-height: 100dvh !important;
        height: auto !important;
        /* Verhindert den Geister-Weißraum durch fill-available */
        -webkit-fill-available: stretch; 
    }
}

/* 3. Sicherstellen, dass der Footer nicht von der unteren Tab-Bar verdeckt wird */
.avia-safari.avia_mobile #main {
    padding-bottom: env(safe-area-inset-bottom) !important;
}
@supports (-webkit-touch-callout: none) {
    .avia-safari.avia_mobile #wrap_all {
        /* Erzeugt einen Puffer unten, damit der Content nicht unter der Leiste klebt */
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

Ob du den fixierten “Einwilligung verwalten” da lassen solltest – oder lieber hinter dem Footer verschwinden lässt ist dir überlassen.
Setze mal :

#socket{
    z-index: 10005;
}

PS: fernab von deinem White Space on iPhone Problem – sehe ich das du oft diesen Trenner mit den drei linien einsetzt.
bist du eigentlich vertraut damit eigene svg Divider in Enfold zu haben?
dein Trenner mit den drei linien ließe sich gut umsetzten mit:

nicht wundern bei Enfold stehen die svg Trenner auf dem Kopf – der scharze Teil ist das was nachher durch die Anschlussfarbe ersetzt wird.
Großer Vorteil : responsiv sorgt vector-effect=”non-scaling-stroke” dafür das die Stroke-weite über alle screen-breiten gleich bleibt (also gut sichtbar ist) :
https://webers-testseite.de/j-und-s/

ich frage mich nur woher dieses /wp-content/uploads/dynamic_avia/js.css kommt. Denn ich glaube nicht das es eine Enfold Datei ist. Eventuell gehört die zu einem Plugin? Vielleicht kann da einer der Mods näheres zu sagen.

du kannst auch nur diese Regel überschreiben ohne auf andere Devices Einfluss zu nehmen:

in das Quick css :

@supports (-webkit-touch-callout: none) {
    #top .av-minimum-height, #top .fullsize {
        min-height: 0 !important;
    }
}

_____________

I’m just wondering where this /wp-content/uploads/dynamic_avia/js.css comes from. Because I don’t think it’s an Enfold file. Maybe it belongs to a plugin? Perhaps one of the mods can say more about this.

You can also just override this rule in js.css without affecting other devices: see above

Sicher, dass es nicht nur ein Caching ist? Du hast WP-Rocket am Start. Cleare mal den Cache dort. Und deaktiviere dann WP-Rocket temporär.
Dann – falls aktiv, mach noch einen Refresh der css und js files in Enfold ( Enfold-Child / Performance ) ganz unten “Delete Old CSS And JS Files?”

Aus irgendeinem Grund ( und auch nur auf realen iPhones ) wird dieser full-width button den du am Desktop zeigst trotzdem mit berücksichtigt. Es wird nur der Anchor ausgeblendet – die Wrapper bleiben sichtbar. Daher:
Versuche mal folgendes : setze den Full-Width button in eine eigene Color-Section und blende diese dann für kleine Screens aus.
PS: das ganze ist übrigens auf allen seiten dann auch der Fall – wo du unterhalb der Slider auch immer einen Full-Screen Button setzt.

dies wird auch auf realen iPhones gezeigt:

i guess you have a page with fixed header – even on mobile too?
The problem is that Safari shrinks the tab bar when scrolling, which changes the visible area. If your header is fixed with top: 0, but the calculation of the spacing is messed up by the changing browser UI, this ‘gap’ is created, through which the content flashes.
This is especially noticeable when you display the tabs at the top in iOS Safari. As these shrink when scrolling, the viewport height changes.
For me it would be nice to see the page. Then i can try to give you better advice.

try in your child-theme functions.php:

function my_avf_masonry_loop_entry_content($loop_excerpt, $entry) {
  $loop_excerpt = $entry->post_excerpt;
  return $loop_excerpt;
}
add_filter('avf_masonry_loop_entry_content', 'my_avf_masonry_loop_entry_content', 10, 2);

or maybe better only allow some tags that are not stripped:

function my_avf_masonry_loop_entry_content($loop_excerpt, $entry) {
  $loop_excerpt = strip_tags( ($entry->post_excerpt) , '<br><p><span>'  );
  return $loop_excerpt;
}
add_filter('avf_masonry_loop_entry_content', 'my_avf_masonry_loop_entry_content', 10, 2);

ich frage mich allerdings warum du es Dir so schwer machst die Layouts zu setzen.
Warum nicht in der 1/2 Column : heading ; image; text-block

EDIT to your next comment: I can’t entirely believe that, because it wasn’t old content that was presented, but rather there were several em tags as wrappers for existing content, as well as several empty em tags. There must have been at least one other reason.

also wenn ich mir in den DEV Tools diese Stelle ansehe, dann sehe ich schon em-tags:

da es ein Textblock element ist, müssen die schon aktiv gesetzt worden sein.

btw:

Das HTML-<em>-Tag (Emphasis) hebt Textteile semantisch hervor, indem es sie meist kursiv darstellt. Es signalisiert Browsern, Screenreadern und Suchmaschinen eine betontere Bedeutung, was die Zugänglichkeit und SEO verbessert. Es ist ein Inline-Element, das Wörter oder Phrasen betont, ohne einen neuen Absatz zu beginnen. 
Wichtige Fakten zum <em>-Tag:

    Semantische Bedeutung: <em> vermittelt, dass der Textteil wichtig ist oder betont werden soll, im Gegensatz zum <i>-Tag, das nur kursiv darstellt.
    Anwendung: Das <em>-Tag wird im Textfluss verwendet, z.B. <p>Dies ist <em>wirklich</em> wichtig.</p>.
    Darstellung: Standardmäßig wird der Inhalt vom Browser kursiv dargestellt.
    Barrierefreiheit: Screenreader nutzen das <em>-Tag, um den Text mit geänderter Betonung vorzulesen.
    Unterschied zu <strong>: <em> steht für eine sanfte Betonung, während <strong> für starke Wichtigkeit (meist fett) steht. 

It seems to be quite common with these services (iStock, Shutterstock, etc.) to register with a nickname rather than using your real name. Given the degree of overlap between the images from genious2000de and Francesco83, I would assume that they are the same person.

I would generally recommend hosting the fonts yourself. And even turning off Enfold support for Google Fonts.
It’s more flexible because you can choose the font styles you specifically need, and this is probably the only correct way to be GDPR compliant.
To hamper Google Fonts Support on Enfold – put this to your child-theme functions.php:

function my_output_google_webfonts_script( $activate ){
  return false;
}
add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );

For selfhosted Fonts – use the Enfold Font Manager – with its upload.
You upload zip files to that font-manager f.e.:

my recommendation is to use definitly woff2 fonts – but maybe as fallback the ttf Variants.
On zipping the Folder (Montserrat) – pay attention if you do that on Mac OSX. Because there are hidden files in there. You had to avoid that.

btw: , under German law, copyright is a highly personal asset. You cannot simply issue a warning to someone just because you see them stealing a third party’s image – even if you are a direct competitor.

Here is a breakdown of who is allowed to do what:
1. “Active legal standing” (who is allowed to sue?)
Only those whose own rights have been infringed may demand cessation. In copyright law, these are:

• The author themselves: The creator of the work.
• The exclusive rights holder: For example, a publisher or agency to whom the sole rights have been transferred. (Shutterstock, iStock etc.)
• Authorized representatives: A lawyer or an association (e.g., GEMA), but these act on behalf of and with the authority of the author.

Therefore, ask whether COPYTRACK (and the internet is full of complaints about them) has the right to issue warnings on behalf of the author.

where do you want to use it? as standalone text. or inside a text-block?

you can style a button this way (i used x-large button for that) – and even the padding you can have on button element itself – including border-width and border-radius.
Only css is needed if you like to have a min-width for that button.

https://webers-testseite.de/bemo-button/

on the right – that is your screenshot image.

there is one problem with your links on that masonry – the titles are often the same as the file-names
your alt attribute is always the same for that gallery: 7106 Bluff Run

Next : on the element itself – where you set the option to show lightbox images. – there is underneath a dropdown with an option what to show as bottom-bar text:

But if you have forgotton to show this on multiple masonry galleries – then you can place a little snippet instead in your child-theme functions.php:

function masonry_title_fix(){
?>
<script>
(function($){
    $(window).load(function() {
        $('.av-masonry .lightbox-added').each(function(){
            var lin = $(this).attr('alt');  /* === or choose title here === */
            $(this).attr('title',lin);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'masonry_title_fix');

because you have the masonry perfect grid – you have no imgs inside but you can change it for the anchor tag.

but btw. why don’t you use the video element and set your image as preview /fallback image on that element?
On advanced privacy settings (on the video element itsself) you can choose to show the video in the lightbox.