🖼️ Add "Close" translation across languages and introduce lightbox functionality for **KI-Assistent** images

lang/en.json

@@ -738,5 +738,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "Claude acts exclusively with your permission and in the context of your own account. You can disconnect at any time in claude.ai under »Connectors«.",
     "Du bist Entwickler?": "Are you a developer?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "Want to use the data directly via the interface? The API documentation lists all endpoints – including authentication via a personal token.",
-    "API-Dokumentation öffnen": "Open API documentation"
+    "API-Dokumentation öffnen": "Open API documentation",
+    "Schließen": "Close"
 }

lang/es.json

@@ -739,5 +739,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "Claude actúa exclusivamente con tu permiso y en el contexto de tu propia cuenta. Puedes desconectar en cualquier momento en claude.ai en »Connectors«.",
     "Du bist Entwickler?": "¿Eres desarrollador?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "¿Quieres usar los datos directamente a través de la interfaz? En la documentación de la API encontrarás todos los endpoints, incluida la autenticación con un token personal.",
-    "API-Dokumentation öffnen": "Abrir la documentación de la API"
+    "API-Dokumentation öffnen": "Abrir la documentación de la API",
+    "Schließen": "Cerrar"
 }

lang/hu.json

@@ -735,5 +735,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "A Claude kizárólag a te engedélyeddel és a saját fiókod kontextusában jár el. A kapcsolatot bármikor megszüntetheted a claude.ai-ban a »Connectors« alatt.",
     "Du bist Entwickler?": "Fejlesztő vagy?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "Közvetlenül a felületen keresztül szeretnéd használni az adatokat? Az API-dokumentációban minden végpontot megtalálsz – beleértve a személyes tokennel történő hitelesítést is.",
-    "API-Dokumentation öffnen": "API-dokumentáció megnyitása"
+    "API-Dokumentation öffnen": "API-dokumentáció megnyitása",
+    "Schließen": "Bezárás"
 }

lang/lv.json

@@ -710,5 +710,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "Claude rīkojas tikai ar tavu atļauju un tava konta kontekstā. Tu jebkurā laikā vari atvienoties claude.ai sadaļā »Connectors«.",
     "Du bist Entwickler?": "Vai esi izstrādātājs?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "Vēlies izmantot datus tieši caur saskarni? API dokumentācijā atradīsi visus galapunktus – tostarp autentifikāciju ar personīgo tokenu.",
-    "API-Dokumentation öffnen": "Atvērt API dokumentāciju"
+    "API-Dokumentation öffnen": "Atvērt API dokumentāciju",
+    "Schließen": "Aizvērt"
 }

lang/nl.json

@@ -737,5 +737,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "Claude handelt uitsluitend met jouw toestemming en in de context van je eigen account. Je kunt de verbinding op elk moment verbreken in claude.ai onder »Connectors«.",
     "Du bist Entwickler?": "Ben je ontwikkelaar?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "Wil je de gegevens rechtstreeks via de interface gebruiken? In de API-documentatie vind je alle endpoints – inclusief authenticatie met een persoonlijk token.",
-    "API-Dokumentation öffnen": "API-documentatie openen"
+    "API-Dokumentation öffnen": "API-documentatie openen",
+    "Schließen": "Sluiten"
 }

lang/pl.json

@@ -733,5 +733,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "Claude działa wyłącznie za Twoją zgodą i w kontekście Twojego własnego konta. Połączenie możesz w każdej chwili rozłączyć w claude.ai w sekcji »Connectors«.",
     "Du bist Entwickler?": "Jesteś programistą?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "Chcesz korzystać z danych bezpośrednio przez interfejs? W dokumentacji API znajdziesz wszystkie punkty końcowe – w tym uwierzytelnianie za pomocą osobistego tokena.",
-    "API-Dokumentation öffnen": "Otwórz dokumentację API"
+    "API-Dokumentation öffnen": "Otwórz dokumentację API",
+    "Schließen": "Zamknij"
 }

