<!--
SafeAqua Landingpage – Divi/HTML Version (ohne React/Tailwind)
► Einfügen: Divi > Code-Module (auf einer leeren Seite/Section).
► Ersetze die Platzhalter-URLs unten ({{...}}) durch die echten Medien-URLs aus deiner WP-Mediathek.
► Ersetze die Affiliate-Links (AFFILIATE_*) durch deine Tracking-Links.
-->
<style>
/* ====== Design-Variablen ====== */
:root{
--sa-ink:#0b1220; /* Primärtext */
--sa-sub:#334155; /* Sekundärtext */
--sa-border:#e2e8f0; /* Linien */
--sa-c1:#0f766e; /* Teal 700 */
--sa-c2:#0891b2; /* Cyan 700 */
--sa-grad:linear-gradient(90deg, var(--sa-c1), var(--sa-c2));
}
/* ====== Reset / Scope ====== */
.sa * { box-sizing:border-box; }
.sa { color:var(--sa-ink); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; }
.sa a { color:inherit; text-decoration:none; }
.sa img { max-width:100%; height:auto; display:block; }
/* ====== Layout ====== */
.sa .container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.sa .grid{ display:grid; gap:24px; }
@media (min-width: 980px){ .sa .grid-2{ grid-template-columns:1.05fr .95fr; } }
@media (min-width: 980px){ .sa .grid-3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width: 980px){ .sa .grid-4{ grid-template-columns:repeat(4,1fr); } }
.sa .section{ padding:64px 0; }
/* ====== Sticky Bar ====== */
.sa .bar{ position:fixed; top:-64px; left:0; right:0; z-index:9999; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--sa-border); transition:transform .35s ease; }
.sa .bar.show{ transform:translateY(64px); }
.sa .bar-inner{ height:64px; display:flex; align-items:center; gap:12px; }
.sa .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--sa-border); border-radius:999px; background:#fff; font-size:14px; }
.sa .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:600; border:1px solid transparent; box-shadow:0 1px 2px rgba(0,0,0,.06); transition:.25s ease; }
.sa .btn-primary{ background:var(--sa-grad); color:#fff; }
.sa .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 24px rgba(9,132,160,.22); }
.sa .btn-ghost{ background:#fff; border-color:var(--sa-border); }
/* ====== Hero ====== */
.sa-hero{ position:relative; background:radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.08), transparent), radial-gradient(800px 400px at 90% -20%, rgba(16,185,129,.08), transparent); }
.sa-eyebrow{ display:inline-block; padding:6px 12px; border:1px solid var(--sa-border); border-radius:999px; font-size:12px; background:#fff; color:var(--sa-sub); }
.sa h1{ font-size:42px; line-height:1.1; margin:.6em 0; }
@media (min-width:980px){ .sa h1{ font-size:56px; } }
.sa-lead{ color:var(--sa-sub); font-size:18px; }
.sa-hero-figure{ border-radius:24px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); }
/* ====== Cards / Sections ====== */
.sa-card{ border:1px solid var(--sa-border); border-radius:16px; padding:22px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.03); transition:box-shadow .25s ease, transform .25s ease; }
.sa-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.07); }
.sa-muted{ color:var(--sa-sub); }
/* ====== Products ====== */
.sa-prod-media{ border-radius:16px; overflow:hidden; border:1px solid var(--sa-border); }
.sa-prod-title{ font-size:22px; font-weight:700; margin:12px 0; }
.sa-list{ list-style:none; padding:0; margin:12px 0; }
.sa-list li{ display:flex; gap:10px; font-size:15px; color:#1f2937; margin:8px 0; }
.sa-badge{ position:absolute; top:-12px; left:16px; background:var(--sa-grad); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; box-shadow:0 6px 16px rgba(9,132,160,.25); }
/* ====== Table ====== */
.sa-table{ width:100%; border-collapse:collapse; font-size:14px; }
.sa-table th, .sa-table td{ padding:14px; border-top:1px solid var(--sa-border); text-align:left; }
.sa-table thead th{ background:#f8fafc; font-weight:700; }
.sa-table tr:hover td{ background:#f9fafb; }
/* ====== CTA ====== */
.sa-cta{ background:var(--sa-grad); color:#fff; border-radius:24px; padding:36px; display:grid; gap:16px; align-items:center; }
@media (min-width:980px){ .sa-cta{ grid-template-columns:1fr auto; } }
/* ====== Footer ====== */
.sa-footer{ border-top:1px solid var(--sa-border); color:var(--sa-sub); font-size:14px; }
</style>
<div class="sa">
<!-- Sticky Bar -->
<div class="bar" id="saBar">
<div class="container bar-inner">
<div style="display:flex;align-items:center;gap:10px;">
<div style="width:36px;height:36px;border-radius:10px;background:var(--sa-grad);"></div>
<strong>SafeAqua</strong>
</div>
<div style="margin-left:auto;display:flex;gap:8px;">
<a href="#produkte" class="btn btn-ghost">Produkte</a>
<a href="#vergleichen" class="btn btn-ghost">Vergleich</a>
<a href="#kaufen" class="btn btn-primary">Jetzt auswählen ▸</a>
</div>
</div>
</div>
<!-- Hero -->
<section class="section sa-hero">
<div class="container grid grid-2" style="align-items:center;gap:32px;">
<div>
<span class="sa-eyebrow">Premium Wasseraufbereitung</span>
<h1>Reines Wasser. <span style="background:var(--sa-grad);-webkit-background-clip:text;background-clip:text;color:transparent;">Klare Entscheidung.</span></h1>
<p class="sa-lead">Zwei Systeme, ein Ziel: <strong>DirectFlow</strong> (tanklose Umkehrosmose) & <strong>Multi‑Wasser‑Filter</strong> (mehrstufige Aktivkohle). Mobil optimiert und auf Conversion getrimmt.</p>
<div style="margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;">
<span class="chip">Zielstoff-Reduktion* </span>
<span class="chip">PFAS, Mikroplastik, Blei†</span>
<span class="chip">Weniger Plastikflaschen</span>
</div>
<div style="margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;">
<a href="#produkte" class="btn btn-primary">Produkte ansehen</a>
<a href="#vergleichen" class="btn btn-ghost">Systeme vergleichen</a>
</div>
<p class="sa-muted" style="font-size:12px;margin-top:10px;">*Leistungsdaten & Zertifizierungen je nach Modell. Bitte Herstellerangaben prüfen.</p>
</div>
<figure class="sa-hero-figure">
<img src="{{HERO_IMG}}" alt="Blackwater Drop & Pearl neben Küchenarmatur" />
</figure>
</div>
</section>
<!-- Media Strip -->
<section class="section" style="padding-top:24px;">
<div class="container grid grid-2">
<figure class="sa-card sa-prod-media">
<img src="{{DIRECTFLOW_IMG}}" alt="DirectFlow (Blackwater DROP) – kompakte RO-Anlage" />
</figure>
<figure class="sa-card sa-prod-media">
<img src="{{MULTI_IMG}}" alt="Multi‑Wasser‑Filter (Blackwater PEARL) – Auftisch-/Kombi-System" />
</figure>
</div>
</section>
<!-- Pain Points -->
<section class="section" style="background:#f8fafc;">
<div class="container">
<h2 style="font-size:32px;margin-bottom:18px;">Die Probleme – und wie wir sie lösen</h2>
<div class="grid grid-3">
<div class="sa-card">
<strong>Leitungswasser‑Risiken</strong>
<p class="sa-muted">Schwermetalle, PFAS, Mikroplastik & Geschmacksstoffe können regional variieren.</p>
</div>
<div class="sa-card">
<strong>Nachhaltigkeit</strong>
<p class="sa-muted">Gefiltertes Leitungswasser senkt Plastikmüll gegenüber Flaschenwasser deutlich.</p>
</div>
<div class="sa-card">
<strong>Transparenz</strong>
<p class="sa-muted">Nur Systeme mit klaren Leistungsdaten & Wartungsplänen liefern dauerhaft Qualität.</p>
</div>
</div>
</div>
</section>
<!-- How it works -->
<section class="section">
<div class="container">
<h2 style="font-size:32px;margin-bottom:18px;">So funktioniert moderne Wasseraufbereitung</h2>
<div class="grid grid-4">
<div class="sa-card"><div class="chip">1</div><strong>Vorfiltration</strong><p class="sa-muted">Sedimente/Partikel (Sand, Rost) zur Membran‑Schonung.</p></div>
<div class="sa-card"><div class="chip">2</div><strong>RO‑Membran</strong><p class="sa-muted">Trennt gelöste Stoffe wie Blei, Nitrate, viele PFAS‑Verbindungen.</p></div>
<div class="sa-card"><div class="chip">3</div><strong>Aktivkohle‑Polishing</strong><p class="sa-muted">Verbessert Geschmack & Geruch, reduziert Chlor/Organik.</p></div>
<div class="sa-card"><div class="chip">4</div><strong>Remineralisierung (optional)</strong><p class="sa-muted">Für ausgewogenen Geschmack & pH, je nach Modell.</p></div>
</div>
</div>
</section>
<!-- Products -->
<section id="produkte" class="section" style="background:#f8fafc;">
<div class="container">
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:18px;">
<h2 style="font-size:32px;">Wählen Sie Ihr System</h2>
<a class="sa-muted" href="#vergleichen">Details vergleichen</a>
</div>
<div class="grid grid-2" style="margin-top:18px;">
<!-- DirectFlow -->
<div class="sa-card" style="position:relative;">
<span class="sa-badge">Maximale Reinheit</span>
<figure class="sa-prod-media"><img src="{{DIRECTFLOW_IMG}}" alt="DirectFlow – Blackwater DROP" /></figure>
<div class="sa-prod-title">DirectFlow – Tanklose Umkehrosmose</div>
<ul class="sa-list">
<li>Hohe Leistung, konstanter Durchfluss</li>
<li>Ohne Tank – spart Platz unterm Spülbecken</li>
<li>Effizientere Abwasserquote moderner Geräte</li>
<li>Reduziert u. a. Blei, PFAS, Nitrate, Fluorid*</li>
<li>Optional: Remineralisierung/UV je nach Modell</li>
</ul>
<div style="display:flex;gap:10px;">
<a href="AFFILIATE_DIRECTFLOW_URL" class="btn btn-primary" target="_blank" rel="noopener">Zum Angebot (Affiliate) ▸</a>
<a href="#vergleichen" class="btn btn-ghost">Technische Details</a>
</div>
</div>
<!-- Multi-Filter -->
<div class="sa-card" style="position:relative;">
<span class="sa-badge">Preis‑Leistungs‑Tipp</span>
<figure class="sa-prod-media"><img src="{{MULTI_IMG}}" alt="Multi‑Wasser‑Filter – Blackwater PEARL" /></figure>
<div class="sa-prod-title">Multi‑Wasser‑Filter – Aktivkohle Mehrstufe</div>
<ul class="sa-list">
<li>Mehrstufig (Sediment + Aktivkohle + ggf. Ionentausch)</li>
<li>Geschmack/ Geruch spürbar besser, reduziert Chlor</li>
<li>Niedrige Anschaffung, einfacher Wechsel</li>
<li>Mietfreundlich (Auf-/Untertisch je Modell)</li>
<li>Zielgerichtete Reduktion typischer Stoffe</li>
</ul>
<div style="display:flex;gap:10px;">
<a href="AFFILIATE_MULTI_URL" class="btn btn-primary" target="_blank" rel="noopener">Zum Angebot (Affiliate) ▸</a>
<a href="#vergleichen" class="btn btn-ghost">Technische Details</a>
</div>
</div>
</div>
</div>
</section>
<!-- Comparison -->
<section id="vergleichen" class="section">
<div class="container">
<h2 style="font-size:32px;margin-bottom:12px;">DirectFlow vs. Multi‑Wasser‑Filter</h2>
<div class="sa-card" style="overflow:auto;">
<table class="sa-table">
<thead><tr><th>Kriterium</th><th>DirectFlow</th><th>Multi‑Wasser‑Filter</th></tr></thead>
<tbody>
<tr><td>Typ</td><td>Tankloses RO (DirectFlow)</td><td>Mehrstufige Aktivkohle / Kombifilter</td></tr>
<tr><td>Durchfluss</td><td>hoch (z. B. bis ≈2 L/min)</td><td>moderat</td></tr>
<tr><td>Reduktion gelöster Stoffe</td><td>sehr hoch (je nach Membran)</td><td>begrenzt – Fokus auf Geschmack/Chlor</td></tr>
<tr><td>Mögliche Zielstoffe</td><td>u. a. Blei, PFAS, Fluorid, Nitrat*</td><td>Chlor, Geruch/Geschmack, gewisse Organik</td></tr>
<tr><td>Platzbedarf</td><td>kompakt, kein Tank</td><td>kompakt</td></tr>
<tr><td>Wartung</td><td>Filter + Membran planbar</td><td>regelmäßiger Filterwechsel</td></tr>
</tbody></table>
</div>
<p class="sa-muted" style="font-size:12px;margin-top:8px;">*Leistung/Zielstoffe abhängig von Modell & Zertifizierung (NSF/ANSI etc.).</p>
</div>
</section>
<!-- Social Proof (Kurz) -->
<section class="section" style="background:#f8fafc;">
<div class="container grid grid-3">
<div class="sa-card"><strong>★★★★★</strong><p class="sa-muted">DirectFlow – neutraler Geschmack, hoher Durchfluss. Einbau unkompliziert.</p></div>
<div class="sa-card"><strong>★★★★★</strong><p class="sa-muted">Multi‑Filter – besserer Geschmack, kein Bohren. Preislich top.</p></div>
<div class="sa-card"><strong>★★★★★</strong><p class="sa-muted">Schnelle Lieferung über den Anbieter. Empfehlenswert.</p></div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="section">
<div class="container">
<h2 style="font-size:32px;margin-bottom:12px;">Häufige Fragen</h2>
<div class="sa-card">
<details><summary><strong>Eignet sich DirectFlow für jeden Haushalt?</strong></summary><p class="sa-muted">DirectFlow benötigt Strom und ausreichenden Leitungsdruck. Details je nach Modell.</p></details>
<details><summary><strong>Entfernen die Systeme PFAS & Mikroplastik?</strong></summary><p class="sa-muted">RO (DirectFlow) mit hoher Abscheiderate für viele PFAS & Mikroplastik; Aktivkohle reduziert v. a. Organik/Geruch. Zertifikate prüfen.</p></details>
<details><summary><strong>Wie oft müssen Filter gewechselt werden?</strong></summary><p class="sa-muted">Typisch: 6–12 Monate (Vor-/Aktivkohle), 24–36 Monate (RO‑Membran) – abhängig von Nutzung und Wasserqualität.</p></details>
<details><summary><strong>Wie läuft der Kauf ab?</strong></summary><p class="sa-muted">Kauf/Versand/Gewährleistung über den Anbieter‑Shop (Affiliate‑Link).</p></details>
</div>
</div>
</section>
<!-- CTA -->
<section id="kaufen" class="section">
<div class="container">
<div class="sa-cta">
<div>
<h3 style="font-size:28px;margin:0 0 6px 0;">Jetzt entscheiden – morgen besser trinken</h3>
<p style="margin:0;opacity:.9">DirectFlow für maximale Reinheit oder Multi‑Filter für starken Alltagsnutzen.</p>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a href="AFFILIATE_DIRECTFLOW_URL" class="btn btn-ghost" target="_blank" rel="noopener" style="background:#fff;color:var(--sa-ink);">DirectFlow auswählen ▸</a>
<a href="AFFILIATE_MULTI_URL" class="btn btn-primary" target="_blank" rel="noopener">Multi‑Filter auswählen ▸</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="section sa-footer">
<div class="container" style="display:grid;gap:16px;align-items:start;grid-template-columns:1fr;">
<div>
<div style="display:flex;align-items:center;gap:10px;">
<div style="width:32px;height:32px;border-radius:8px;background:var(--sa-grad);"></div>
<strong>SafeAqua</strong>
</div>
<p class="sa-muted" style="margin-top:8px;max-width:60ch;">SafeAqua ist unabhängiger Empfehlungs-/Affiliate‑Partner. Produktkauf, Lieferung, Garantie & Support erfolgen über den jeweiligen Anbieter‑Shop. Affiliate‑Hinweis: Bei qualifizierten Käufen erhalten wir ggf. eine Provision – ohne Mehrkosten für Sie.</p>
</div>
<div style="text-align:center;color:#94a3b8;font-size:12px;margin-top:12px;">© <span id="saYear"></span> SafeAqua. Alle Rechte vorbehalten.</div>
</div>
</footer>
</div>
<script>
// Sticky Bar Logik
(function(){
var bar=document.getElementById('saBar');
var shown=false;
function onScroll(){ var s=window.scrollY||document.documentElement.scrollTop; if(s>280 && !shown){ bar.classList.add('show'); shown=true; } else if(s<=280 && shown){ bar.classList.remove('show'); shown=false; } }
window.addEventListener('scroll', onScroll, {passive:true}); onScroll();
// Jahr im Footer
document.getElementById('saYear').textContent=new Date().getFullYear();
// Sanftes Scrollen innerhalb der Sektionen (optional)
document.querySelectorAll('.sa a[href^="#"]').forEach(function(a){ a.addEventListener('click', function(e){ var id=this.getAttribute('href').slice(1); var el=document.getElementById(id); if(el){ e.preventDefault(); window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 72, behavior:'smooth'}); } }); });
})();
</script>
