on that page: /sonnenschutz_und_was_ihr_dazu_wissen_muesst you got fixed setting – not scroll on attachment. !!!

Important: so set the background-attachment on that color-section to scroll please!

the same on /was-mich-das-zusammenziehen-gelehrt-hat with #av_section_3

on /warum-weiss-die-ultimative-farbe-ist and
/sind-gesichtssprays-wirklich-hilfreich/ i do not see your error.
What kind of iphone is it – is it realy older than the one i tested this for you: iphone 6s with iOs 15.5 ;)

The Fontello site is a bit picky about the compound path. Therefore, my recommendation is: upload the svgs to icomoon app. Remove the colours there.
And download the newly generated svgs there. Unzip the icomoon zip and upload the svgs to fontello.
Icomoon App: https://icomoon.io/app/#/select

In practice, it would even be possible to upload the fonts generated there to Enfold; however, some settings for the font properties are optimised in Enfold with Fontello Settings (baselines, grid, whitespace, etc.) – so that this small intermediate step is worthwhile.
( f.e. your icon nygtq is a little bit cut off at the right side )

Font Icons here are only used in a non-colored way. Uploads to fontello only work correct if the fill is (standard) : black.

if you like to use multicolored icons anyway. Do the above – and replace later the corresponding source svg files:
https://kriesi.at/support/topic/ajout-dicones-dans-enfold/#post-1356658

https://enfold.webers-webdesign.de/virtualbis/

yes – on that page now – it works on my iphone.
Don’t know why the height calculation on shortcode.js hampered that fix.

What is annoying is that the Apple navigation bar on the bottom and the url window on top is outside the height of the screen. So when they disappears with scrolling, the screen height gets greater, and this is of course taken into account by adjusting the container. The image enlarges accordingly.

da muss was anderes stören, – ich habe auf einem Iphone 8 auch dieses Ergebnis deines Filmes. Aber wenn ich meine Beispielseite auf dem gleichen Iphone ansehe, wird es korrekt angezeigt.
___________
there must be something else interfering, – I have on an Iphone 8 also this result of your movie. But when I view my example page on the same iphone, it is displayed correctly.

And even this “hardcore” proof is o.k: https://webers-testseite.de/background-fixed/

maybe the reason is indeed the mixed-content :

background-attachment: fixed is not supported by most of the mobile devices.
So Enfold turns that to background-attachment to : scroll – and a parallax container is generated.

A position fixed is supported by mobile devices – the trick is to tranform that.

Important: so set the background-attachment on that color-section to scroll please!
give a custom class to that color-section : bg-fixed and put this to your quick css:

.avia-section.bg-fixed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
  overflow: hidden;
  position: relative !important;
}

.avia-section.bg-fixed:before {
  background-image: inherit !important;
  background-repeat: inherit !important;
  background-size: cover;
  background-position: inherit;
  content: "";
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1 !important;
  will-change: transform;
  pointer-events: none;
}

see f.e: https://webers-testseite.de/goodwave2/
PS: kanst du mal auf deiner Seite : was_mich_2_jahre_haarefaerbens_gelehrt_haben schauen, die Bilder sind eingeladen über:
i0.wp.com – war das deine Dev Seite, die du migriert hast? Jetzt hast du eine Rückbezüge auf diese Seite, das ist mixed Content bewertet – ausserdem ist die http – weshalb die Seite dann auch als nicht sicher eingestuft wird.

well a quick and dirty way is to make them not clickable in quick css:

.breadcrumb {
  pointer-events: none;
}

but in the DOM the a-tags and all href are still present.
to change all settings in class-breadcrumb-trail.php and class-breadcrumb-legacy.php and have child-theme substitutes is complex and – on parent theme changes in those files you had to think of reproducing that changes.

a jQuery solution could be to change a-tag to span-tag and remove the hrefs – please try in your child-theme functions.php:

