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>
Dieser Commit ist enthalten in:
Claude Code
@@ -1,196 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lagebild Irankonflikt - AegisSight</title>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||
<link rel="stylesheet" href="../css/main.css">
|
||||
<link rel="stylesheet" href="../css/fonts.css">
|
||||
<link rel="stylesheet" href="../css/mobile.css">
|
||||
<link rel="stylesheet" href="lagebild.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
</head>
|
||||
<body class="lagebild-page">
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="nav-container">
|
||||
<div class="logo">
|
||||
<a href="/"><img src="../assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</a></li>
|
||||
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-extras">
|
||||
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
|
||||
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||
<span class="hamburger"><span></span><span></span><span></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div class="nav-menu-mobile" aria-hidden="true">
|
||||
<button class="mobile-menu-close" aria-label="Menü schließen">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
|
||||
</button>
|
||||
<ul>
|
||||
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</a></li>
|
||||
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mobile-menu-overlay"></div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="lagebild-hero">
|
||||
<div class="hero-bg-pattern"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
<span>LIVE-LAGEBILD</span>
|
||||
</div>
|
||||
<h1 id="hero-title">LAGEBILD</h1>
|
||||
<p class="hero-incident-title" id="incident-title"></p>
|
||||
|
||||
<!-- Stat Cards -->
|
||||
<div class="hero-stats" id="hero-stats"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Control Bar: Timeline + Tabs -->
|
||||
<div class="control-bar">
|
||||
<div class="container">
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-strip" id="timeline-strip"></div>
|
||||
<div class="timeline-dropdown" id="timeline-dropdown"></div>
|
||||
</div>
|
||||
<div class="tab-nav" id="tab-nav">
|
||||
<button class="tab-btn active" data-tab="lagebild">Lagebild</button>
|
||||
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="lagebild-main">
|
||||
<div class="container">
|
||||
<!-- Tab: Lagebild -->
|
||||
<div class="tab-panel active" id="panel-lagebild">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2 id="lagebild-date-title">Lagebild</h2>
|
||||
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||
</div>
|
||||
<div class="card-body" id="summary-content">
|
||||
<div class="loading-skeleton">
|
||||
<div class="skeleton-line"></div>
|
||||
<div class="skeleton-line"></div>
|
||||
<div class="skeleton-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" id="inline-sources"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Quellen -->
|
||||
<div class="tab-panel" id="panel-quellen">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Quellen & Quellenberichte</h2>
|
||||
<p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="sources-cited" class="sources-section"></div>
|
||||
<h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3>
|
||||
<div id="articles-content"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Karte -->
|
||||
<div class="tab-panel" id="panel-karte">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Karte</h2>
|
||||
<p class="card-description">Geografische Einordnung der Meldungen</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Faktenchecks -->
|
||||
<div class="tab-panel" id="panel-faktenchecks">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Faktenchecks</h2>
|
||||
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen</p>
|
||||
</div>
|
||||
<div class="card-body" id="factchecks-content"></div>
|
||||
</section>
|
||||
</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>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
|
||||
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
|
||||
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerNavTitle">Navigation</h4>
|
||||
<ul>
|
||||
<li><a href="/" data-translate="footerNavHome">Startseite</a></li>
|
||||
<li><a href="/#about" data-translate="footerNavAbout">Über uns</a></li>
|
||||
<li><a href="/#products" data-translate="footerNavProducts">Lösungen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
|
||||
<ul>
|
||||
<li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
|
||||
<li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerContactTitle">Kontakt</h4>
|
||||
<p>info@aegis-sight.de</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copyright">© 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="../js/config.js"></script>
|
||||
<script src="../js/translations.js"></script>
|
||||
<script src="../js/mobile-nav.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="lagebild.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lagebild Irankonflikt - AegisSight</title>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||
<link rel="stylesheet" href="../css/main.css">
|
||||
<link rel="stylesheet" href="../css/fonts.css">
|
||||
<link rel="stylesheet" href="../css/mobile.css">
|
||||
<link rel="stylesheet" href="lagebild.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
</head>
|
||||
<body class="lagebild-page">
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="nav-container">
|
||||
<div class="logo">
|
||||
<a href="/"><img src="../assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</a></li>
|
||||
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-extras">
|
||||
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
|
||||
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||
<span class="hamburger"><span></span><span></span><span></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div class="nav-menu-mobile" aria-hidden="true">
|
||||
<button class="mobile-menu-close" aria-label="Menü schließen">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
|
||||
</button>
|
||||
<ul>
|
||||
<li><a href="/" data-translate="navHome">Startseite</a></li>
|
||||
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
|
||||
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
|
||||
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</a></li>
|
||||
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mobile-menu-overlay"></div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="lagebild-hero">
|
||||
<div class="hero-bg-pattern"></div>
|
||||
<div class="container">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
<span>LIVE-LAGEBILD</span>
|
||||
</div>
|
||||
<h1 id="hero-title">LAGEBILD</h1>
|
||||
<p class="hero-incident-title" id="incident-title"></p>
|
||||
|
||||
<!-- Stat Cards -->
|
||||
<div class="hero-stats" id="hero-stats"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Control Bar: Timeline + Tabs -->
|
||||
<div class="control-bar">
|
||||
<div class="container">
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-strip" id="timeline-strip"></div>
|
||||
<div class="timeline-dropdown" id="timeline-dropdown"></div>
|
||||
</div>
|
||||
<div class="tab-nav" id="tab-nav">
|
||||
<button class="tab-btn active" data-tab="lagebild">Lagebild</button>
|
||||
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="lagebild-main">
|
||||
<div class="container">
|
||||
<!-- Tab: Lagebild -->
|
||||
<div class="tab-panel active" id="panel-lagebild">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2 id="lagebild-date-title">Lagebild</h2>
|
||||
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||
</div>
|
||||
<div class="card-body" id="summary-content">
|
||||
<div class="loading-skeleton">
|
||||
<div class="skeleton-line"></div>
|
||||
<div class="skeleton-line"></div>
|
||||
<div class="skeleton-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer" id="inline-sources"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Quellen -->
|
||||
<div class="tab-panel" id="panel-quellen">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Quellen & Quellenberichte</h2>
|
||||
<p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="sources-cited" class="sources-section"></div>
|
||||
<h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3>
|
||||
<div id="articles-content"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Karte -->
|
||||
<div class="tab-panel" id="panel-karte">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Karte</h2>
|
||||
<p class="card-description">Geografische Einordnung der Meldungen</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Faktenchecks -->
|
||||
<div class="tab-panel" id="panel-faktenchecks">
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2>Faktenchecks</h2>
|
||||
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen</p>
|
||||
</div>
|
||||
<div class="card-body" id="factchecks-content"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
|
||||
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
|
||||
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerNavTitle">Navigation</h4>
|
||||
<ul>
|
||||
<li><a href="/" data-translate="footerNavHome">Startseite</a></li>
|
||||
<li><a href="/#about" data-translate="footerNavAbout">Über uns</a></li>
|
||||
<li><a href="/#products" data-translate="footerNavProducts">Lösungen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
|
||||
<ul>
|
||||
<li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
|
||||
<li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 data-translate="footerContactTitle">Kontakt</h4>
|
||||
<p>info@aegis-sight.de</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copyright">© 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="../js/config.js"></script>
|
||||
<script src="../js/translations.js"></script>
|
||||
<script src="../js/mobile-nav.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="lagebild.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -941,46 +941,98 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ---------- CTA Section ---------- */
|
||||
.lagebild-cta {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
/* ---------- Floating CTA Pill ---------- */
|
||||
.floating-cta {
|
||||
position: fixed;
|
||||
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 {
|
||||
background: linear-gradient(135deg, #111B30 0%, #1a2744 50%, #0f1a2e 100%);
|
||||
border: 1px solid var(--lb-border);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
padding: 48px 32px;
|
||||
color: #fff;
|
||||
.floating-cta.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.cta-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.8rem;
|
||||
color: #fff;
|
||||
.floating-cta.dismissed {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.cta-content p {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0 0 1.5rem;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.floating-cta-text {
|
||||
font-size: 0.88rem;
|
||||
color: var(--lb-text-sec);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cta-button {
|
||||
.floating-cta-btn {
|
||||
display: inline-block;
|
||||
background: var(--lb-accent);
|
||||
color: #0a0f1c;
|
||||
padding: 12px 32px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
padding: 8px 20px;
|
||||
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 ---------- */
|
||||
|
||||
@@ -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">×</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');
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren