do you think of that perhaps?
https://enfold.webers-webdesign.de/3-columns/

ok – du hast jetzt statt bold das mit der Farbe realisiert, das die Jahre in einen eigenen tag kommen. Das wäre so nicht nötig gewesen.
Denn die Farbe hättest du dann generell über dieses den strong-tag setzen können; so wie ich es auf der Beispielseite tat. Den bold style hatte ich dann ja mittels css zurückgenommen.

damit meine Setzungen greifen, könntest Du jetzt eben das über dein span-tag machen:

#top .my-listings li {
  display: grid;
  gap: 0 20px;
  grid-auto-flow: row;
  grid-template-columns: 120px 1fr;
  justify-content: start;
  margin: 0;
  margin-bottom: 10px;
}

#top .my-listings li span {
  font-weight: normal;
  justify-self: end;
}

#top .my-listings li em {
  font-style: normal;
}

/* === responsive styling === */
@media only screen and (max-width: 469px) {
  #top .my-listings li {
    grid-template-columns: 1fr;
    justify-content: center;
    margin-left: 0 ;
  }

  #top .my-listings li span {
    font-weight: normal;
    justify-self: start;
  }
}

Das mit dem Kursiv setzen für den rechten Text brauchst du nur wenn du einzelne Begriffe dort verlinken möchtest. Wenn du immer den kompletten rechten Teil verlinkst, wie es in einem Beispiel auf deiner Seite war ist dies noch nicht mal nötig, da dann der ganze linke Teil in einem a-tag steht.

Diese Einstellung hier bestimmt wo die Jahre bündig sind:

#top .my-listings li span {
  font-weight: normal;
  justify-self: end;
}

wenn du z.B die lieber linksbündig hast, dann stelle justify-self : start
(ps kopiere und ersetze die my-listings Regeln komplett, da ich noch das margin-left der enfold Standard Einstellung damit überschrieb. Der #top selektor garantiert hier noch das ich keine unnötigen !important Regeln setzen muss um bestehende Regeln von Enfold zu überschreiben.

bei deiner Schriftgröße würden für den linken Teil der Jahre auch 90px reichen:
grid-template-columns: 90px 1fr;

wenn du die Jahre jetzt auf einen Schlag verändern willst, dann könntest du jetzt setzen ( bold und andere font farbe)

#top .my-listings li span {
  font-weight: bold;
  justify-self: start;
  color: #3f9681 !important;
}

(ps hier ist das !important nötig, da du einen inline-style gesetzt hattest – mit dem Einfärben im Textfeld)

wenn du der ganzen Liste ( also dem ul tag ) nur noch eigenschaften geben möchtest :

#top .my-listings {
  padding: 5px;
  background-color: #f8f8f8;
  border: 1px solid #3f9681; 
  border-width: 1px 0px 0px 1px !important; /* unterschiedliche Border Weiten für : Oben, Rechts, Unten, Links */
}

Resultat wäre dann:

wenn dir der Abstand der Zeilen ( der li elemente ) zu groß ist, dann ändere diesen Wert bei den
#top .my-listings li auf z.B. 5px

du siehtst, über diese custom class my-listings – ist dann alles geregelt. Sobald du eine Liste einsetzt, und den text-block mit der Klasse versiehst, wird die darin enthaltene Liste so dargestellt.

_____________

Responsiv ( für Mobile screenweiten im Hochkant Format)

Before you change anything, create a backup copy of your site’s status quo (a good plugin, even in the free version, is: duplicator)

I would recommend this approach to everyone, especially for major updates (5.x to 6.x; …). This way, you always have a rollback option in the background.

The advantage of this method is that it can be reversed.
Uploading the new theme takes a little time; if everything goes well, the website will only be offline for a short time (only for the moment of renaming).

Update via ftp

• Download the “installable WordPress file only” file from themeforest and unzip it
• After that – you got a folder : enfold
• Rename this downloaded newest version to enfold-new
• via ftp: Upload that enfold-new folder to the themes folder
• ftp: You now have the “enfold” folder (the older version) and the “enfold-new” folder side by side.
• via ftp: Rename the existing enfold folder to f.e. enfold-old
• via ftp: Rename your uploaded enfold-new folder now to enfold
• On Enfold – Performance – check mark and “Delete Old CSS And JS Files?”
• Check if your Website works to your full satisfaction.
• Yes – then stop here – Update is finished
• After a while of testing – you can delete that enfold-old folder via ftp

• No – delete or rename back the enfold folder back to enfold-new
• rename the enfold-old folder back to enfold
• check on enfold board if there are known bugs – or similar problems

PS: I’m not sure if the new Enfold also has requirements for the PHP version number.
Log in to your hoster and check which PHP version is set there.
Most hosts will show you which PHP version they currently prefer (8.2, 8.3—some even recommend the 8.4 PHP version).

ich weiss ehrlich gesagt nicht warum du dir das leben schwer machst.
Einfach eine Liste anlegen innerhalb eines Text-Blocks – die Jahre fett setzen, und dann nur noch diese Text Element mit einer Klasse belegen.
Den Rest macht das CSS. Da musst du nicht einmal html code setzen – oder ein Tabellen Plugin nutzen etc. Pures Enfold.

