refactor: Seitenstruktur, visuelle Differenzierung, Feedback-Fixes

- Problem-Section vor Workflow verschoben (Hero -> Problem -> Workflow)
- Problem-Section dunkel (Navy) fuer visuellen Kontrast
- Faktenprüfung als eigene Highlight-Card hervorgehoben (Gold-Border)
- Tippfehler Grosslage -> Großlage
- Nachhaltigkeit Icon von clock.svg zu shield-check.svg
- Hero Spacing verbessert (mehr Abstand Claim/Subtext)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-04-06 19:25:07 +02:00
Ursprung bd878de0c3
Commit 13432c43c2
2 geänderte Dateien mit 66 neuen und 49 gelöschten Zeilen

Datei anzeigen

@@ -102,10 +102,43 @@
</section>
<!-- Chevron: Hero -> Demos -->
<div class="divider divider-chevron">
<div class="divider divider-chevron-dark">
<svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,0 L720,80 L1440,0 L1440,0 L0,0 Z" fill="#0A1832"/></svg>
</div>
<!-- Problem Statement (dark) -->
<section class="section section-dark" id="problem">
<div class="container">
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
<div class="grid-3">
<div class="problem-card problem-card-dark">
<div class="problem-icon problem-icon-dark">
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
</div>
<h3>Tausende Quellen</h3>
<p>Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
</div>
<div class="problem-card problem-card-dark">
<div class="problem-icon problem-icon-dark">
<img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
</div>
<h3>Zeitdruck</h3>
<p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
</div>
<div class="problem-card problem-card-dark">
<div class="problem-icon problem-icon-dark">
<img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
</div>
<h3>Informationsflut</h3>
<p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
</div>
</div>
</div>
</section>
<!-- Gradient: Problem -> Workflow -->
<div class="divider divider-gradient-dark-to-alt"></div>
<!-- Solution / Workflow -->
<section class="section section-alt" id="solution">
<div class="container">
@@ -140,7 +173,7 @@
<div class="container">
<!-- Live Stats Bar -->
<div class="live-stats-bar">
<div class="live-stats-title">Grosslage - Irankonflikt</div>
<div class="live-stats-title">Großlage - Irankonflikt</div>
<div class="live-stats-row">
<div class="live-stat">
<span class="live-stat-value" id="stat-articles">...</span>
@@ -201,40 +234,6 @@
</div>
</section>
<!-- Gradient: Demos -> Problem -->
<div class="divider divider-gradient-alt-to-base"></div>
<!-- Problem Statement -->
<section class="section section-base" id="problem">
<div class="container">
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
<div class="grid-3">
<div class="problem-card">
<div class="problem-icon">
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
</div>
<h3>Tausende Quellen</h3>
<p>Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
</div>
<div class="problem-card">
<div class="problem-icon">
<img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
</div>
<h3>Zeitdruck</h3>
<p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
</div>
<div class="problem-card">
<div class="problem-icon">
<img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
</div>
<h3>Informationsflut</h3>
<p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
</div>
</div>
</div>
</section>
<!-- Gradient: Solution -> Features -->
<div class="divider divider-gradient-alt-to-base"></div>
@@ -243,6 +242,17 @@
<section class="section section-base" id="features">
<div class="container">
<h2 class="section-title">Was der Monitor leistet</h2>
<!-- Highlight: Faktenprüfung -->
<div class="feature-highlight">
<div class="feature-highlight-icon">
<img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
</div>
<div class="feature-highlight-content">
<h3>Automatische Faktenprüfung</h3>
<p>Jede zentrale Aussage wird automatisch gegen unabhängige Quellen verifiziert. Mit Statusverlauf, Evidenz und Quellenbelegen.</p>
</div>
</div>
<div class="grid-3">
<div class="feature-card">
<div class="feature-icon">
@@ -251,13 +261,7 @@
<h3>Echtzeit-Monitoring</h3>
<p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/check-circle.svg" alt="" width="36" height="36">
</div>
<h3>Automatische Faktenprüfung</h3>
<p>Jede zentrale Aussage wird gegen unabhängige Quellen verifiziert.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
@@ -334,7 +338,7 @@
</div>
<div class="trust-card">
<div class="trust-icon-wrap">
<img src="/assets/images/icons/clock.svg" alt="" width="48" height="48">
<img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
</div>
<h3>Nachhaltigkeit</h3>
<p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
@@ -343,9 +347,6 @@
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">