From 6239842b15569588418cf6d2e3d8660495332b8c Mon Sep 17 00:00:00 2001
From: HolgerHatGarKeineNode
 <123783602+HolgerHatGarKeineNode@users.noreply.github.com>
Date: Sun, 14 Jun 2026 00:50:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20Add=20"Close"=20transla?=
 =?UTF-8?q?tion=20across=20languages=20and=20introduce=20lightbox=20functi?=
 =?UTF-8?q?onality=20for=20**KI-Assistent**=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lang/en.json                                  |  3 +-
 lang/es.json                                  |  3 +-
 lang/hu.json                                  |  3 +-
 lang/lv.json                                  |  3 +-
 lang/nl.json                                  |  3 +-
 lang/pl.json                                  |  3 +-
 lang/pt.json                                  |  3 +-
 .../views/livewire/ki-assistent.blade.php     | 33 ++++++++++++++++---
 8 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/lang/en.json b/lang/en.json
index 0bd188c..0ecf139 100644
--- a/lang/en.json
+++ b/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"
 }
diff --git a/lang/es.json b/lang/es.json
index 41d5e72..dcb1797 100644
--- a/lang/es.json
+++ b/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"
 }
diff --git a/lang/hu.json b/lang/hu.json
index 60ecc95..625ac0a 100644
--- a/lang/hu.json
+++ b/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"
 }
diff --git a/lang/lv.json b/lang/lv.json
index b0e33c7..79d3680 100644
--- a/lang/lv.json
+++ b/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"
 }
diff --git a/lang/nl.json b/lang/nl.json
index 94cb67b..de6e40b 100644
--- a/lang/nl.json
+++ b/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"
 }
diff --git a/lang/pl.json b/lang/pl.json
index cbe46dd..271e6d0 100644
--- a/lang/pl.json
+++ b/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"
 }
diff --git a/lang/pt.json b/lang/pt.json
index 6277562..5e384b2 100644
--- a/lang/pt.json
+++ b/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"
 }
diff --git a/resources/views/livewire/ki-assistent.blade.php b/resources/views/livewire/ki-assistent.blade.php
index ef29746..731e57a 100644
--- a/resources/views/livewire/ki-assistent.blade.php
+++ b/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"
-                           aria-label="{{ __('Screenshot zu Schritt :number vergrößern', ['number' => $step['number']]) }}">
+                        <button type="button"
+                                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>