ich sehe du hast die Enfold Option des Merging bei css und js eingestellt. Hast du das mal neu generieren lassen?
Unter Performance – ganz unten.

Im Übrigen wird deine Seite in meinem Desktop Safari auch nicht mit der Schrift dargestellt.

see section on top : https://webers-testseite.de/flexed/
( the other way is for more komplex styling – thats gridlayout )

The problem, of course, is that the height of a responsive background will always be smaller on a mobile phone. So unless you want to reduce the size of the logo by the same amount, “nailing” the logo to a specific position will not work. I have already tried to achieve this by using values relative to the screen width.

test this :

#top .html5-video .overlay {
  position: absolute;
  width: 25vw !important;
  height: 21.25vw;
  min-width: 140px;
  min-height: 119px;
  max-width: 411px;
  max-height: 349px;
  padding:15px;
  top: 80px;
  left: 50px;
}
@media only screen and (max-width:767px) {
  #top .html5-video .overlay {
    top: 20px
  }
}

just remove those

  border-radius:20px;
  background-color:rgba(0,0,0,0.1);
  backdrop-filter:blur(6px)

so it is only for that selector:

#top .html5-video .overlay {
  position:absolute;
  width:25vw !important;
  height:21.25vw;
  min-width:140px;
  min-height:119px;
  max-width:411px;
  max-height:349px;
  top:12vw;
  left:8vw;
  padding:15px;
}

ok – sometimes the value had to be set to important – if another rule is set the same way.
there is inside one of your css:

.responsive .container {
  max-width: 1310px !important;
}

so you had to change that one selector to :

.responsive #top #wrap_all .html5-video .container {
  max-width: 100% !important;
  width: 100%;
  padding:0;
}

https://webers-testseite.de/html5-video-fanlokbun-2/
test my example page on your phone if it is working there.

I’m not sure if there’s anything else I can tell you, other than what you can see on the page.
On top ? Well it is the first color-section on that page. If you like to have it behind header – then you had to choose the enfold transparency option for the page.

Color-Section with custom-class: html5-video ; inside that color-section a code-block element and column (custom-class: overlay) with your image (logo). The width of that column is ruled by css.

If you do not need an overlay for your video – then put inside only the codeblock element.

I’m not sure if there’s anything else I can tell you, other than what you can see on the page.
On top ? Well it is the first color-section on that page. If you like to have it behind header – then you had to choose the enfold transparency option for the page.

Color-Section with custom-class: html5-video ; inside that color-section a code-block element and column (custom-class: overlay) with your image (logo). The width of that column is ruled by css.

You can do that with code-block element inside color-section. Best is to better select – a custom class for the color-section.
in my example page it is: html5-video

see code and example on : https://webers-testseite.de/html5-video-embed/

btw: if you change some declaration inside the given css code – this overlay might be fixed :
(change means not to replace the whole rule but just to f.e. change the position to fixed – the rest of the declarations had to be in place.)
f.e.:

.responsive #top #wrap_all .html5-video .container {
  clip-path: inset(0 0 0 0);
}

#top .html5-video .overlay {
  position: fixed;
  top: 0;
  transform: translate(-50%, 25vw);
}

or you shift the next section over the first one … etc.

just like on :
https://kriesi.at/support/topic/add-logo-to-full-screen-slider/#post-1480358
f.e.:
(and maybe a small drop-shadow to the png

#top .avia-fullwidth-slider::after {
  position: absolute;
  display: block;
  content: "";
  width: 18vw;
  height: 15.3vw;
  max-width: 411px;
  max-height: 349px;
  min-width: 200px;
  min-height: 170px;
  top: 120px;
  left: 80px;
  background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) calc(100% - 40px);
  background-position:center center;
  filter: drop-shadow(1px 1px 2px #666);
}

@media only screen and (max-width: 767px) {
  #top .avia-fullwidth-slider::after {
    top: 2vw;
    left: 2vw;
  }
}

but i see that the slider is not shown on mobile? And we had to place always a fallback image for videos?
dear mods – has this always been the case with Enfold?
It is unfortunate that we do not have the opportunity to decide for ourselves.