if it is the about/leadership page – there is no background-image at all – not even on mobile!

If you don’t have any content, why use a color section? The easiest option is to use a full-width slider. If you don’t want slider controls, you can adjust the options accordingly.

but my solution with declaring the background-size: cover and set the color-section height to aspect-ratio of your image will work properly.
https://webers-testseite.de/hostworks/

and if you like to have then a non full-width grid-row – there are ways to get this …
see: https://webers-testseite.de/grid-row-alb/

that is why i first tried to give you a header solution.
Then you do not need to add that lines manually to every top section in your content. – and if you got a slider or a gird-row on top no extra solutions are necessary. – But there are different Problems – f.e. what to do when first section got a collered background.

The separator solution: As part of next section this should not come into conflict with your menu text. Or do you have on other installations an overlapping first section to header area ?
The problem wil be now – what to do if you got a grid-row or a slider on top.

if you like to use it as svg separator you had to use a svg file like that
https://webers-testseite.de/button-row/
copy paste the svg code from there.
Link to the svg: Here

_____
Incidentally, you should adjust the fixed header rules for responsive behaviour. ( See it on small screens and scrolling down)

First – a screenshot would be nice to have. Many misunderstandings could have been avoided beforehand if I had known more precisely what needed to be changed.

Next: i’m participant as you are, so if there is a message on private content field – i could not see it.

first remove this from your css

.ti-prev:hover::after, 
.ti-next:hover::after {
  color: #FFF !important;
  background-color: var(--enfold-header-color-color);
}

then:

#top .ti-widget .ti-controls .ti-next,
#top .ti-widget .ti-controls .ti-next:after,
#top .ti-widget .ti-controls .ti-prev:after,
#top .ti-widget .ti-controls .ti-prev {
  background: none !important;
  border: none !important;
  outline: none !important;
}

#top .ti-widget .ti-controls .ti-next {
  right: -10px;
}

#top .ti-widget .ti-controls .ti-prev {
  left: -10px;
}

try this
( but it looks better if your header does not have shadow )

use next css code instead

play with top position – what fits best for you.
and maybe you set the height of the before pseudo-container to an absolute value ( e.g: height: 120px;) then it will not shrink with the header height.

try – and have a look if this fits your needs of “button” look-alike:

#top .avia-content-slider .slide-entry-wrap {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 30px;
  
}

#top .avia-content-slider .slide-entry {
  width: unset;
  flex: 1 1 calc(25% - 30px);
  margin: 0 !important;
  display: flex;
  flex-flow: column wrap;
  background-color: #eee;
  padding: 15px
}

@media only screen and (max-width:1049px) {
  #top .avia-content-slider .slide-entry {
    flex: 1 1 calc(50% - 30px);
  }
    #top .avia-content-slider .slide-entry a  {
    margin-left: 0;
  }
}

@media only screen and (max-width:767px) {
  #top .avia-content-slider .slide-entry {
    flex: 1 1 100%;
  }
}

.slide-content {
  margin-bottom: 60px
}

.entry-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: auto;
  top: calc(100% - 60px);
  display: flex;
  justify-content:  space-evenly;
  flex-flow: row wrap;

}

.entry-footer a {
  margin-top: 10px;
  display: inline-block;
  padding: 3px 8px;
  transition: all 1s ease;
}

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

.entry-footer a:hover {
  box-shadow: 0 3px 5px #aaa;
  transform: translateY(-5px) scale(1.03);
}

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

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

and check the responsive behaviour aswell.

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;
}

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)

the content-slider element is something different than that what you are using on your page – you are using the post-slider element – so try mikes code
in The DOM these elements got the classes : avia-content-sllider – so that is my mistake that i believe that you are using th content-slider element.

on google ratings:

.ti-next:before,
.ti-prev:before {
  display: none !important;
}
.ti-next:after,
.ti-prev:after {
  display: flex;
  position: absolute;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  transition: all 200ms ease-out;
  font-size: 24px;
  font-family: "entypo-fontello";
  color: var(--enfold-header-color-color);
}

.ti-prev:after {
  content: "\E874" !important;
}
.ti-next:after {
  content: "\E875" !important;
}

.ti-prev:hover:after,
.ti-next:hover:after{
  color: #FFF !important;
  background-color: var(--enfold-header-color-color);
}

add to the snippet from above the missing instructions:

function avia_replace_default_icons($icons){
 $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
 $icons['svg__prev'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'left-open-big');
 $icons['svg__next'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'right-open-big');
 return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

after that – we had to see if position had to be adjusted.

are these icons – enfold mangaged icons?
Or do they belong to your carousel plugin or instagram plugin ;)