Mouse Hower effect

Enfold hat für mobile Endgeräte im html oben explizit Klassen eingeführt.
Wenn du mit einem Mobile Phone die Seite öffnest, dann ist automatisch avia_mobile als Klasse an html also als Selector z.B. dann:
.responsive.avia_mobile …

das kannst du dann also nutzen um die Elemente explizit für Handy und Co zu stylen. Problem: der hover style ist on touch aktiv.

by the way – we had to be more selective on that – because otherwise the page f.e.: https://umwelt-magazin.eu/portfolio-item/wirtschaft-2/ will do that too. And on a full overlap this is not recommendable

so better replace the css with:
(because we do not want to make this happen on full overlay caption)

.av-masonry:not(.av-caption-style-overlay) .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
  width: calc(100% - 20px);
  margin: 10px;
}

ich wünschte ich wüsste wie man eine mouse hover an mobilen Endgeräten haben könnte.
Den gibt es nämlich nicht. touch screens habe sowas nicht. Problem der touch event wird als hover gewertet und aktiviert den Status.

Standardmäßig sollte es aber bei Enfold so sein, das in dem Fall die Captions dauerhaft angezeigt werden. Willst Du das unterbinden?
Dann könntest du ( sorry als Participant / Boardteilnehmer ist wohl duzen angesagt ) diese Elemente die durch das hovern hineinfahren einfach ausblenden mit display none.

.responsive.avia_mobile #top .av-masonry:not(.av-caption-style-overlay) .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
  display: none
}

diese klasse: avia_mobile wird bei allen mobilen Endgeräten an html gesetzt.

For those masonries – on ipad and bigger tablets it might be nice to position the caption ( that is on mobile always visible ) beneath the image – and not as overlay style.
Maybe it is best to give a custom class to that masonry – to always use that setting on demand.
f.e. description-below
and: because it is only wanted on mobile devices ( with no hover )

#top .av-masonry.description-below .av-inner-masonry-content,
#top .av-masonry.description-below .av-inner-masonry-content .avia-arrow {
  background-color: #cde5a5;
}

.responsive.avia_mobile #top .av-masonry.description-below .av-inner-masonry-content {
  position: relative !important;
  top: 100%;
}

.responsive.avia_mobile #top .av-masonry.description-below .av-inner-masonry {
  overflow: visible;
}

.responsive.avia_mobile #top .av-masonry.description-below a.av-masonry-entry {
  margin-bottom: 60px !important;
}

.responsive.avia_mobile #top .av-masonry.description-below .av-inner-masonry-content {
  padding: 5px 10px;
  text-align: center;
  min-height: 65px
}

.responsive.avia_mobile #top .av-masonry.description-below .av-inner-masonry-content .av-masonry-entry-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  font-size: 18px !important;
}

i can not see the custom class – did you save it after entering the class?

when entering the code without that custom class on my developer tools to test if it works
(Emulation is ipad)

here you can see a live screenshot even on my ipad mini 3 ( iOS 12.5.7):

if it works there then the newer iOS will do it too!
Edit:

ABER – du hast recht – ich muss hineinschauen, ob es nicht doch von der Screenweite abhängig gesetzt ist in Enfold.
Denn auf meinem iPad Pro wird es noch mit dem Hover Anfangsstyle gezeigt

Auf iPhones sollte es aber so auch schon funktionieren.

that is why i have added the comment in the css code-

/****** hover Verhalten abschalten für den responsiven Fall ********/
/****** bei Querformat iPad Pro 12,9inch = 1367px / bei iPad Pro 11inch = 1195px ********/
/****** bei Querformat iPad  10,2inch = 1081px / etc. pp ********/

your tablet has: 1080px width in landscape mode
so replace that line:
@media only screen and (max-width: 989px) {
to:
@media only screen and (max-width: 1081px) {
because you want that it will work on 1080px

___________________

What do you think will happen if you don’t put all your CSS in a media query?
So you don’t put the 1080px limit there?
Then I think it will apply everywhere – for all screen widths ;)
(remember to remove the last bracket if you want to do it that way).

@media only screen and (max-width: 1081px) {
       /***** the codes inside the media query ****/
} /**** the closing bracket *****/