How to set correct routes for lightbox

The CMS Questions
1

Hello!

I want to open a lightbox with the media of each folder (content/inhalte/inhalt).
But I don’t find the right settings for the route to work. Any ideas, where I went wrong?

What I get at the moment is a lightbox with: Kein Inhalt gefunden für UUID: de

in my config.php:

<?php

return [
    
    'languages' => true,

    // Route für AJAX (Lightbox mit Lazy Load öffnen)
    'routes' => [
      [
        'pattern' => 'ajax/lightbox/(:any)',
        'language' => '*',
        'action' => function ($uuid) {
          $fullUuid = 'page://' . $uuid;

          // Suche den Page-UUID-String korrekt
          $inhalt = page('inhalte')->children()->listed()->filter(function($child) use ($uuid) {
              return $child->uuid()->id() === $uuid;
          })->first();
          

          if (!$inhalt) {
            return 'Kein Inhalt gefunden für UUID: ' . $uuid;
          }

          return snippet('lightbox-content', ['inhalt' => $inhalt], true);
        }
      ]
    ]

];

in my home.php:


<?php if ($inhaltPage = page('inhalte')): ?>
  
  <div class="layer layer-01" id="01">

    <?php foreach ($inhaltPage->children()->listed() as $inhalt): ?>
      <?php $uuid = $inhalt->uuid()->id() 
      
      <div class="content-block 01-block"
          data-lightbox-target="lightbox-content"              
          data-uuid="<?= $uuid ?>"
          data-slug="<?= $inhalt->slug() ?>"
          onclick="openLightbox(this)">

        <?= $inhalt->title() ?>

      </div>

    <?php endforeach ?>
  </div>

…

  <!-- Leere Lightbox -->
  <div id="lightbox-content" class="lightbox" style="display:none;">
    <div class="lightbox-inner">
      <div class="close-button" onclick="closeLightbox()">×</div>
      <div class="lightbox-body" data-loaded="false"></div>
    </div>
  </div>

in meinem JS:

// Lightbox 

function openLightbox(el) {
  const uuid = el.dataset.uuid;
  const slug = el.dataset.slug;
  const lb   = document.getElementById('lightbox-content');
  const body = lb.querySelector('.lightbox-body');

  // URL-Hash setzen
  location.hash = slug;

  // Lightbox sichtbar machen
  lb.style.display = 'block';
  body.innerHTML = 'Lade…';
  body.dataset.loaded = "false";

  // AJAX laden → nutzt window.CURRENT_LANG_URL aus home.php
  fetch(`${window.CURRENT_LANG_URL}/ajax/lightbox/${uuid}`)
    .then(res => res.text())
    .then(html => {
      body.innerHTML = html;
      body.dataset.loaded = "true";
    });
}