css auf der Seite: https://webers-testseite.de/joeconnert/

_________

To be honest, I don’t know why you’re making life difficult for yourself.
Just create a list within a text block – put the years in bold, and then just assign a class to this text element.
The CSS will do the rest. You don’t even have to set any HTML code.

CSS on the page: https://webers-testseite.de/joeconnert/

get familar with dev tools of your browser. point to the menu-item and choose on context menu : inspect or similar .

or you can just count the li’s without knowing the ID’s:

#av-burger-menu-ul > li .av-submenu-indicator {font-size: 30px; opacity: 1}
#av-burger-menu-ul > li .av-submenu-indicator:before {content: "\E875";font-family: 'entypo-fontello';}

#av-burger-menu-ul > li:nth-child(1) .av-submenu-indicator {color: #FFF}
#av-burger-menu-ul > li:nth-child(2) .av-submenu-indicator {color: yellow}
#av-burger-menu-ul > li:nth-child(3) .av-submenu-indicator {color: lightgreen}
#av-burger-menu-ul > li:nth-child(4) .av-submenu-indicator {color: lightskyblue}

maybe it is better to set this burger menu to be placed at a top position – try and look what is better:

#top #av-burger-menu-ul {
  vertical-align: top;
  padding: 200px 0 !important;
}

make a unordered list in a textblock – give a custom class to it – f.e.: my-listings
mark the years and make them bold via tiny-mce button

then just put this to your quick css:

.my-listings ul {
  list-style: none !important;
}

.my-listings li {
  display: grid;
  margin: 0;
  gap: 0 30px;  
  grid-auto-flow: row;
  grid-template-columns: 140px 1fr; 
  justify-content: start;
}

.my-listings li strong {
  font-weight: normal;
  justify-self: end;     /** now your years "float" right. **/
}

and:

/* === responsive styling === */
@media only screen and (max-width: 469px) {
  .my-listings li {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .my-listings li strong {
    font-weight: normal;
    justify-self: start;
  }
}

see your list including css code on : https://webers-testseite.de/joeconnert/

making the years bold will set the html to :
<li><strong>2011 – 2012</strong> Medizinische Trainingstherapie (Diemer & Sutor)</li>
So we have the option of selecting them separately. And bring them in a grid-layout

This: grid-template-columns: 150px 1fr;
determines the “column” width – the first one (the strong years) will have width of 150px – the other “column” fills the rest (fr: means fraction)

The selfhosted Font-Files are the the gold-standard in beeing GDPR compliant. ;)

you like to have the oswald font for them? How did you embed the font? via Font-Manager / selfhosted or just by choosing it form the drop-down on Enfold – General Styling – Fonts ? i do not find any @font-face rule
i can find a redefinition of :

:root {
  --enfold-font-family-heading:'oswald',Helvetica,Arial,sans-serif
}

but if there is no loading of oswald then the Helvetica is loaded

by the way – what is hu-blocked – i can see a block of google webfonts – maybe that is the reason for it.

PS i can reproduce it – before consent – and after reload – one looks more condensed than the other one.

PPS: i recommend using a selfhosted font – by font-manager of Enfold

try this in child-theme functions.php:

function custom_replace_burger_anchor_with_button( $items, $args ){ 
    $pattern = '/(<li[^>]*class="[^"]*av-burger-menu-main[^"]*"[^>]*>)\s*<a([^>]*)>/is';
    $items = preg_replace($pattern, '$1<button type="button" $2>', $items);
    $items = preg_replace('/<\/a>(\s*<\/li>\s*$)/', '</button>$1', $items);
    return $items;
}
add_filter( 'wp_nav_menu_items', 'custom_replace_burger_anchor_with_button', 9999, 2 );

BUT: Please note that in this case, you will no longer need to assign all styles to the a tag, but rather to the button tag.
In this case, it might be better to use role=”button” and class=avia-button.

function custom_enhance_burger_anchor_regex( $items, $args ) {
    $pattern = '/<a href="#" aria-label="(.*?)"/i';
    $replacement = '<a href="#" role="button" class="avia-button" aria-label="$1"';  
    $items = preg_replace($pattern, $replacement, $items);
    return $items;
}
add_filter( 'wp_nav_menu_items', 'custom_enhance_burger_anchor_regex', 9999, 2 );

No CSS break: Since it remains an anchor-tag, all Enfold styles for the menu continue to work perfectly.
A11y-compliant: With role=”button,” we tell the screen reader: “Ignore that there is a link here; treat this element like a button.”

maybe it is better to not add the class avia-button because it might come into conflict with some stylings.
use a different class there f.e.: avia-burger-button
then you can easily select it via this class.

try in your child-theme functions.php:

