From 682ad554609a9546356d60bd832ca20108100415 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Sat, 5 Sep 2026 21:15:47 +0000
Subject: [PATCH] About locked image: 13px blur overlay + CTA with Telegram
 link

---
 css/styles.css | 47 ++++++++++++++++++++++++++++++++++++++++++++---
 index.html     | 17 ++++++++++++++++-
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 19756e3..d4461bc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -896,18 +896,59 @@ body[data-lang="en"] .hide-de { display: none !important; }
 }
 
 /* Locked image nach Unsere Themen — nur sichtbar wenn nicht eingeloggt */
-.about-locked-img {
+.about-locked-wrap {
+  position: relative;
   display: block;
   width: 100%;
   max-width: 800px;
   height: auto;
   margin: 32px auto 0;
   border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+  overflow: hidden;
 }
-[data-loggedIn="true"] .about-locked-img {
+[data-loggedIn="true"] .about-locked-wrap {
   display: none;
 }
+.about-locked-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 16px;
+}
+.about-locked-blur {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  backdrop-filter: blur(13px);
+  -webkit-backdrop-filter: blur(13px);
+  background: rgba(255,255,255,0.15);
+}
+.about-locked-overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 24px;
+}
+.about-locked-icon { font-size: 2.5rem; }
+.about-locked-text {
+  font-size: 1rem;
+  color: #fff;
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 600;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+.about-locked-btn {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
 
 /* ========================================
    SEARCH
diff --git a/index.html b/index.html
index 312523a..1a88d53 100644
--- a/index.html
+++ b/index.html
@@ -349,7 +349,22 @@
             </p>
           </div>
         </div>
-        <img class="about-locked-img" src="/spacer.png" alt="" aria-hidden="true">
+        <div class="about-locked-wrap">
+          <img class="about-locked-img" src="/spacer.png" alt="" aria-hidden="true">
+          <div class="about-locked-blur"></div>
+          <div class="about-locked-overlay">
+            <div class="about-locked-icon">🌴</div>
+            <div class="about-locked-text">
+              <span class="hide-de">Tritt unserer Telegram-Gruppe bei<br>und erhalte Zugang zu allen Inhalten.</span>
+              <span class="hide-en">Join our Telegram group<br>and get access to all content.</span>
+            </div>
+            <a href="https://t.me/YourBotUsername?start=send_a_login_link" target="_blank" rel="noopener" class="btn btn-primary about-locked-btn">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.94 8.13l-1.97 9.27c-.15.67-.54.83-1.09.52l-3.02-2.22-1.46 1.4c-.16.16-.3.3-.61.3l.22-3.06 5.55-5.02c.24-.22-.05-.34-.38-.13L8.69 14.7l-2.95-.92c-.64-.2-.66-.64.14-.95l11.15-4.3c.52-.19.97.13.81.9z"/></svg>
+              <span class="hide-de">Jetzt Telegram beitreten</span>
+              <span class="hide-en">Join Telegram now</span>
+            </a>
+          </div>
+        </div>
       </div>
     </section>