Lagebild: CTA-Block durch Floating Pill ersetzt

- Statischer CTA-Block am Seitenende entfernt
- Floating Pill am unteren Bildschirmrand (zentriert)
- Erscheint nach 400px Scroll, Glasmorphism-Stil
- Gold-Button Kontakt aufnehmen mit mailto-Link
- Schliessbar mit X-Button
- Responsive: volle Breite auf Mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lagebild/index.html

@@ -143,13 +143,6 @@
             </div>
 
             <!-- CTA -->
-            <section class="lagebild-cta">
-                <div class="cta-content">
-                    <h3>Interesse an AegisSight Monitor?</h3>
-                    <p>Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.</p>
-                    <a href="mailto:info@aegis-sight.de" class="cta-button">Kontakt aufnehmen</a>
-                </div>
-            </section>
         </div>
     </main>
 

lagebild/lagebild.css

@@ -941,46 +941,98 @@
     word-break: break-all;
 }
 
-/* ---------- CTA Section ---------- */
+/* ---------- Floating CTA Pill ---------- */
-.lagebild-cta {
+.floating-cta {
-    margin-top: 2rem;
+    position: fixed;
-    text-align: center;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    background: rgba(21, 29, 46, 0.92);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(200, 168, 81, 0.25);
+    border-radius: 50px;
+    padding: 10px 14px 10px 24px;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.4s, transform 0.4s;
+    pointer-events: none;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
-.cta-content {
+.floating-cta.visible {
-    background: linear-gradient(135deg, #111B30 0%, #1a2744 50%, #0f1a2e 100%);
+    opacity: 1;
-    border: 1px solid var(--lb-border);
+    transform: translateX(-50%) translateY(0);
-    border-radius: var(--radius-sm, 4px);
+    pointer-events: auto;
-    padding: 48px 32px;
-    color: #fff;
 }
-.cta-content h3 {
+.floating-cta.dismissed {
-    font-size: 1.5rem;
+    opacity: 0;
-    font-weight: 700;
+    transform: translateX(-50%) translateY(100px);
-    margin: 0 0 0.8rem;
+    pointer-events: none;
-    color: #fff;
 }
-.cta-content p {
+.floating-cta-text {
-    font-size: 1rem;
+    font-size: 0.88rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--lb-text-sec);
-    margin: 0 0 1.5rem;
+    font-weight: 500;
-    max-width: 500px;
+    white-space: nowrap;
-    margin-left: auto;
-    margin-right: auto;
 }
-.cta-button {
+.floating-cta-btn {
     display: inline-block;
     background: var(--lb-accent);
     color: #0a0f1c;
-    padding: 12px 32px;
+    padding: 8px 20px;
-    border-radius: var(--radius-sm, 4px);
+    border-radius: 50px;
     font-weight: 700;
     text-decoration: none;
-    font-size: 0.95rem;
+    font-size: 0.85rem;
+    white-space: nowrap;
     transition: background 0.2s, transform 0.2s;
 }
-.cta-button:hover {
+.floating-cta-btn:hover {
     background: var(--lb-accent-hover);
-    transform: translateY(-2px);
+    transform: scale(1.03);
+}
+.floating-cta-close {
+    background: none;
+    border: none;
+    color: var(--lb-text-sec);
+    font-size: 1.3rem;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
+    transition: color 0.2s;
+    font-family: inherit;
+}
+.floating-cta-close:hover {
+    color: var(--lb-text);
+}
+
+@media (max-width: 768px) {
+    .floating-cta {
+        left: 12px;
+        right: 12px;
+        transform: translateX(0) translateY(100px);
+        border-radius: 16px;
+        gap: 10px;
+        padding: 10px 12px 10px 16px;
+    }
+    .floating-cta.visible {
+        transform: translateX(0) translateY(0);
+    }
+    .floating-cta.dismissed {
+        transform: translateX(0) translateY(100px);
+    }
+    .floating-cta-text {
+        font-size: 0.8rem;
+        white-space: normal;
+    }
+    .floating-cta-btn {
+        font-size: 0.8rem;
+        padding: 7px 14px;
+        flex-shrink: 0;
+    }
 }
 
 /* ---------- Loading Skeleton ---------- */

lagebild/lagebild.js

@@ -41,6 +41,7 @@ var Lagebild = {
             this.initTabs();
             this.initLangToggle();
             this.initScrollReveal();
+            this.initFloatingCta();
         } catch (e) {
             console.error('Lagebild laden fehlgeschlagen:', e);
             this.showError();
@@ -576,6 +577,32 @@ var Lagebild = {
         });
     },
 
+    /* ===== FLOATING CTA ===== */
+    initFloatingCta: function() {
+        var cta = document.createElement('div');
+        cta.className = 'floating-cta';
+        cta.innerHTML = '<span class="floating-cta-text">AegisSight Monitor f\u00fcr Ihre Organisation</span>'
+            + '<a href="mailto:info@aegis-sight.de" class="floating-cta-btn">Kontakt aufnehmen \u2192</a>'
+            + '<button class="floating-cta-close" aria-label="Schlie\u00dfen">&times;</button>';
+        document.body.appendChild(cta);
+
+        // Show after scrolling past hero
+        var shown = false;
+        window.addEventListener('scroll', function() {
+            if (shown) return;
+            if (window.scrollY > 400) {
+                cta.classList.add('visible');
+                shown = true;
+            }
+        });
+
+        // Close button
+        cta.querySelector('.floating-cta-close').addEventListener('click', function(e) {
+            e.preventDefault();
+            cta.classList.add('dismissed');
+        });
+    },
+
     /* ===== SCROLL REVEAL ===== */
     initScrollReveal: function() {
         var cards = document.querySelectorAll('.content-card, .lagebild-cta');