you have on those post-types different classes on body tag ( or #top).
so you can differ by :
#top.page
#top.single-portfolio
#top.single-post

so try:

.responsive #top.page  {
  font-size: 13px !important;
}
.responsive #top.single-post {
  font-size: 16px !important;
}
.responsive #top.single-portfolio  {
  font-size: 19px !important;
}

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.