btw: this handles visibility of that line:

#top .av-special-heading.blockquote .special-heading-border .special-heading-inner-border {
  opacity: 0.8;
}

du hast auch nicht erwähnt, dass du die subline oberhalb der Headings hast.

für dich jetzt zum Testen :

#top .av-special-heading.blockquote {
  display: grid;
  margin: 0;
  row-gap: 10px;
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
}

#top .av-special-heading.blockquote .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote .av-subheading_above {
  grid-area: area3;
  margin-bottom: 20px; 
}

#top .av-special-heading.blockquote {
  grid-template-areas: 
    "area3 area3" 
    "area1 area2";
}

dann siehst du schon mal wie es wird.

_____________

um es selektiver zu gestalten müsstest du diesen Headings noch eine benutzer Klasse hinzufügen.
um für beide Fälle gewappnet zu sein.
z.B: subline-above oder subline-below

dann :

/* === besides the heading === */

#top .av-special-heading.blockquote.subline-above,
#top .av-special-heading.blockquote.subline-below {
  display: grid;
  margin: 0;
  row-gap: 0px;   /*=== influences the distance between heading and subheading  ===*/
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
}

#top .av-special-heading.blockquote.subline-above .av-special-heading-tag,
#top .av-special-heading.blockquote.subline-below .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote.subline-above .special-heading-border,
#top .av-special-heading.blockquote.subline-below .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote.subline-below .av-subheading_below {
  grid-area: area3;
  margin-top: -10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

#top .av-special-heading.blockquote.subline-above .av-subheading_above {
  grid-area: area3;
  margin-bottom: 10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

#top .av-special-heading.blockquote.subline-above  {
  grid-template-areas: 
    "area3 area3" 
    "area1 area2";
}

#top .av-special-heading.blockquote.subline-below  {
  grid-template-areas: 
    "area1 area2" 
    "area3 area3";
}

see: https://webers-testseite.de/bildvergleich/

important on animated gifs is that you enter the original file – not a recalculated smaller file.

Report please if google webmaster tools make a difference.

by the way: on former times it is better to place the anchor-tag inside the heading-tag (as enfold do with f.e. entry-title etc.)
since html5 / xhtml this is not mandatory. You can have it vice-versa:

function use_text_logo_only($logo){
    $link = apply_filters( 'avf_logo_link', home_url( '/' ) );
    $logo_tag = "h1";
    $logo_heading = "My Website Textlogo";
    $alt = get_bloginfo( 'name' );    
    $title = get_bloginfo( 'name' );
   
    $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>'  .$logo_heading.  '</'.$logo_tag.'></a>';
    return $logo;
}
add_filter('avf_logo_final_output','use_text_logo_only');

to aline that heading with f.e. navigation to the right some css is needed:

#top .logo.text-logo  {
  display: flex;
  justify-content: left;
  align-items: center;
  width: auto;
}

#top .logo.text-logo h1  {
  margin: 0 !important;
  font-size: 30px;
}

forget about that – use: https://kriesi.at/support/topic/how-to-make-the-text-logo-h1/#post-1479660
no subtext is needed!

on shrinking header you need:

#top .logo.text-logo,
#top .logo.text-logo a {
  display: flex;
  justify-content: left;
  align-items: center;
  width: auto;
  margin: 0 !important;
}

did you test that allready in a combination:
(on W3C it is allowed to have inside h-tag inline elements ( img, span …))

PS: https://www.seo-suedwest.de/4490-google-es-ist-ok-das-logo-einer-webseite-als-h1-ueberschrift-auszuzeichnen.html
and
https://www.youtube.com/watch?v=ZKN8B3yeFAQ&t=3192s

there is only a filter to change the whole logo tag – but the subtext stays at span.

function new_avf_logo_headline($headline) {
  $headline = "h1";
  return $headline;
}
add_filter( 'avf_logo_headline', 'new_avf_logo_headline', 10, 1);

but: that is something different.

you only have the chance then to change it in source-code : function-set-avia-frontend.php line 621:

$sub = "<span class='{$subclass}'>{$sub}</span>";

Du kannst es mit einem Accordion auch gut hinbekommen ( mit nur einem Toggle ), und hast dann sogar im Element selber Einfluss auf die Animationsgeschwindigkeit. Ausserdem ist der Button ( so du denn einen möchtest ) wahlweise ober- bzw. unterhalb platzierbar.
Zugegeben das ist etwas sehr gestyled – aber hier siehst du mal beide Anwendungen nebeneinander:
https://webers-testseite.de/fold-unfold-toggler/

Du kannst bei dem Fold/Unfold überigens den Verlauf wegnehmen; musst dann aber die Höhe so abpassen das ein Zeile nicht angeschnitten wird.

.avia-fold-unfold-section .av-fold-unfold-container::after {
  background: none !important;
}

By the way – I know this might be a lot of work – but it might help us if your demos were also up to date with the latest Enfold version, at least the big last main demo (unfortunately the one from 2017).

as mentioned here you can add html code
you do not need to do that line by line ( but it shows you more clearly what $sub .= happens by means of that dot ) – the dot stands for adding some html

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
  $sub .= "<h1 class='logo-title'>";
  $sub .= "My Website Textlogo";
  $sub .= "</h1>";
  return $sub;
}

pay attention on usage of quotes – if you wrap the inserted html by double quotes – you had to use for classes, alt, href, title etc inside it single quotes.

I’m on a Retina display here and can’t test it under all eventualities – maybe you needed to remove that rule set:

@media only screen and (max-width: 1425px) {
  video {
    object-position: -335px;
  }
}

and find your own media-query setting for it maybe with more conditions like -webkit-min-device-pixel-ratio: 2 or min-resolution: 192dpi

maybe we start with :

@media only screen and (max-width: 875px) {
    video {
        object-position:-235px 
    }
}

It’s slowly becoming a paid service ;)

i uploaded it to your page – and added for that inline logo ( it is now not .logo img but .logo svg ) additional code.

It’s a very good approximation – not 100%, but reasonable at the maximum size of 300px (the small circular rings have become circles). This is also not visible in the large png file.

see

In general, if an image is to respond to screen width and completely fill the surrounding container, the container height must match the image’s aspect ratio.

you can see what happens if you force your desired behaviour by : object-fit: fill
https://media.kulturbanause.de/2015/07/css-object-fit.html

if your parent container height is set by the other content – you can have that behaviour but will distort your image.
You can decide to have that image on object-fit: cover and then shift the important parts of the image by object-position.

see here an object-fit: fill on “About me” with Eiffel Tower :
https://webers-testseite.de/freelancer/#about

the height is determined by the big content on the left side (first flex-cell) – you can not have responsive behaviour on that image by that condition.

if you set on that img now

#about img {
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

the Eiffel Tower will stay in the middle and container is filled with image – not stretched – but cropped

can you please make a decision if you like to have boxed layout or not.
You can see on my stretched layout that it is quiet simple to fullfill your needs. – but with boxed layout it is hard to get.
Now you got on you page stretched layout – so see below the css ruleset.

this is my layout on that example page with stretched layout:

https://webers-testseite.de/vuur/