was genau hast du hochgeladen? den Font selbst – einen Ordner mit dem Font darin? oder doch ein zip file mit besagtem Ordner?
Welches Format hat dein Font file?

Das hier in die Child-Theme functions.php:

function my_datepicker_defaults() {
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($) {        
    $(".avia_datepicker").datepicker({
		beforeShow: function(input, inst) {
			jQuery("#ui-datepicker-div").addClass(this.id);
			inst.dpDiv.addClass("avia-datepicker-div");
		},
		showButtonPanel: true,
		closeText: AviaDatepickerTranslation.closeText,
		currentText: AviaDatepickerTranslation.currentText,
		nextText: AviaDatepickerTranslation.nextText,
		prevText: AviaDatepickerTranslation.prevText,
		monthNames: AviaDatepickerTranslation.monthNames,
		monthNamesShort: AviaDatepickerTranslation.monthNamesShort,
		dayName: AviaDatepickerTranslation.dayNames,
		dayNamesShort: AviaDatepickerTranslation.dayNamesShort,
		dayNamesMin: AviaDatepickerTranslation.dayNamesMin,
		dayNames: AviaDatepickerTranslation.dayNames,
		dateFormat: AviaDatepickerTranslation.dateFormat,
		firstDay: AviaDatepickerTranslation.firstDay,
		isRTL: AviaDatepickerTranslation.isRTL,
		minDate: AviaDatepickerTranslation.minDate,
		changeMonth: true,
		changeYear: true,
		yearRange: "c-100:c+10",
	});          
}(jQuery)); 
}); 
</script>
<?php
}
add_action('wp_footer', 'my_datepicker_defaults', 20);

Wenn du nicht in Abhängigkeit vom current Year ( das was oben gerade in der Leiste angezeigt wird ) die Dropdown Zeitspanne angeben willst kannst du auch oben stattdessen absolute Werte eintragen:
yearRange: "1900:2034", oder ein Mix: yearRange: "1900:c+10",

Leider fand ich keine Möglichkeit mich in die Funktion einzuhaken , um nur diesen Wert zu ändern , und die default Werte unverändert zu belassen.
die Einstellung yearRange ist hier zuständig.

you can see here an example not using the transparency option in enfold for a second alternative logo.
But here i start with a fill change on start – and after the class ( header-scrolled) is present – the initial fill is shown:

.html_header_transparency #header:not(.header-scrolled) .buchstabe {
  fill: #FFF;
}

https://webers-testseite.de/
all letters have that class “buchstabe” ( the german word for it. ) – i start with #FFF

Thats the old illustrator error. Because illustrator (in former versions) always uses this class with index ( st0, st1, st2 etc.)
So there is a mess if there are more than one inline svg used on a page. The last one on page makes the rules for that class.
The big advantage of using inline svgs is that you can influence some colors ( fill, stroke etc. ) by external css.
If you are now using the transparency logo option from enfold – that logo is placed later in the DOM than the primary logo.
If that logo uses the same classes inside ( sti ) than this will determine the rules for it.

You can use the code from Mike – but then do not use the transparency logo option. The fill color will then be set by that extra class set from enfold after header shrink scroll has finished.

My advice is – after Illustrator has saved the file – to open those svgs in a good text editor (Sublime Text for Mac or Notepad ++ for Windows) and change those classes to something more unique. Make sure that within the defs (style) you had to replace the .st1 and the class=”st1″ (etc.) in your svg.

PS: newer Illustrators will have the custom classes : cls-1 – same problem.

a lot of places do have the solution on this.
But a subsequent solution to the “problem” must be accompanied by a complete recalculation of the existing image formats. This is because you can only influence the calculation basis for the upload process. Existing images are not changed by the snippet alone.

some of the plugins that handle the recalculation do have a solution for uploading process too. Because i’m not shure if the enfold existing snippet:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

has influence on other image formats ( only pixel based can be handled on general ) but i guess that the snippet above does not work with png files.

A nice little tool is from Shortpixel reSmush.it – see some info: https://shortpixel.com/
for me the free version is good enough.

if you place a gallery – you can choose on style – gallery style : to show only one big image – and the rest will be shown in lightbox.

use that class: go-back-link for styling.

i have on some installations for posts/portfolio on top a goback button with this:

