What Font do you realy need?
Myriad Pro … light, regular, bold etc. ?

I would keep my hands off cufonfonts.com. They also offer fonts that are clearly commercial fonts (such as Myriad Pro). The use is therefore illegal. You should therefore either rely on trustworthy sources, or look for a good free alternative to the desired premium font.
If you own the Myriad Pro – be shure that it includes the webfont too! This is usually not the standard.

The PTSans seems to be very similar. And you can download it at Google and host the font on your own server.

ich habe es nie als Problem empfunden einen Shortcode via Text-Alb oder Codeblock Element einzusetzen.
CF7 bietet mit sinnvollen Plugins – wie Upload oder Conditional Fields einfach so viel mehr Möglichkeiten, dass ich den kleinen Umstand verschmerzen kann.

Das Plugin funktioniert mit CF7 auf Anhieb, und ohne das man etwas in die Formulare einbringen muss. Es ist ein Honeypot, funktioniert aber eben pfiffiger als manch andere. Wenn man mal merken sollte das doch mal mehr SPAM eintrudeln wechselt man im Ersten Tab diese Zufallsvariable.

Unfortunately, the page-content shortcode does not work here.

echo do_shortcode("[av_postcontent link='page,40273']");  // your page-id 

______________________
just to play a bit with that trial to insert on an archive page a top content

PS: the hook Mike uses is the one that is the only possible – but it is not so good i think – for this needs. If there would be a better hook f.e.
after <main class='content …
so if you like to think of a child-theme archive.php you can insert on that place your own hook:

we can make our own page content shortcode – f.e:

function get_post_page_content( $atts ) {
    extract( shortcode_atts( array(
        'id' => null,
        'title' => false,
    ), $atts ) );

    $the_query = new WP_Query( 'page_id='.$id );
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
            if($title == true){
            the_title();
            }
            the_content();
    }
    wp_reset_postdata();
}
add_shortcode( 'my_content', 'get_post_page_content' );

and insert our page content via page ID to that new hook:

function ava_insert_page_content_before_loop_mod() {
	if(is_category('grafik')) {
		echo do_shortcode("[my_content id='43262']");  // here you had to insert the ID 
	}
}
add_action('ava_inside_content', 'ava_insert_page_content_before_loop_mod', 100);

You can then style a page ( as Mike said – better without any full-width alb element (color-section, tab-section, grid-row) ) – and insert it to your category via ID.

i would recommend the solution with absolute position the followed column container over an easy slider alb element.
it has all advantages of a real slider – with crossfading between images. And the option to play with transition speed etc. pp.

there are a lot more css rules to set. All depends first on your header settings. header_meta or not – does the header_meta scroll away on responsive case? ( “Unstick Topbar” ). Then where did your hamburger breakpoint is set? 767 or 989 or something completely different?
On transparency or glassy headers – do you like to have them transparent or glassy first too or not? …

see here working examples:
https://consulting.webers-testseite.de/
https://basis.webers-testseite.de/

Edit: you had to change your bg-color for your needs : #376b9e for https://lunchticket.org/
you can try as starting point:

/****** sticky header *** responsive case when burger is visible - you had to edit then the media query *************/
@media only screen and (max-width: 989px) {
  
  /******  might be neccessary to set 
    .responsive .avia-svg-logo svg {
      max-width: 280px;
    }
  *******/
  
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  /*** if top-bar should be visible on mobile - it will be 110px ***/
  
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }  

/***** see comment below ******/
  #top .av_header_transparency,
  #top .av_header_transparency .header_bg {
    background: transparent !important;
  }

/*******   if you do not like to have first transparency then backgound-color 
 * remove the above transparent rule and use this instead : 

  #top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #fff !important;
  } 
**************/

  #top #header.header-scrolled .header_bg {
    background-color: #FFF !important;
    opacity: 1
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }
  html:not(.html_header_transparency) #top .header_bg {
    background-color: #FFF !important;
  }
  .responsive.html_header_transparency.html_header_top #top #main {
    padding-top: 0px !important;
  }
  .responsive:not(.html_header_transparency).html_header_top #top #main {
    padding-top: 80px !important;
  }
}

@media only screen and (max-width: 767px) {
/******  again might be neccessary to set - depends on your logo and if you are using a svg
  .responsive .avia-svg-logo svg {
    max-width: 220px;
  }  
*****/
  .responsive #header_meta .sub_menu > ul > li {
    padding: 0 5px;
  }
} 

all infos are on my avatar or username. Send me an e-mail

Well you had to use these characters: ™ ® © then the code will do the rest. A TM will not work.
It works on my end here.
Even in breadcrumb – they will be replaced. But if you like to have it

But if you even want to have it on:

then you had to copy&paste the character on f.e.: http://unicode.e-workers.de/entities.php
or use the unicode decimal for it e.g: ® in the page title
sorry boardsoft will immedeitately transfer the entity :

Can you try this in your child-theme functions.php:

function custom_avf_post_css_create_file( $create ){
	return true;
}
add_filter( 'avf_post_css_create_file', 'custom_avf_post_css_create_file', 10, 1 );

the css is created anyway – but not saved inline – all goes to extra css file inside /wp-content/uploads/dynamic_avia/

One thing that bothers me with my code – is that the fading goes to the entire container. So this also affects the content. It would be better if only the background would experience a fading.

so definitly use Yigits Code for now – i will look to change my code

but please could you discuss the solution then please!
Sometimes it helps other participants to learn from the problems of others.
My guess was that you had old code in your child theme functions.php that was causing conflicts.

it has to be in a text-block alb ?
Or can you use the accordion alb instead. ?

by the way – on a text-block the trick via details will work :

<details>
<summary>read more …</summary>
<p>Here comes the hidden text inside</p>
</details>

This is exactly why I asked for the link. There are better methods (flex-layout or even better grid-layout) to solve the same height problem – even without aiming at quite a few media-query solutions with min-height. But obviously solutions from non-moderators are not wanted. Too bad

#top .author-box {
  display: grid
}

i do not know where your rule comes from – because merging is active :
there is:

@media only screen and (max-width: 767px){
.responsive .template-blog .blog-meta {
  display: none;
}
}

so try in your quick css:

@media only screen and (max-width: 767px){
.responsive #top .template-blog .blog-meta {
  display: block;
}
}