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.

Thank goodness for DeepL — I did take French as my third subject in high school, but that was a good 40 years ago ;)

#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: -20px;
}

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

#top .ti-widget .ti-controls > div:after {
  font-size: 52px;
  color: #ebebeb;
}

#top .ti-widget .ti-controls .ti-prev:hover:after,
#top .ti-widget .ti-controls .ti-next:hover:after {
  color: #2c1175 !important;
}

maybe you have allready included some of those rules.

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

or a little more elegant:

#top #header:not(.header-scrolled-full) #header_main {
  box-shadow: none;
}

#header_main:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--enfold-header-height) - 150px);
  width: 100%;
  height: 200px; 
  background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iRHJlaS1MaW5pZW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgODAwIDE4MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjOTQxMDA5OwogICAgICB9CgogICAgICAuc3QxIHsKICAgICAgICBmaWxsOiAjZWZhNDBiOwogICAgICB9CgogICAgICAuc3QyIHsKICAgICAgICBmaWxsOiAjMDA4MGEyOwogICAgICB9CiAgICA8L3N0eWxlPgoKICA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNjE0Ljg4NSw2My44MzVjLTEwNS4xNzksMjUuNTMxLTI2NC44MDQsNTUuOTY1LTQyNy45NTQsNTUuOTY1LTEwMi4xMjcsMC0xNjAuOTctMTcuODkxLTE4Ni45MzEtMjguNTI5djE0Ljk5MWMyNS45NiwxMC42MzcsODQuODA0LDI4LjUyOSwxODYuOTMxLDI4LjUyOSwxNjMuMTUsMCwzMjIuNzc1LTMwLjQzNCw0MjcuOTU0LTU1Ljk2NSw5NS42MjYtMjMuMjEyLDE2NC43ODItNDYuNjc5LDE4NS4xMTUtNTMuODM1di0xNC45OTFjLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02MTQuODg1LDc4LjgyNWMtMTA1LjE3OSwyNS41MzEtMjY0LjgwNCw1NS45NjUtNDI3Ljk1NCw1NS45NjUtMTAyLjEyNywwLTE2MC45Ny0xNy44OTEtMTg2LjkzMS0yOC41Mjl2MTQuOTljMjUuOTYsMTAuNjM3LDg0LjgwNCwyOC41MjksMTg2LjkzMSwyOC41MjksMTYzLjE1LDAsMzIyLjc3NS0zMC40MzQsNDI3Ljk1NC01NS45NjUsOTUuNjI2LTIzLjIxMiwxNjQuNzgyLTQ2LjY3OSwxODUuMTE1LTUzLjgzNXYtMTQuOTljLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04MDAsMzkuOTgxYy0yMC4zMzMsNy4xNTUtODkuNDg5LDMwLjYyMi0xODUuMTE1LDUzLjgzNS0xMDUuMTc5LDI1LjUzMS0yNjQuODA0LDU1Ljk2NS00MjcuOTU0LDU1Ljk2NS0xMDIuMTI3LDAtMTYwLjk3LTE3Ljg5MS0xODYuOTMxLTI4LjUyOXYxNy4zMjZjMzAuMDc1LDExLjQ0Miw4OS4yMjgsMjcuMjAyLDE4Ni45MzEsMjcuMjAyLDE2NC44MjUsMCwzMjUuODg0LTMwLjcxMiw0MzEuOTcyLTU2LjQ3Niw4OS4wNC0yMS42MjQsMTU1LjM3LTQzLjQ5MiwxODEuMDk4LTUyLjM4MXYtMTYuOTQzWiIvPgo8L3N2Zz4=");
  background-size: 100% 100%;
  transition: opacity 1s ease-in-out;
}

#top #header.header-scrolled #header_main:before {
  opacity: 0;
}

svg with more convex look.

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.

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