so if you only like to link if there are biljetservice links on the images above the titles – then take snippet two from this link

if you take the second snippet it will only have two links if the one goes to your juliusbiijettservice pages.

on the first image in your row – (Snedtänkt) there is the one link and on read-more the other link.

Here you have it the way it works:
(click to enlarge the images)

but on your rockyhorror read-more link and image link are the same ! – so i could not transfer it to the second button .

or if you only like to have those buttons if the link goes to a certain string:

function custom_entry_link_if_biljetter_link(){
?>
<script>
(function($){
    $(document).ready(function(){
        const triggerString = "juliusbiljettservice";
        $('.avia-content-slider .slide-entry').each(function() {
            var readMore = $(this).find('.read-more-link'),
                biljetterLink = $(this).find('.slide-image').attr('href');
                if (biljetterLink && biljetterLink.includes(triggerString)) { 
                    biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" class="biljett-link">Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
                    $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
                }
                $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_entry_link_if_biljetter_link');

in this case only a second link is added if it goes to a page with juliusbiljettservice inside the link

.entry-footer {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  justify-content: flex-start;
}

.entry-footer a {
  display: inline-block;
  padding: 3px 8px;
}

.entry-footer .read-more-link a {
  background-color: #000;
  color: #FFF !important;
}

.entry-footer .biljetter a {
  background-color: #bf2e11;
  color: #FFF !important;
}

.entry-footer a path {
  fill: #FFF;
}

if you have on all Images the link to your biljetter you can do it this way.

for styling the “buttons” you may be able to do this too:
maybe a custom class on those post-sliders would be a good idea – not to influence all post-sliders

put this to your child-theme functions.php:

function custom_entry_link(){
?>
<script>
(function($){
    $(document).ready(function(){
        $('.avia-content-slider .slide-entry').each(function() {
            var readMore = $(this).find('.read-more-link'),
                biljetterLink = $(this).find('.slide-image').attr('href'),
                biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" >Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
            $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
            $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
        }); 
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_entry_link');

with minimal styling:

.entry-footer {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  justify-content: flex-start;
}

it looks this way:

you like to do it this way of the first row – but with two buttons : read-more and the link from your featured-image.
(Title and featured image do link to your events – like on the grid beneath the “biljetter” Button)

on my installation it works without any problem – if you use the webp images from media-library!
https://webers-testseite.de/webp-lightbox/

or: next suggestion – you are using a plugin that replaces jpgs by webp images ( f.e. from shortpixel – automatic calculation of jpgs to webp- and replacement in DOM )

As mentioned above

var defaults = {
	groups :	['.avia-slideshow', '.avia-gallery', '.av-horizontal-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu', '.woocommerce-product-gallery'],
	autolinkElements : 'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=webp], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="youtube.com/shorts"] , a[href*="screenr.com"], a[href*="iframe=true"]',
	videoElements  : 'a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="youtube.com/shorts"] , a[href*="screenr.com"], a[href*="iframe=true"]',
	exclude  :	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"], .pagination a'
},

a[href$=webp] is an autolinkElement – so there must be something that hampers this on your installation.