understanding that flexbox layout:
https://webers-testseite.de/flex-columns-understanding/

Not really—don’t use the “equal-height” option; instead, set the “align-items: stretch” option for the flex container.
Take another look at the example page.
By the way: “align-items: stretch” is the default value on flex containers — so you don’t need to specify it explicitly.

_____________ just for info ______________

/* === flex container settings (default values):  === */
flex-direction: row	  /* === Side by side, not one below the other. === */
flex-wrap: nowrap   /* === Everything on a single line, no line breaks. === */
justify-content: flex-start  /* === Everything left-aligned (on the vertical axis). === */
align-items: stretch  /* === Full height (on the horizontal axis). === */

/* === Items Settings (default values):   === */
flex-grow: 0   /* === No automatic filling of empty space. === */
flex-shrink: 1  /* === Shrinking is permitted if space is limited. === */

see my post above.

Are you using any caching tools ? They mostly got an option to clear the cache, if you edit (update) a post/page.
Next: Browser do also Cache Pages. Sometimes they deliver the cached Content. etc.

btw. : have a look what happens to your top divider on home page if you add this to your quick css:

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top {
  transform: scaleY(-1);
  top: -39px;
}

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top svg {
  fill: #FFF !important;
}

#top.home #av_section_1 .scroll-down-link {
  bottom: 25px;
}

you see on the first two images the position where you can enter a custom value:
https://kriesi.at/support/topic/making-the-logo-bigger-2/#post-1496110

if you enter 200px there on “header custom height” ( i guess you are now back to “large” ) you had to synchronise that max-height value on #top #menu-item-logo img rule to 200px too.

@media only screen and (min-width: 990px) {
  #top #menu-item-logo a {
    display: inline-block;
    transform-origin: center top;
  }

  #top #menu-item-logo img {
    max-height: 150px;
    height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

synchronise the max-height : 150px to what you have determined in the header enfold start height options.

Even with a vector-based SVG logo, this font (the smaller one in your logo) would no longer be legible.

You could make the header area larger overall, but then let it shrink so it doesn’t take up too much space.

_________________
Another option would be to display the logo larger at first and then have it move to the desired position inside navigation as the page is scrolled.
this for child-theme functions.php:

function logo_shrink_navigation(){
?>
<script type="text/javascript">
(function($) {
    function initLogoScrollAnimation() {
        // ===== CONFIGURATION =====
        var config = {
            maxScroll: 100,
            scaleStart: 2.3,
            scaleEnd: 1,
            translateYStart: 80,    // Starting point shifted in the Y direction (e.g. 80px for down shift)
            translateYEnd: 0,       // End point (must be 0 for the final position)
            translateXStart: -230,  // Starting point shifted in the X direction (e.g. -100px for the left)
            translateXEnd: 0        // End point (must be 0 for the final position)
        };
        // =========================
        
        var ticking = false;
        var $menuLogo = $('#menu-item-logo');
        var $menuLogoLink = $menuLogo.find('a');
        var $menuLogoImg = $menuLogo.find('img');
        var logoWidth;
        
        function updateLogo(scrollTop) {
            var progress = Math.min(scrollTop / config.maxScroll, 1);
            
            // Skalierung berechnen
            var scaleDiff = config.scaleStart - config.scaleEnd;
            var scale = config.scaleStart - (scaleDiff * progress);
            
            // Y-Verschiebung berechnen
            var translateYDiff = config.translateYStart - config.translateYEnd;
            var translateY = config.translateYStart - (translateYDiff * progress);

            // X-Verschiebung berechnen (NEU)
            var translateXDiff = config.translateXStart - config.translateXEnd;
            var translateX = config.translateXStart - (translateXDiff * progress);
            
            var extraSpace = (scale - 1) * logoWidth / 4;
            
            // Transform mit translateX ergänzt
            $menuLogoLink.css('transform', 'translateX(' + translateX + 'px) scale(' + scale + ') translateY(' + translateY + 'px)');
            
            $menuLogo.css({
                'margin-left': -extraSpace + 'px',
                'margin-right': -extraSpace + 'px',
                'z-index' : '19'
            });

            $menuLogoImg.css({
                'background-color': 'rgba(255,255,255,0.8)',
                'backdrop-filter': 'blur(5px)',
                'border-radius': '25px',
                'border': '1px solid #FFF'
            });
        }
        
        $(window).on('scroll', function() {
            var scrollTop = $(window).scrollTop();
            
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    updateLogo(scrollTop);
                    ticking = false;
                });
                ticking = true;
            }
        });
        
        // Logo-Breite messen und initial setzen
        logoWidth = $menuLogoLink.outerWidth();
        updateLogo($(window).scrollTop()); // Initialen Scrollwert beim Laden berücksichtigen
    }
    
    $(document).ready(function() {      
        setTimeout(function() {
            initLogoScrollAnimation();
        }, 300);
    });  
})(jQuery);

</script>
<?php
}
add_action('wp_footer', 'logo_shrink_navigation');

the confic section is for the starting look of your logo (scale, shift x and y-axis etc)

look at start this way:

after scroll it is in the center of your nav.

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);