generated from knso/webklar-preview-template
Landingpage: einfacheres Deutsch (A2/B1) + 6 Sprachversionen
- Deutsche Seite sprachlich vereinfacht (kurze Sätze, keine schweren Wörter — passend zum Produktversprechen); Sprachleiste ergänzt - Neue Seiten: tr, ar (RTL), en, uk, ru, pl — kompakt, einfache Sprache, gleiche Papier-Optik, Vorher/Nachher-Demo (deutsches Amtszitat + Erklärung in der Zielsprache), Warteliste-CTA je Sprache - hreflang-Verweise auf allen Seiten; arabische Seite mit dir=rtl, deutsches Zitat dort explizit ltr - Live geprüft: alle 6 Seiten erreichbar, RTL-Layout korrekt Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BehördenKlar – Brief rein. Klartext raus.</title>
|
||||
<meta name="description" content="BehördenKlar übersetzt Behördenbriefe in einfache Sprache. Foto machen, verstehen, richtig reagieren. Bald für iPhone – Warteliste sichert 5 Gratis-Analysen.">
|
||||
<link rel="alternate" hreflang="de" href="https://behoerdenklar.pages.dev/">
|
||||
<link rel="alternate" hreflang="tr" href="https://behoerdenklar.pages.dev/tr">
|
||||
<link rel="alternate" hreflang="ar" href="https://behoerdenklar.pages.dev/ar">
|
||||
<link rel="alternate" hreflang="en" href="https://behoerdenklar.pages.dev/en">
|
||||
<link rel="alternate" hreflang="uk" href="https://behoerdenklar.pages.dev/uk">
|
||||
<link rel="alternate" hreflang="ru" href="https://behoerdenklar.pages.dev/ru">
|
||||
<link rel="alternate" hreflang="pl" href="https://behoerdenklar.pages.dev/pl">
|
||||
<style>
|
||||
:root {
|
||||
--papier: #faf7f0;
|
||||
@@ -43,6 +50,14 @@
|
||||
.briefkopf .absender { font-weight: 700; font-size: 16px; }
|
||||
.briefkopf .az { color: var(--grau); font-size: 13px; }
|
||||
|
||||
/* Sprachleiste */
|
||||
.sprachen {
|
||||
padding: 12px 0 0; font-size: 15px; color: var(--grau);
|
||||
display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
|
||||
}
|
||||
.sprachen a { color: var(--amtsblau); text-decoration: none; border-bottom: 1px dotted var(--amtsblau); }
|
||||
.sprachen .aktiv { font-weight: 700; color: var(--tinte); border-bottom: none; }
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
header { padding: 44px 0 8px; }
|
||||
.betreff-label {
|
||||
@@ -223,14 +238,24 @@
|
||||
<span class="absender">📬 BehördenKlar</span>
|
||||
<span class="az mono">Az: KLAR-01/2026 · Anlage: 1 App</span>
|
||||
</div>
|
||||
<nav class="sprachen" aria-label="Sprache wählen">
|
||||
🌐
|
||||
<span class="aktiv">Deutsch</span>
|
||||
<a href="tr.html" lang="tr">Türkçe</a>
|
||||
<a href="ar.html" lang="ar">العربية</a>
|
||||
<a href="en.html" lang="en">English</a>
|
||||
<a href="uk.html" lang="uk">Українська</a>
|
||||
<a href="ru.html" lang="ru">Русский</a>
|
||||
<a href="pl.html" lang="pl">Polski</a>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<p class="betreff-label">Betreff</p>
|
||||
<h1>Brief vom Amt.<br><span class="markiert">Endlich verstanden.</span></h1>
|
||||
<p class="anrede">
|
||||
Sehr geehrte Damen und Herren, <strong>so einfach kann Ihre Behördenpost
|
||||
klingen:</strong> Foto machen — und BehördenKlar übersetzt Amtsdeutsch
|
||||
in Sätze, die jeder versteht. <em>Brief rein. Klartext raus.</em>
|
||||
Sehr geehrte Damen und Herren, <strong>ein Brief vom Amt muss nicht
|
||||
kompliziert sein:</strong> Machen Sie ein Foto — BehördenKlar erklärt
|
||||
den Brief in einfachen Worten. <em>Brief rein. Klartext raus.</em>
|
||||
</p>
|
||||
<div class="hero-fuss">
|
||||
<a class="cta" href="#anmelden">Früh-Zugang beantragen →</a>
|
||||
@@ -261,8 +286,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<p class="quelle-hinweis">
|
||||
Dazu: Checkliste, was Sie mitbringen müssen — und auf Wunsch ein
|
||||
fertiger Antwort-Entwurf.
|
||||
Dazu bekommen Sie: eine Liste, was Sie tun müssen — und auf Wunsch
|
||||
eine fertige Antwort.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -271,7 +296,7 @@
|
||||
<div class="zahlen">
|
||||
<div class="zahl-karte">
|
||||
<div class="zahl">6,2 Mio.</div>
|
||||
<div class="erkl">Erwachsene in Deutschland können schwere Texte kaum lesen — Behördenbriefe sind für sie eine Mauer.</div>
|
||||
<div class="erkl">Erwachsene in Deutschland haben Probleme mit schweren Texten. Behördenbriefe sind für sie besonders schwer.</div>
|
||||
<div class="quelle">Quelle: LEO-Studie 2018, Uni Hamburg</div>
|
||||
</div>
|
||||
<div class="zahl-karte">
|
||||
@@ -286,13 +311,13 @@
|
||||
<h2><span class="nr">§ 3</span> So funktioniert es</h2>
|
||||
<div class="schritte">
|
||||
<div class="schritt">
|
||||
<div><strong>Brief fotografieren</strong> <span>Mit dem Handy, auch als PDF. Gute Beleuchtung reicht.</span></div>
|
||||
<div><strong>Brief fotografieren</strong> <span>Mit dem Handy, auch als PDF. Gutes Licht reicht.</span></div>
|
||||
</div>
|
||||
<div class="schritt">
|
||||
<div><strong>Klartext lesen</strong> <span>„Was will das Amt von mir?" — kurz, einfach, ohne Fachchinesisch. Die Ampel zeigt, wie dringend es ist.</span></div>
|
||||
<div><strong>Klartext lesen</strong> <span>„Was will das Amt von mir?" — kurz, einfach, ohne schwere Wörter. Die Ampel zeigt: Wie viel Zeit habe ich noch?</span></div>
|
||||
</div>
|
||||
<div class="schritt">
|
||||
<div><strong>Richtig reagieren</strong> <span>Checkliste abhaken, Frist-Erinnerung stellen, Antwort-Entwurf anpassen und abschicken.</span></div>
|
||||
<div><strong>Richtig reagieren</strong> <span>Liste abhaken, Erinnerung stellen, fertige Antwort anpassen und abschicken.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -300,13 +325,13 @@
|
||||
<section>
|
||||
<h2><span class="nr">§ 4</span> Was die App kann</h2>
|
||||
<div class="koennen">
|
||||
<div class="kann">Dringlichkeits-Ampel 🔴🟡🟢</div>
|
||||
<div class="kann">Ampel: Wie dringend? 🔴🟡🟢</div>
|
||||
<div class="kann">Übersetzung in 9 Sprachen</div>
|
||||
<div class="kann">Fertige Antwort-Entwürfe</div>
|
||||
<div class="kann">Fristen-Erinnerungen</div>
|
||||
<div class="kann">Fertige Antworten</div>
|
||||
<div class="kann">Erinnerung vor jeder Frist</div>
|
||||
<div class="kann">Termine in den Kalender</div>
|
||||
<div class="kann">Amts-Wörterbuch, offline</div>
|
||||
<div class="kann">Vorlese-Funktion</div>
|
||||
<div class="kann">Amts-Wörterbuch — auch ohne Internet</div>
|
||||
<div class="kann">Die App kann vorlesen</div>
|
||||
<div class="kann">Kein Konto, keine Anmeldung</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -318,21 +343,20 @@
|
||||
<p class="formular-kopf">Formular F-01 · Warteliste</p>
|
||||
<h3>Antrag auf Früh-Zugang</h3>
|
||||
<p>
|
||||
Tragen Sie sich ein, bevor die App erscheint. Wir schreiben Ihnen
|
||||
genau <strong>eine</strong> E-Mail — am Tag, an dem BehördenKlar im
|
||||
App Store ist.
|
||||
Tragen Sie sich jetzt ein. Wir schicken Ihnen <strong>eine</strong>
|
||||
E-Mail, wenn die App fertig ist. Keine Werbung.
|
||||
</p>
|
||||
<p class="bonus-zeile">
|
||||
🎁 <strong>Nur für Wartelisten-Mitglieder:</strong> Sie starten mit
|
||||
<strong>5 statt 3</strong> kostenlosen Brief-Analysen. Der Code kommt
|
||||
mit Ihrer Bestätigung.
|
||||
🎁 <strong>Ihr Dankeschön:</strong> Sie können <strong>5 Briefe
|
||||
gratis</strong> analysieren — statt 3. Den Code bekommen Sie per
|
||||
E-Mail.
|
||||
</p>
|
||||
<a class="cta" href="mailto:behoerdenbriefhelfer@gmail.com?subject=Anmeldung%20Warteliste&body=Hallo%2C%20bitte%20informiert%20mich%2C%20wenn%20Beh%C3%B6rdenKlar%20verf%C3%BCgbar%20ist.">
|
||||
📧 Per E-Mail eintragen
|
||||
</a>
|
||||
<p class="klein">
|
||||
Ihre Adresse wird nur für die Launch-Nachricht gespeichert, keine
|
||||
Werbung, Abmeldung jederzeit — <a href="datenschutz.html">Datenschutzerklärung</a>.
|
||||
Wir speichern Ihre E-Mail-Adresse nur für diese eine Nachricht.
|
||||
Sie können sich jederzeit abmelden — <a href="datenschutz.html">Datenschutzerklärung</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -341,19 +365,19 @@
|
||||
<h2><span class="nr">§ 6</span> Häufige Fragen</h2>
|
||||
<details>
|
||||
<summary>Was kostet die App?</summary>
|
||||
<p>Der Download ist kostenlos, die ersten Analysen auch (3 — mit Wartelisten-Code 5). Danach gibt es ein günstiges Abo für unbegrenzte Analysen. Faire Sache: Erst testen, dann entscheiden.</p>
|
||||
<p>Die App ist gratis. Die ersten 3 Briefe sind auch gratis (mit Code: 5). Danach gibt es ein günstiges Abo. Sie testen zuerst — dann entscheiden Sie.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Was passiert mit meinen Briefen?</summary>
|
||||
<p>Ihre Briefe und Ergebnisse bleiben auf Ihrem Handy. Für die Analyse wird das Foto einmalig verschlüsselt an den KI-Dienst gesendet und dort nach spätestens 30 Tagen gelöscht. Kein Konto, kein Nutzerprofil. Details in der <a href="datenschutz.html">Datenschutzerklärung</a>.</p>
|
||||
<p>Ihre Briefe bleiben auf Ihrem Handy — sicher verschlüsselt. Für die Analyse wird das Foto einmal sicher an die KI geschickt. Nach spätestens 30 Tagen wird es dort gelöscht. Sie brauchen kein Konto. Mehr dazu in der <a href="datenschutz.html">Datenschutzerklärung</a>.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Ersetzt die App einen Anwalt?</summary>
|
||||
<p>Nein. BehördenKlar erklärt Briefe verständlich, ist aber keine Rechtsberatung. Bei wichtigen Entscheidungen (z. B. Widerspruch) hilft eine Beratungsstelle oder eine Anwältin/ein Anwalt.</p>
|
||||
<p>Nein. Die App erklärt Briefe — sie ist keine Rechtsberatung. Bei wichtigen Entscheidungen (z. B. Widerspruch) hilft eine Beratungsstelle oder ein Anwalt.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Kommt die App auch für Android?</summary>
|
||||
<p>Ja, geplant — die iPhone-Version erscheint zuerst. Wartelisten-Mitglieder erfahren es als Erste.</p>
|
||||
<p>Ja, Android ist geplant. Das iPhone kommt zuerst. Auf der Warteliste erfahren Sie es als Erste.</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user