do not use the url as youtu.be link but – as watch link ( by the way youtube itself changed the url to that.)
https://www.youtube.com/watch?v=B-aLuJuVgKU

By the way: As long as it is not mandatory to specify this si parameter for a link, I would not use it.
on my opinion it is a “tracking” code and is Source Identifier. WHY?

on my test page the dropcap2 looks like this: https://webers-testseite.de/4inarow/ i just shifted the h3 a little to the middle of the circle – but thats all. (10 depends on h3 size setting)

.av_dropcap2 + h3 {
  position: relative !important;
  top: 10px;
}

in dem Fall hätte ich ein Bild zunächst so bearbeitet wie du es wünscht ( eben auch mit der Einstellung das es in der Lightbox öffnet ) und dann dieses mehrfach kopiert (“copy and add last entry”) – danach dann nur die Bilder getauscht.

Leider ist es so, die Arbeit kommt vor dem Lohn.
Unterschiedliche Captions und Overlays und Tag Einstellungen etc. müßtest Du ja auch pro Slide einstellen.

because sometimes it is usefull to have a title tag on an image ( becaue if you like to show it in a lightbox – this will be the caption for it by default) it makes sense to only remove them on hovering the image – for that put this to your child-theme functions.php:

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img, *[title]');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

A temporary storage takes place to a data-tooltip – and on mouseout or click (mousedown) it will bring back the title tag.

By the way – your example pages do not use the title tag on their images:

A variety of font size settings are available in Enfold.
As Rikard mentioned above: Enfold->General Styling->Typography.
(click to enlarge the images)

or on each alb with text there are options to have different font-sizes depending on screenwidth – f.e. headings:

I sometimes prefer the option to set a fluid font size – for this I activate the option to change the field for setting the font size to an input field.
on a (default hidden option) – you can choose to have that:

on that page here you can calculate that css for it – for maximum browser support, i use the min-max option – see image on the bottom
https://websemantics.uk/tools/fluid-responsive-property-calculator/

f.e.:

see an example page : https://webers-testseite.de/heading-with-fluid-font-size/

Auch WPML hat diese Umschaltung:
WPML > Sprachen > Sprachen berabeiten und nutze das folgende Gebietsschema (Default locale) für Deutsch:
de_DE-formal
Mit diesem Gebietsschema wird WordPress automatisch die formellen, deutschen Sprachdateien für WordPress, Themes und Plugins anwenden, sollten diese vorhanden sein.

bzw. solltest Du es für die schweizer Version benötigen: Die gibt es für formal leider nicht (auch bei WordPress nicht). – Wäre also für dich eine Herausforderung die zu liefern ;)
für eine automatische Ersetzung des “ß” gegen “ss”
oder der „“ gegen «» gibt es bestimmt eine Lösung ;)

f.e. in child-theme functions.php:
sorry – Board Soft transfered my code snippet to something different : see here on pastebin: https://pastebin.com/2jDyQLGs

copy/paste without the php start
PS: letztere Ersetzung wird kaum vorkommen, da es das Große “ß” ist

überprüfe das mal ob wirklich der Header sich in den Maßen ändert. Ich denke die Section verändert sich dadurch, und da sowohl Header als auch Section ähnliche Hintergrundfarben haben siehe es so aus als würde der header höher. Da Logo bleib jedenfalls in seiner Größe gleich.

Ausserdem hast du ja unterschiedliche min-height Einstellungen gesetzt- und das mit unterschiedlichen Hintergrundbildern.

What you are looking for is called a tooltip. You could create this manually yourself by placing a text after the texts that require explanation inside a f.e. span tag with a special custom class and then using this class to show/hide it when hovering.

However, if you use this frequently, this is probably a cumbersome method. There are probably some plugins that could do just that.
see for example that demo: https://tooltips.org/wordpress-tooltip-plugin/wordpress-tooltips-demo/

First On Theme Options you find at the bottom: “Select Your Editor” – choose the classic editor

Next if you like to see at start the advanced builder editor you can add this to your child-theme functions.php:

function trigger_alb_on_load(){
?>
<script>
(function($){
    $(window).on('load', function(){
      setTimeout(function() {
        $("#avia-builder-button").trigger('click');
      }, 300);
    });
})(jQuery);
</script>
<?php
}
add_action('admin_head-post-new.php', 'trigger_alb_on_load');

den “Jump” wirst du ja nur an Desktop Browsern sehen. Ein Mobiles Endgerät wird nur in der Lage sein beide Zustände zu sehen, wenn die Größe des Displays im Querformat mehr als diese 768px beträgt. Durch das Kippen ist aber ohnehin soviel optisch im Umbruch, dass man das Springen hier kaum wahrnehmen kann. Das Phänomen tritt ja nur auf, bei Desktop Browsern, deren Größe durch ziehen des Fensters verkleinert wird.

Ich finde das Verhalten des Hintergrundbildes im responsiven Fall der ersten color-section da viel schlimmer.

___________

You will only see the “jump” on desktop browsers. A mobile device will only be able to see both states if the size of the display in landscape format is more than 768px. Due to the tilting, however, there is so much visual change anyway that you can hardly notice the jumping here. The phenomenon only occurs with desktop browsers whose size is reduced by dragging the window.

I find the behavior of the background image in the responsive case of the first color section much worse.

Der dreht euer X im Logo auf Plus bei geöffnetem Burger Menü – kleine Spielerei

:lol:

.avia-svg-logo g:nth-of-type(5) {
  transform-origin: 155.25px 18.8px;
  transition: transform 0.3s ease;
}

.av-burger-overlay-active .avia-svg-logo g:nth-of-type(5) {
  transform: rotate(45deg);
  transform-origin: 155.25px 18.8px;
}

looking to your svg now ( a former topic got the link to your page)
the “Ideen” text is black because its class st8 is not set in the defs/style – every not referenced fill will be black.

i do not know how you use the path, circles etc in your illustrator.
first : there are other elements inside that svg ( your scetch for example is inside the svg – that is the reason for its big file-size)
next: why clip-path settings ? do you edit your svg in another program?

look at this svg code on my example page:
it has unique classes without any clip-path need. It has a size of 5kb due to only using vector elements.
https://webers-testseite.de/ausgesonnen/

btw: you can see here how you can determine other classes (graphic-styles) in illustrator.: https://kriesi.at/support/topic/transparent-logo/#post-1459268

The logo is an inline svg file – is your svg inside the color-section an inline svg too?
– Why asking this: if you got two inline svg files with the same classes inside ( and that often happens if you use illustrator – because if you do not set the grafic styles – illustrator uses in former times st as class – now it is : cls ).
now your logo is often the first svg on your DOM – if now the next svg has a different color setting for that standard class – it will determine the color for all those classes for the whole page – (cascading style sheet).

eg: if the class inside the logo there is : .st1{fill:#EB5F3D;}
and another st1 is on that page – this will determine the fill color.

so – be more specific in your selectors:
e.g.:

#top.page-id-123 .avia-svg-logo .st1 {
  fill: #FFFFFF;
}

ok – was genau ist mit “funktioniert nicht” gemeint?
– bei Scroll das flickern der Hintergrund Grafiken?

Ist es sinnvoll 3 columns nebeneinander in eine 1/2 Grid-Zelle zu pressen?
(PS man kann übrigens, die Cell-Breiten ändern : “Set Cell Size”)

PPS: ich denke hier an Board sollten wir untereinander Duzen. Im Englischen ist da ohnehin kein Unterschied.
– weiterhin ist die Seite – und das brauche ich Dir ja nicht sagen – extrem abmahngefährdet ( gstatic/recaptcha etc. läßt grüßen )