function ava_custom_toggle_behavior(){
?>
<script type="text/javascript">
(function($) {
    $(window).on('load', function() {
        $('.toggler').on('click', function() {
            var $current = $(this);
            
            // Short delay so Enfold can set its own classes
            setTimeout(function() {
                if ($current.hasClass('activeTitle')) {
                    // Find all other togglers on the page that are active
                    $('.toggler').not($current).each(function() {
                        if ($(this).hasClass('activeTitle')) {
                            // Simulate click or remove classes manually
                            $(this).trigger('click');
                        }
                    });
                }
            }, 100);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_toggle_behavior');

or even better – just use the team-member element as it is and parse a popup by your own.
see with snippet on that example page: https://webers-testseite.de/teammember-vitae-2/
PS: It is always best to examine each individual case closely, as this is the only way to offer a customized solution. Otherwise, one indulges in speculation.

The last solution has the advantage that you only use the pure Enfold element for team members and then create your own lightbox with it. Disadvantage: you would have to rebuild your page and discard our previous design. In the window on the right side of the page, you can see that only plain text is entered in the Description Input Fiele — the Lightbox retrieves the image, name, and position from the existing DOM elements.
To change the aria-label – just edit these lines:

tPrev: 'Previous Biography',
tNext: 'Next Biography',

It depends a little on how you want to use it. If you only want to change this to “next bio” and “previous bio” for certain custom classes, we would need to rewrite this code a little.

f.e. if you have a gallery – then you can give a custom class to that gallery element (f.e. team-member)

function add_magnific_popup_aria_labels() {
    ?>
    <script type="text/javascript">
    (function($) {
        'use strict';
        
        if (typeof $.avia_utilities !== 'undefined' && typeof $.avia_utilities.av_popup !== 'undefined') {
            
            var originalOpenCallback = $.avia_utilities.av_popup.callbacks.open;
            
            $.avia_utilities.av_popup.callbacks.open = function() {
                
                if (typeof originalOpenCallback === 'function') {
                    originalOpenCallback.call(this);
                }
                
                var self = this;
                
                setTimeout(function() {
                    // Determine labels based on the gallery container
                    var prevLabel = 'Previous image';
                    var nextLabel = 'Next image';
                    var closeLabel = 'Close lightbox';
                    
                    // Check if the clicked element (currItem.el) is inside a container with a custom class
                    if (self.currItem && self.currItem.el) {
                        var $link = $(self.currItem.el);
                        
                        // Find the parent lightbox container element
                        var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');
                        
                        if ($lightboxContainer.hasClass('team-member')) {
                            prevLabel = 'Previous person';
                            nextLabel = 'Next person';
                            closeLabel = 'Close biography';
                        } else if ($lightboxContainer.hasClass('products-gallery')) {
                            prevLabel = 'Previous product';
                            nextLabel = 'Next product';
                            closeLabel = 'Close product gallery';
                        } else if ($lightboxContainer.hasClass('projects-gallery')) {
                            prevLabel = 'Previous project';
                            nextLabel = 'Next project';
                            closeLabel = 'Close project gallery';
                        }
                        // Add more conditions as needed
                    }
                    
                    $('.mfp-arrow-left').attr('aria-label', prevLabel);
                    $('.mfp-arrow-right').attr('aria-label', nextLabel);
                    $('.mfp-close').attr('aria-label', closeLabel);
                }, 50);
            };
            
            var originalChangeCallback = $.avia_utilities.av_popup.callbacks.change;
            
            $.avia_utilities.av_popup.callbacks.change = function() {
                
                if (typeof originalChangeCallback === 'function') {
                    originalChangeCallback.call(this);
                }
                
                var self = this;
                
                // Update labels when changing images
                var prevLabel = 'Previous image';
                var nextLabel = 'Next image';
                
                if (self.currItem && self.currItem.el) {
                    var $link = $(self.currItem.el);
                    var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .isotope, .av-horizontal-gallery');
                    
                    if ($lightboxContainer.hasClass('team-member')) {
                        prevLabel = 'Previous person';
                        nextLabel = 'Next person';
                    } else if ($lightboxContainer.hasClass('products-gallery')) {
                        prevLabel = 'Previous product';
                        nextLabel = 'Next product';
                    } else if ($lightboxContainer.hasClass('projects-gallery')) {
                        prevLabel = 'Previous project';
                        nextLabel = 'Next project';
                    }
                }
                
                $('.mfp-arrow-left').attr('aria-label', prevLabel);
                $('.mfp-arrow-right').attr('aria-label', nextLabel);
            };
        }
        
    })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'add_magnific_popup_aria_labels', 999);

you see this line includes masonry etc. if you like:

// Find the parent lightbox container element
var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');

Solutions
This security issue has a low severity impact and is unlikely to be exploited.

maybe it is not so urgent ;)

____________________
Perhaps it’s time to introduce a nonce solution for all Enfold scripts?
(for my own i have written a small plugin that will bring to every script/inline-script a nonce-key; and my csp directive says:
script-src ‘nonce-key==’ ‘strict-dynamic’ ) that is the best against XSS – and check f.e. on: https://securityheaders.com/?q=https%3A%2F%2Fwebers-testseite.de&followRedirects=on )

PS – if you only want to avoid that on small screens the slider images will be less height then the inner content. there will be an option to have a min-height for it: