i see this in your DOM:

no child just enfold.

next: see if i switch on the usage of google web fonts via your privacy settings:
https://webers-testseite.de/jeroch.mp4

on your @font-face rules a lot of open-sans and one Din font:

activation of uploaded Fonts : the list of uploaded fonts is at the end of that enfold list:

something went wrong with your uploading ( on that child-theme with dinpro-light ) –
and yes i have seen that on your video the child was activate ( but now the theme itself is in use)

and you are shure, that these black bars are not integrated to your video?

First of all – your business location is Germany – so you had to be GDPR (DSGVO) compliant.
For that reason – do you have any entrance inside your theme to hamper google font support of the theme. F.e. via a snippet plugin?
like:

function my_output_google_webfonts_script( $activate ){
  return false;
}
add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );

OR

function enfold_customization_switch_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}
add_action( 'init', 'enfold_customization_switch_fonts' );

you only uploaded open-sans and din-alternate-cdnfonts

Next question: on your video i see that you are using a child-theme – but on your live site i do not see that you are using it?

ON your Privacy setting : if i accept using Google Web fonts i see:

my recommendation on GDPR compliance : use selfhosted fonts – upload them via font-manager as you did with open-sans.
Then you do not need to mention the google webfont usage hint on privacy.

footer, buttons und andere Elemente sind über diese Grundeinstellungen ( Allgemeines Styling ) gesetzt, aber diese Trenner werden wohl im Element (grid-row und dann die Zellen) gesetzt sein. Auch einige Sections HIntergrundfarben werden wohl im Element festgelegt sein.

Die Textlichen Hervorhebungen sind über :

#top .all_colors u, #top .all_colors span[style*="underline;"] {
  color: #719430;
  line-height: 1.4em;
  font-family: 'caveat',Helvetica,Arial,sans-serif;
  text-decoration: none !important;
  display: inline-block;
}

gesetzt.

Wenn du eine Liste hast welche Farbe du gegen eine andere austauschen willst, könntest du es auch über die Datenbank machen.
Tools wie https://de.wordpress.org/plugins/better-search-replace/ könnten da helfen.

Im Grunde betrifft es wohl nur 3 Tabellen (wobei ich in dem Fall Groß/Kleinschreibung misachten würde):

on https://kriesi.at/themes/enfold-2017/elements/magazine/ you want to preserve the bigger image post and have on the smaller images a two column view?

to have:

you can have this by css only – but you had to break earlier to responsive case to have enough space for showing the articles with smaller images:

#top .av-magazine-sideshow:before,
#top .av-magazine-sideshow:after {
  display: none;
}

#top .av-magazine-sideshow {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top .av-magazine-sideshow .av-magazine-entry {
  flex: 0 1 48%;
  width: unset;
}

I can reproduce this by frequently narrowing and widening the browser window on smaller screen widths. This increases the calculated height of the column each time.

i think the trouble comes from setting the column height not color-section height of those headings to 100%.

maybe it is best to use here an absolute min-height option: f.e.: 250px

I don’t quite understand the intention behind setting the height of a column. The height of the column depends on the content.
i would set this min-height option to color-section only.

#top #header_meta .sub_menu {
  padding-top: 10px;
}

this will end in a same baseline – if you like to have it more centered then use perhaps 9px

…

when on your example page the widgets contents change ( f.e. below 768px) we have to have that alternativ content.
so put in that widget areas that alternative content – and on wider screens we set them to display none – and on smaller screens vice versa.
by css.

there had to be some fine-tuning on very small screens (mobile phones) . but we could do that later …

_____________________________

by the way – just for info – you see here on showing the grids in dev tools f.e. below 990px:

first you see the gaps ( 20px 40px)
then you see there are 4 columns and two rows ( all columns have the same width but different height – 1fr = one fraction)
first row: the 3 first grid-cells are filled with that area2 the 4th grid-cell is filled with area4 (“area2 area2 area2 area4”)
last row: first 2 cells filled with area1 – last 2 cells are filled with area3 (“area1 area1 area3 area3”)

__________________

info – you do not need to fill every cell you could have f.e. here on first row: “area2 area2 . area4” the dot indicates an empty cell

see here a nice post: https://css-tricks.com/snippets/css/complete-guide-grid/
You do not need to always declare the grid areas – but if you want to change postion for different screensize – then this helps you to better address the different selectors.

replace these to rulesets:

#header_main {
	display: flex; 
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
}

#header_main .widget {
	flex: 0 0 auto;
}

#text-3 {
  text-align: right
}

BUT: you will come to conflict if you go to responsive bahaviour, because the logo container is part of the flex items.
i would try to do that not by flex layout but by grid layout.

ich denke da muss man noch an den Regex nacharbeiten. Ich habe mal Günter gefragt ob er sich der Problematik annehmen möchte.
Leider sind meine Skills da begrenzt.

this is how gtag manager is implemented – Change the GTM-XXXXX with your code:

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

how to set the conversion – please inform on google docu.

Hier wäre es ja auch zunächst sinnlos, denn das Hovern zeigt dir ja dann die Rückseite – wozu also den Link auf dem Icon haben?
Es gibt allerdings die Möglichkeit zunächst beim Öffnen die Rückseite zu zeigen, und dann bei Hover die Frontseite. In dem Fall siehst du dann das Icon –
klickbar ist hier wie auch im anderen Fall immer die gesamte Fläche.

– wenn man den Link nicht in den Backside Content als Link einfügt sonder diese Option dort nutzt ( – Erweitert – Link Einstellungen )

Den Punkt “Inverse Layout – Ignored For Tooltip” findest du da, wo du den Rückseiten Inhalt eingegeben hast als Checkmark.

Hier die erste Flipbox (oben) ist mit reverse order: https://webers-testseite.de/4inarow/

and that filter is set like described on my post:

There is now a filter for this which you can set in the child-theme functions.php.

and this will not hamper anchor links.

on the page you linked above – i can see the id=”kontaktfooter” but found no link inside the DOM : href=”#kontaktfooter” neither on desktop view nor on mobile view.

by the way: if you link to the kontakt page: https://augemusic.at/kontakt/
you can choose inside editor that you only show the socket and not show the footer. – Why – then you will not see two kontakt forms.

can you post the child-theme functions.php here?
(if so – please use the code tag)