lang/pt.json

@@ -735,5 +735,6 @@
     "Claude handelt ausschließlich mit deiner Erlaubnis und im Kontext deines eigenen Kontos. Du kannst die Verbindung jederzeit in claude.ai unter »Connectors« wieder trennen.": "O Claude age exclusivamente com a sua autorização e no contexto da sua própria conta. Pode desligar a ligação a qualquer momento no claude.ai em »Connectors«.",
     "Du bist Entwickler?": "É programador?",
     "Du möchtest die Daten direkt über die Schnittstelle nutzen? In der API-Dokumentation findest du alle Endpunkte – inklusive Authentifizierung per persönlichem Token.": "Quer usar os dados diretamente através da interface? Na documentação da API encontra todos os endpoints – incluindo autenticação com um token pessoal.",
-    "API-Dokumentation öffnen": "Abrir documentação da API"
+    "API-Dokumentation öffnen": "Abrir documentação da API",
+    "Schließen": "Fechar"
 }

resources/views/livewire/ki-assistent.blade.php

@@ -96,7 +96,10 @@ class extends Component {
     }
 }; ?>
 
-<div class="relative min-h-screen overflow-hidden text-zinc-900 dark:text-white">
+<div class="relative min-h-screen overflow-hidden text-zinc-900 dark:text-white"
+     x-data="{ lightboxSrc: null, lightboxAlt: '' }"
+     x-effect="document.body.style.overflow = lightboxSrc ? 'hidden' : ''"
+     @keydown.escape.window="lightboxSrc = null">
     {{-- Dekorativer Hintergrund-Glow --}}
     <div aria-hidden="true"
          class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[40rem] bg-[radial-gradient(60rem_30rem_at_50%_-10%,rgba(249,115,22,0.18),transparent)]"></div>
@@ -231,15 +234,17 @@ class extends Component {
                             <span class="size-2.5 rounded-full bg-yellow-400"></span>
                             <span class="size-2.5 rounded-full bg-green-400"></span>
                         </div>
-                        <a href="{{ asset('img/ki-assistent/'.$step['image']) }}" target="_blank"
+                        <button type="button"
-                           aria-label="{{ __('Screenshot zu Schritt :number vergrößern', ['number' => $step['number']]) }}">
+                                class="block w-full cursor-zoom-in"
+                                @click="lightboxSrc = '{{ asset('img/ki-assistent/'.$step['image']) }}'; lightboxAlt = @js(__($step['title']))"
+                                aria-label="{{ __('Screenshot zu Schritt :number vergrößern', ['number' => $step['number']]) }}">
                             <img src="{{ asset('img/ki-assistent/'.$step['image']) }}"
                                  alt="{{ __($step['title']) }}"
                                  loading="lazy"
                                  width="{{ $step['width'] }}"
                                  height="{{ $step['height'] }}"
                                  class="h-auto w-full transition hover:opacity-90"/>
-                        </a>
+                        </button>
                     </figure>
                 </div>
             @endforeach
@@ -294,4 +299,24 @@ class extends Component {
             </flux:button>
         </div>
     </section>
+
+    {{-- Lightbox --}}
+    <div x-show="lightboxSrc"
+         x-transition.opacity
+         @click="lightboxSrc = null"
+         role="dialog"
+         aria-modal="true"
+         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm sm:p-8"
+         style="display: none">
+        <button type="button"
+                @click="lightboxSrc = null"
+                aria-label="{{ __('Schließen') }}"
+                class="absolute right-4 top-4 flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20">
+            <flux:icon name="x-mark" class="size-6"/>
+        </button>
+        <img :src="lightboxSrc"
+             :alt="lightboxAlt"
+             @click.stop
+             class="max-h-[90vh] max-w-[90vw] rounded-lg object-contain shadow-2xl"/>
+    </div>
 </div>