i could not test it now if it works – but the code from : https://kriesi.at/support/topic/accordion-slider-stop-allowing-all-images-to-show-in-slider/#post-1435166 does not lead to a functions.php error on my end here – means – the syntax is o.k.

You could set the grouping manually, using custom classes in combination with scripts in functions.php; in general, however, it is sufficient to keep the corresponding elements within a color section. And then set a new section for the next element.
Unfortunately I can’t see your page to give better advice.

but: do not forget on avf_header_setting_filter_mod to add the class to header!
(preserve the a space on the first class that is added)

$header['header_class'] .= " av_header_transparency";

and conditional for search is : is_search( )

add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
function avf_header_setting_filter_mod($header){
    if ( is_archive() || is_singular('post') || is_search() ) {
        $header['header_transparency'] = 'header_transparency';
        $header['header_class'] .= " av_header_transparency";
    }
    return $header;
}

No, not as the opposite, but in all corners. However, this property can also be intended for one corner each.

have you seen this :
(click to enlarge the image)

i do have this nearly on all my installations in the htaccess file:

<IfModule mod_headers.c>
Header set X-Frame-Options "sameorigin"
Header set Referrer-Policy "strict-origin-when-cross-origin"
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options "nosniff"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header always set Content-Security-Policy "upgrade-insecure-requests"
Header always set Permissions-Policy "geolocation=(), midi=(),sync-xhr=(),accelerometer=(), gyroscope=(), magnetometer=(), camera=(), fullscreen=(self)"
</IfModule>

and had never such problems – but maybe you are right – it could be matter of inline css files. I do allway set this to my child-theme functions.php:

function custom_avf_post_css_create_file( $create ){
  return true;
}
add_filter( 'avf_post_css_create_file', 'custom_avf_post_css_create_file', 10, 1 );

yes – please excuse me for not explicitly mentioning this.

Again my question : you like to have on lightbox only your caption – or do you like to have a combination of title + caption or alt + caption ?
see: https://webers-testseite.de/images-with-caption/

The trick is to have an own lightbox behavior on that links.
In the script, I first tested preventing the original event with preventDefault. This sometimes worked – but sometimes not. I therefore set the noLightbox class for these links. This removes the class lightbox-added and I can then program a new behavior. Including a new markup (here, however, it is the standard markup).

do you like to see only the caption in the light box – or only caption if present – if not show title – or show both title and caption?

no – and on his target-page all works now as expeted – so i think it is solved.

for example on your page:
entering my code to developer tools:

by the way : inspecting your css – see here the error:
the curly bracket should be after the positioning

goto Enfold (Child) – Import/Export – Custom Font Manager and upload that zip ( there are ttf and woff2 fonts inside and only 100, 400, 700 weights)
but i think that this is enough for all circumstances.
If you need all font-weights – tell me.

https://webers-testseite.de/Prompt.zip

after uploading – the new font could be found on enfold (child) – general styling – fonts at the end of that drop down list inside “Uploaded Fonts”

https://similarfont.io/3-google-fonts-similar-to-avenir-next

Prompt seems to be a good alternative : Prompt

How would it be if the info field that appears on click disappears again after a certain time?
see example page.

as mentioned above : codeblock with your svg code inside and custom class: wordcloud

codeblock is important – because you need that svg as inline-svg – not as img

this is the function i only transfered to child-theme functions.php:
(in my case only for that example page (page id: 44324))

function wordcloud_trigger_images() { 
if(is_page(44324)){
?>
<script type="text/javascript">
  var wordcloud = document.getElementsByClassName('wordcloud')[0];

  if (wordcloud) {
    var triggerword = document.querySelectorAll(".wordcloud g[id^='Trigger_']");
    var wordgroups = document.querySelectorAll(".wordcloud g[id^='Box_']");
    Array.from(triggerword).forEach(function (t) {
      t.addEventListener('click', function (e) {
        var triggerid = this.id;
        var triggertargetid = triggerid.replace('Trigger', 'Box');
        Array.from(wordgroups).forEach(function (w) {
          w.classList.remove('is-visible');
        });
        document.getElementById(triggertargetid).classList.add('is-visible');
      });
    });
  } 
</script>
<?php 
}
}
add_action('wp_footer', 'wordcloud_trigger_images');

your svg code : https://pastebin.com/Sw5Nyr3m

the quick css:

.wordcloud {
  margin: 2rem auto;
}

.wordcloud svg {
  width: 100%;
  height: auto;
}

.wordcloud svg g[id^=Trigger_] {
  cursor: pointer;
  display: block;
}

.wordcloud svg g[id^=Box_] {
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
}

.wordcloud svg g[id^=Box_].is-visible {
  opacity: 1;
}

.wordcloud path {
  pointer-events: none !important;
}

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

PS: one little error is on your svg code on “Durchblicker” it is the only trigger without a rect inside to have a clickable area – so you had to aim exactly the “letters” if the mouse is over a space – there is no pointer. – on my svg code on pastebin i added that missing rect.