function breadcrumb_links_to_span(){
?>
<script>
(function($) {
  $('.breadcrumb-trail span').css('float', 'left');
  $('.breadcrumb ').each( function() {
    $(".breadcrumb-trail a").replaceWith(function(){
      return $("<span>" + $(this).html() + "</span>").removeAttr('href');
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'breadcrumb_links_to_span');

I’m afraid I’m going to have to make a little apology. On my more modern Apple devices, of course, a newer Safari is installed. But on my older MacMini runs a Safari of the previous versions. There webp is not supported. So I guess that Iphones up to 8 and older Ipads do not display the images.

you have on hamburger menu choosen the “Clone Title Menu Items To Submenu” and to have a “Clone ” for it
i do not know if this could be the reason for it – but you can quickly test it by temporarily disabling this option. To be on the safe side, also clear all caches before you check it.

_________

Du hast im Hamburger-Menü die Option “Clone Title Menu Items To Submenu” gewählt, um dort einen “Clone” dafür zu haben
Ich weiß nicht, ob dies der Grund für das Problem sein könnte – aber Du kannst es schnell testen, indem Du diese Option vorübergehend deaktivierst. Um auf Nummer sicher zu gehen, solltest du auch alle Caches löschen, bevor du es überprüfst.

scheint wohl leider nicht selten, obwohl ich noch nie betroffen war – schau mal hier wird sowas auch angesprochen: https://kriesi.at/support/topic/wrong-menu-item-is-highlighted/

_______________
btw:
das ist jetzt nicht zu dem Problem, aber ich schaue gerade dein DOM an und die CSS
ein Kommentar innerhalb einer CSS wird durch /* Kommentar */ – wie bei “montserrat-regular – latin” gesetzt.
Du hast da teilweise bei den Schriften : das # indiziert das eine ID css gesetzt bekommt. Keine Ahnung ob es einfluss auf die Folgenden css haben kann. Denn du hast ja recht wenig dort

 #keine Kategorien anzeigen

 #schriftart montserrat
/* montserrat-regular - latin */
…

 #schrift_oleo
/* oleo-script-regular - latin */
…

Diese top level menu items, hast du die als manuellen Link eingefügt oder Standard als Drag&Drop über Seiten?
Wenn du die als Custom-Link eingesetzt hast, was hast du bei URL eingegeben?
Ich frage, weil bei St. Josef Hort verlinkst du auf #top.
nimm das #top mal raus.

The problem is not to give more space to the menu items – but what is on smaller screens to do? F.e. on ipad / ipad-mini other devices – where the hamburger is not active.

so if you set f.e. in your quick css:

#top .av-main-nav > li > a {
  padding: 0 25px;
}

then try to pull your browser window smaller to see if the menu will overlap your logo before the hamburger is active.

yes Mike – I have already understood that; only what advantage is gained by such an approach? Is the use of the picture tag only needed to offer a fallback solution; or is the picture tag used to offer other image formats in the responsive case?
So if it is used for these reasons, I think there is no argument for its use with the good distribution of webp support and the use of the srcset option.
If you need the plugin to have a nice automatic conversion of images to webp format images – ok. – but automatically replacing the img tag with picture tag? For what?

Often plugins make useful special additions to the basic installation – but not always.
How many images are needed for a standard WordPress installation? 30-40? If it is not a photographer site or a shop system are already a lot. To convert this number as webp is relatively fast to do. Meanwhile even Photoshop offers the webp format as a possibility – you can make a droplet on your desktop to convert images to webp.

PS : maybe if we start to use now the avif-format – a picture tag will be a good solution til this will be standard

__________
>Offtopic:
Why do I like to ask about the reasoning behind the use of certain plugins?
f.e.: I have enough customers here who absolutely want to have extensive statistics tools installed. Google Analytics seems to have a magical attraction for users. My inquiries as to who should take over their evaluation and who is also able to draw correct conclusions from it are usually met with ignorance. In 90% of the cases where I installed Google Analytics for customers, the interest in evaluating it independently quickly evaporated, and Google alone drew the benefit from it. Some of the collected data is simply not relevant for website operators.

in the non-responsive case (grid cells are next to each other) the height is determined by the cell with the most content.
In the responsive case (the grid cells get the 100% width and are arranged on top of each other) the heights are then determined individually by each existing content.
No content – no height; or if the default paddings of 30px are present a height of 60px.
You can prevent this by placing a whitespace separator in that cell with the background-image.
____________________________

btw. if you like to have a different order when cells are in responsive layout – you can set on grid-row alb options to have either reverse-order or to have individual order setting.

the further to the right a cell is, the further up it is in the responsive case. – or you can choose here individual setup. Then you can determine the order in each cell. higher values are on top – lower at the bottom

This is of course very handy if you want to have an alternating sequence of background images and content cells ( image – text – image – text …)

or just use the little plugin Günter has written : https://github.com/KriesiMedia/enfold-library/tree/master/integration%20plugins/Enfold/Special%20Character%20Translation

other entries can be inserted into the array, of course.
f.e.:

see and download mine from: https://pastebin.com/jttc230x
And in contrast to Günter’s notation, I always put only one # before and after the character.
After activation of the plugin – you can use these substitutions – f.e. for a linebreak then #br#

i know some filters ( no scripts ) as child-theme functions.php snippet to use – but they only do highlight the search word in the search-results page.

// highlight search word in results
function highlight_results($text) {
    if (is_search() && !is_admin()) {
        $sr = get_query_var('s');
        $keys = explode(' ', $sr);
        $keys = array_filter($keys);
        $text = preg_replace('/('.implode('|', $keys) .')/iu', '<span class="search-highlight">\0</span>', $text);
    }
    return $text;
}
add_filter('the_excerpt', 'highlight_results');
add_filter('the_title', 'highlight_results');

But I would recommend this plugin:
It highlights the search term not only on the search results page, but also on the related links.
https://en-gb.wordpress.org/plugins/highlight-search-terms/