function go_back_button(){
?>
<script type = "text/javascript">
(function($){
  $('<div class="avia-button-wrap avia-button-left goback"><a href="" class="avia-button av-icon-on-hover avia-color-theme-color   avia-icon_select-yes-left-icon avia-size-small avia-position-center "><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">zurück</span></a></div>').prependTo('#top.single .post-entry:first');
  $('.goback').on('click', function(e){
      e.preventDefault();
      window.history.back();
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );

the window.history.back(); can do the job too.
but you can place that manually be each button with that class custom-class : goback
then only use:

function go_back_button(){
?>
<script type = "text/javascript">
(function($){
  $('.goback').on('click', function(e){
      e.preventDefault();
      window.history.back();
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );

Top Header – Logo left – menu right.
to have on start to all pages first the hamburger active and to generate the widget area – this to child-theme functions.php:

function custom_burger_menu_active( $active, $context ){
	return true;
	return $active;
}
add_filter('avf_burger_menu_active', 'custom_burger_menu_active', 10, 2 );

add_action('ava_after_footer_output', function() {
  echo '<div id="extra_sidebar" class="container_wrap extra_sidebar_color" role="contentinfo" ><div class="container" style="text-align: center; padding: 10px 0 20px">';
  echo do_shortcode("[av_sidebar widget_area='extra_sidebar']");
  echo '</div></div>';
});

this is for social bookmarks a shortcode to place inside a text-widget :

function social_bookmarks_shortcode() {
$social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
$social = avia_social_media_icons($social_args, false);
return $social;
}
add_shortcode('social-bookmarks', 'social_bookmarks_shortcode');

to use it as : [social-bookmarks]

now goto your widgets and create a new widget area : extra_sidebar
!!! to have on top a free space not to overlap the hamburger icon i placed to that a text-widget on top with an empty div container:

here is the css code: you can fit to your needs the amount of that extra bar:

 .responsive #top #wrap_all #header {
    position: fixed !important;
    height: 100px !important;
  }

.html_header_top #top #header .container {
  width: 100% !important;
  padding: 0;
  max-width: 100% !important;
}

.html_header_top #top #header .main_menu,
.html_header_top #top #header .av-main-nav-wrap,
.html_header_top #top #header .av-burger-menu-main {
  width: 100px;
  margin: 0 !important;
}

.html_header_top #top #header .av-burger-menu-main a {
  padding: 0 !important;
  text-align: center;
}

#top #header_main > .container, 
#top #header_main > .container .main_menu .av-main-nav > li > a, 
#top #header_main #menu-item-shop .cart_dropdown_link {
  height: 100px !important;
  line-height: 100px !important;
}

.header_color .header_bg, 
.header_color .main_menu ul ul, 
.header_color .main_menu .menu ul li a, 
.header_color .pointer_arrow_wrap .pointer_arrow, 
.header_color .avia_mega_div, 
.header_color .av-subnav-menu > li ul, 
.header_color .av-subnav-menu a {
  background-color: transparent !important;
}

.html_header_top.html_header_sticky #top #wrap_all #header {
  box-shadow: none
}

.html_header_top.html_header_sticky #top #wrap_all #main {
  padding-top: 0px !important;
}

.html_av-overlay-side #top .av-burger-overlay-scroll {
  background-color: rgba(0,0,0,0.5) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.responsive #top .av-logo-container .logo {
  display: none !important;
}

#extra_sidebar  {
  display: block;
  position: fixed;
  width: 100px !important;
  height: 100%;
  top: 0;
  right: 0px;
  left: auto;
  background-color: #FFF;
  z-index: 302 !important;
}

#extra_sidebar .container  {
  height: 100%;
}

.html_header_top #top #wrap_all #main {
  width: calc(100% - 100px);
  padding-top: 0px !important;
}

#top #extra_sidebar .avia-builder-widget-area {
  display: flex !important;
  flex-flow: column nowrap;
  justify-content: space-around !important;
  height: 90%;
  padding-top: 250px !important; /*** try your self a good looking value ******/
}

#top #extra_sidebar .avia-builder-widget-area:before,
#top #extra_sidebar .avia-builder-widget-area:after {
  display: none;
}

#top #extra_sidebar .avia-builder-widget-area > * {
  flex: 0 1 auto;
  -ms-writing-mode:tb-rl;
  writing-mode:vertical-rl;
  /*! transform:rotate(180deg); */
}

#top #extra_sidebar .avia-builder-widget-area svg,
#top #extra_sidebar .avia-builder-widget-area img  {
  width: auto;
  height: 70px;
  transform: rotate(90deg);
  transform-origin: top right;
  margin-right: 15px;
}

#top #extra_sidebar .widget ul.social_bookmarks  {
    transform: rotate(90deg) !important;
}

#top #extra_sidebar .widget ul.social_bookmarks li a {
    transform: rotate(-90deg) !important;
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px;
  }
}

I don’t know whether existing rules have played a role here. If it doesn’t work right away, please contact me again.

maybe have a look at: https://pureinstall.webers-testseite.de/dot-navigation-with-colored-sections/
here are all icons the same – but if you like these could be different

on very small screens the dot-nav goes to the bottom.

i can not see how the example page looks like – no chance to open it on my end her. Maybe there is no valid cert to open it with https.

inside this container you selected there is the anchor (a-tag) and inside this the logo file itself ( depends on your logo format: img or an inline svg)
so try the selector: #header .logo img or if you are using svg files : #header .logo svg

next you do not need to use the switch point to hamburger for that rule.
you can use the media query – when you need it f.e.:

@media only screen and (max-width:479px) {
  #header .logo img {
    transform: scale(0.8);
    transform-origin: center left;
  }
}

Leerzeichen : das zwischen Wörtern, oder meinst du Umbrüche?
Wie sieht es in der Media Library aus? Kannst du dort Beschriftungen oder Beschreibungen mit Leerzeichen einfügen?

or use normal html details / summary:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

<details>
<summary>read more …</summary>
 <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

PS : there are some ways to animate that details use.

Also mit dem iframe popup modus geht es:
https://webers-testseite.de/gallery-with-8-images/

wenn es das ist was gewünscht ist? dann kann ich das nochmal genauer beschreiben.
PS: die Einblendanimation muss allerdings als css hinzugefügt werden. Das war bei mir schon drin.

das hier: $('#header, #footer, #socket, .sidebar').hide();
blendet auf der Portfolio Seite dann alles aus was ich nicht im iframe haben möchte.

Da deine Seite ja auch auf deutsch ist, antworte ich mal auch auf deutsch.
Du hast ja hier eine Verlinkung zu einem Portfolio jeweils. Das heißt du lenkst zu einer Infoseite bezüglich dieses Beitragsbildes um.
Dort könntest Du so eine Bildergalerie anlegen, die genau das hat was Du haben möchtest. Diese Option ist aber nur bei der Bildergalerie gegeben.
Siehe unter Stil Tab – Galerie Stil ” Nur großes Bild – andere Bilder über Lightbox …”
Siehe z.B: https://webers-testseite.de/gallery-with-8-images/
was man jetzt machen könnte, wäre es so zu lassen, und auf den Portfolioseiten so eine Galerie einrichten. Die könnte man per script beim Laden öffnen lassen.