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 *****/

can you please try this in you quick css:
( all here with your custom-class – if you want that globaly – ask)

.referenzen .grid-content a {
  pointer-events: auto;
}

.referenzen .grid-content:hover {
  opacity: 1;
  transform: translate(-50%,-50%);
  transition: 1s all ease;
}

.referenzen .grid-image .image-overlay {
  z-index: 0 !important;
  display: none !important;
}

and this to your child-theme functions.php:
(and because this should only affect portfolio grids that are set to lightbox, here is the selector with grid-links-lightbox class.)

function open_non_lightbox_links_in_portfolio_grid(){
?>
<script type = "text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($){
    $('.grid-links-lightbox .grid-entry  a:not([href^="#"])').on('click', function(e){
        e.preventDefault();
        var externalLink = $(this).attr('href');
        window.open(externalLink, '_blank');
    });
  })(jQuery);
});
</script>
<?php
}
add_action( 'wp_footer', 'open_non_lightbox_links_in_portfolio_grid' );

you see what the code does?
you have set the portfolio grid to open all links in a light box.
But your e-mail or links to external Links are not from the type: href=”#…” – the attribute selector above excludes these links to popups – and only prevents the function of the lightbox script where the links do not start with a hash (#).

PS: if you like to open those links not in an additonal window replace _blank with _self

this is always a problem – to have a clickable link over a clickable background-image.
and especially for that case – because the hover effect is correlatet to the link of the background.
If you now hover a link inside that container – the hover focus is lost.

you can see what i mean if you use:

.referenzen .grid-content a {
  pointer-events: auto;
}

but your link there is not clickable anyway – because
we have here multiple issues – you declared the links inside to lightbox links ( inline popup ) so – both links in your last container are no popup – external page links ( and if lightbox – they had to be iframe popups)

if you do not like to strip the excerpts try in 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);

but i do not know if the “wordpress” excerpts are included by that. The Enfold Excerpts are influenced by that snippet

Edit : tested – but it does not work anymore – i had to inspect the loop

Also tausche nur den eingesetzten css Code im Quick Css aus gegen:
(ändere je nach Bedarf diese Grenze 989px aus unter der das gelten soll)

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

/****** 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 ********/

@media only screen and (max-width: 989px) {
  .responsive #top .av-masonry.description-below .av-inner-masonry-content {
    position: relative !important;
    top: 100%;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

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

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

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

  .responsive #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;
  }
}

siehe hier mal : https://webers-testseite.de/gallery/
PS: die Seite nutzte ich schon einmal als testseite, daher liegt da noch ein anderer hoverstyle zu grunde. Farben etc. – ist aber für dein hover state Aspect nicht relevant.

But – please, this only replaces the behaviour on mobile devices. This happens when the descriptions are permanently displayed because the hover effect cannot be effective. So that these overlays do not cover a main part of the image, they are moved here below the images.

If you also want to use it on the desktop with small screen widths, we have to remove the class avia_mobile from the code and put the whole thing in a media query, e.g. only up to 767px.

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)

sorry – part of another participant question -;)

i think that the additional classes inside text-block element will come from a plugin. If you search for those extemely specific class like : min-h-[20px] i only found that tailwind css from https://tailpress.io/
Did you build the site on an existing installation – and possibly change the theme to Enfold afterwards?
The loading of jQuery in the footer could be set on Enfold on the settings page: performance
This is of course possible, but then you have to take into account that the scripts that need jQuery are loaded afterwards. This can be achieved, for example, by first not loading the scripts in the head area and then setting a correspondingly higher priority number for the function.

Next: do you really need jQuery Migrate ? – same on performance tab

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.

da musst du mal in den Einstellungen bei Woocommerce nachschauen ob es dort eine Option hat in das Menu einen solchen Punkt einzusetzen.
Man kann aber auch einen weiteren Menu Punkt hinzufügen über das Filter : ava_inside_main_menu – eventuell mal in die child-theme functions.php reinschauen. Wahrscheinlich aber, hat Woocommerce so eine Option.
Sonst unter Menu – Hauptmenü siehst du den Punkt wahrscheinlich nicht oder?

_________

You will need to check the Woocommerce settings to see if there is an option to add such an item to the menu.
You can also add another menu item via the filter: ava_inside_main_menu – you may need to look in the childtheme functions.php. Woocommerce probably has such an option.
Otherwise you probably do not see the point in Menu – Main Menu, do you?

Abdeckung durch das weiß unten beim Hovern:

.av-fixed-size .av-masonry-entry .av-inner-masonry-content, 
.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content, 
.av-flex-size.av-caption-on-hover-hide .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
  width: calc(100% + 2px);
}

aber eventuell sieht es sogar eleganter aus, wenn du da einen Abstand wählst.
Denn der weiße Hintergrund und dann das weiße Overlay … ?

.av-fixed-size .av-masonry-entry .av-inner-masonry-content, 
.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content, 
.av-flex-size.av-caption-on-hover-hide .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
  width: calc(100% - 20px);
  margin: 10px;
}

PPS: eigentlich sollte das Overlay auf einem mobilen Endgerät bereits geöffnet sein ! ( nicht auf kleinen screens aber auf echten physikalischen Endgeräten)

just a short info on media querries : there are not only media query for screen width but also for orientation:

so you can have something like this:

@media only screen and (max-width: 989px) and (orientation: landscape) {
…
}

PS: the opposite is “portrait”
you can have aspect-ratio or resolution etc.

e.g.: for retina displays:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Nice – but maybe it is best to select the div by its active state – because not always the first toggle is opend at start:

function custom_header_code() {
?>
<script type="text/javascript">    
    document.addEventListener('DOMContentLoaded', (event) => {
      if (window.innerWidth <= 768) {
        const div = document.querySelector('div.active_tc');
        const p = document.querySelector('.activeTitle');
        if(div || p) {
          div.classList.remove('active_tc');
          p.classList.remove('activeTitle');
        }
      }
    });
</script>
<?php
}
add_action( 'wp_head', 'custom_header_code' );

and if you really want to have it only on mobile devices – you can have that without screen width detection.

function custom_header_code() {
if(wp_is_mobile()){
?>
<script type="text/javascript">   
window.addEventListener("DOMContentLoaded", function () { 
        const div = document.querySelector('div.active_tc');
        const p = document.querySelector('.activeTitle');
        if(div || p) {
          div.classList.remove('active_tc');
          p.classList.remove('activeTitle');
        }
});
</script>
<?php
}}
add_action( 'wp_head', 'custom_header_code' );

only if you choose the selector activeTitle – the symbol in front will be set to closed ( + )

did you see the download link in: https://kriesi.at/support/topic/icon-box-numbers-icons/#post-1421348
Link: https://webers-webdesign.de/numbers.zip

Edit here – because topic closed already:

html body [data-av_iconfont="numbers"]::before {
  font-family: 'numbers';
  font-weight: bold !important;
  font-size: 1.6em;
  position: relative;
  left: -5px
}

to center the numbers !