JUSN
6e83768b8c
- config.js: alle Inhalte an einer Stelle (Marke, SEO, Farben, Hero, Features, Zahlen, Schritte, Warteliste, FAQ, Footer) - build.js: rendert statisches HTML aus der Config (gut fuer SEO), Abschnitte optional, Theme papier/clean, Assets-Kopie - README mit Anleitung, .gitignore - BehördenKlar als fertiges Beispiel; node build.js getestet -> dist/index.html Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
141 lines
8.6 KiB
HTML
141 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Behördenbriefe einfach erklärt – per Foto | BehördenKlar</title>
|
||
<meta name="description" content="BehördenKlar erklärt Amtsbriefe in einfacher Sprache: Foto machen, verstehen, richtig reagieren – in 9 Sprachen.">
|
||
<link rel="canonical" href="https://behoerdenklar.de/">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Behördenbriefe einfach erklärt – per Foto | BehördenKlar">
|
||
<meta property="og:description" content="BehördenKlar erklärt Amtsbriefe in einfacher Sprache: Foto machen, verstehen, richtig reagieren – in 9 Sprachen.">
|
||
<meta property="og:image" content="https://behoerdenklar.de/vorschau.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<style>
|
||
:root{
|
||
--bg:#faf7f0; --text:#21211d; --accent:#1d4e89;
|
||
--marker:#ffe66b;
|
||
--grau:color-mix(in srgb, var(--text) 55%, transparent);
|
||
--linie:color-mix(in srgb, var(--text) 18%, transparent);
|
||
color-scheme:light;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
font-family:Georgia,'Times New Roman',serif;
|
||
color:var(--text); line-height:1.7; font-size:17px;
|
||
background:repeating-linear-gradient(0deg,transparent 0 34px,rgba(0,0,0,.025) 34px 35px),var(--bg);
|
||
}
|
||
.wrap{max-width:720px;margin:0 auto;padding:0 20px 72px}
|
||
a{color:var(--accent)}
|
||
.kopf{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 12px;border-bottom:2px solid var(--text);font-size:15px}
|
||
.marke{font-weight:700;font-size:17px;text-decoration:none;color:var(--text)}
|
||
header{padding:44px 0 8px}
|
||
.kicker{font-size:13px;color:var(--grau);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
|
||
h1{font-size:clamp(34px,7vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.01em}
|
||
.mark{background:linear-gradient(104deg,transparent 2%,var(--marker) 4%,var(--marker) 96%,transparent 98%);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
|
||
.anrede{margin-top:24px;font-size:19px;max-width:560px}
|
||
.hero-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
|
||
.cta{display:inline-block;padding:16px 28px;background:var(--accent);color:#fff;text-decoration:none;font-family:inherit;font-size:17px;font-weight:700;border:2px solid var(--text);box-shadow:5px 5px 0 var(--text);transition:transform .12s,box-shadow .12s}
|
||
.cta:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--text)}
|
||
.cta-sek{background:#fff;color:var(--accent)}
|
||
.stempel{display:inline-block;padding:7px 14px;border:2.5px solid var(--accent);color:var(--accent);font-family:'Courier New',monospace;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-4deg);opacity:.9}
|
||
section{margin-top:60px}
|
||
h2{font-size:15px;text-transform:uppercase;letter-spacing:.14em;color:var(--grau);font-weight:400;margin-bottom:22px;display:flex;align-items:center;gap:12px}
|
||
h2::after{content:'';flex:1;border-top:1px solid var(--linie)}
|
||
h2 .nr{font-family:'Courier New',monospace}
|
||
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||
@media(max-width:560px){.grid{grid-template-columns:1fr}}
|
||
.karte{background:#fff;border:1px solid var(--linie);padding:20px 22px;box-shadow:4px 5px 0 rgba(0,0,0,.06);}
|
||
.karte .ico{font-size:26px}
|
||
.karte h3{font-size:19px;margin:8px 0 4px}
|
||
.karte p{font-size:15px;color:var(--grau)}
|
||
.zahl{font-size:38px;font-weight:700;color:var(--accent);line-height:1.1}
|
||
.zahl-erkl{font-size:15px;color:var(--grau);margin-top:6px}
|
||
.zahl-q{font-size:12px;color:var(--grau);margin-top:8px;font-family:'Courier New',monospace}
|
||
.schritt{display:flex;gap:20px;padding:18px 4px;border-bottom:1px solid var(--linie);align-items:baseline}
|
||
.schritt:last-child{border-bottom:none}
|
||
.schritt .n{font-family:'Courier New',monospace;font-size:28px;font-weight:700;color:var(--accent);width:48px;flex-shrink:0}
|
||
.schritt strong{font-size:19px;display:block;margin-bottom:2px}
|
||
.schritt span{color:var(--grau);font-size:16px}
|
||
.antrag{background:#fff;border:2px solid var(--text);box-shadow:7px 8px 0 rgba(0,0,0,.85);padding:28px 26px}
|
||
.antrag h3{font-size:26px;line-height:1.25}
|
||
.antrag p{margin-top:12px;max-width:520px}
|
||
.bonus{margin:16px 0;padding:12px 16px;background:linear-gradient(104deg,transparent 1%,var(--marker) 3%,var(--marker) 97%,transparent 99%);font-size:16px}
|
||
.wl-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
|
||
.wl-input{width:100%;padding:15px 16px;font-size:17px;font-family:inherit;border:2px solid var(--text);background:#fff;color:var(--text)}
|
||
.wl-btn{width:100%;cursor:pointer;text-align:center;font-family:inherit}
|
||
.klein{font-size:13.5px;color:var(--grau);margin-top:12px}
|
||
details{border-bottom:1px solid var(--linie);padding:14px 4px}
|
||
summary{font-weight:700;cursor:pointer;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
|
||
summary::-webkit-details-marker{display:none}
|
||
summary::after{content:'+';font-family:'Courier New',monospace;font-size:22px;color:var(--accent)}
|
||
details[open] summary::after{content:'–'}
|
||
details p{margin-top:10px;color:var(--grau);font-size:16px;max-width:580px}
|
||
footer{margin-top:56px;padding-top:16px;border-top:2px solid var(--text);font-size:14.5px;color:var(--grau)}
|
||
footer a{color:var(--grau)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="kopf"><a class="marke" href="/">📬 BehördenKlar</a></div>
|
||
|
||
<header>
|
||
<p class="kicker">Betreff</p>
|
||
<h1>Brief vom Amt.<br><span class="mark">Endlich verstanden.</span></h1>
|
||
<p class="anrede">Ein Brief vom Amt muss nicht schwer sein. Machen Sie ein Foto — die App erklärt ihn in einfachen Worten.</p>
|
||
<div class="hero-fuss">
|
||
<a class="cta" href="#anmelden">📷 Kostenlos testen</a>
|
||
|
||
<span class="stempel">Bald verfügbar</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section><h2><span class="nr">§ 1</span> Was die App kann</h2>
|
||
<div class="grid">
|
||
<div class="karte"><div class="ico">🔎</div>
|
||
<h3>Klartext statt Amtsdeutsch</h3><p>Jeder Brief in einfacher Sprache erklärt.</p></div>
|
||
<div class="karte"><div class="ico">⏰</div>
|
||
<h3>Fristen im Blick</h3><p>Die App zeigt, bis wann Sie handeln müssen.</p></div>
|
||
<div class="karte"><div class="ico">🌍</div>
|
||
<h3>9 Sprachen</h3><p>Übersetzung u. a. auf Arabisch, Türkisch, Ukrainisch.</p></div>
|
||
<div class="karte"><div class="ico">🔒</div>
|
||
<h3>Sicher & privat</h3><p>Alles verschlüsselt auf Ihrem Gerät. Kein Konto.</p></div>
|
||
</div></section>
|
||
<section><h2><span class="nr">§ 2</span> In Zahlen</h2>
|
||
<div class="grid">
|
||
<div class="karte"><div class="zahl">6,2 Mio.</div>
|
||
<div class="zahl-erkl">Erwachsene in Deutschland haben Mühe mit schweren Texten.</div>
|
||
<div class="zahl-q">Quelle: LEO-Studie 2018</div></div>
|
||
<div class="karte"><div class="zahl">~ 60 Sek.</div>
|
||
<div class="zahl-erkl">braucht die App, um einen Brief zu erklären.</div>
|
||
</div>
|
||
</div></section>
|
||
<section><h2><span class="nr">§ 3</span> So funktioniert es</h2>
|
||
|
||
<div class="schritt"><div class="n">01</div>
|
||
<div><strong>Brief fotografieren</strong><span>Mit dem Handy, auch als PDF.</span></div></div>
|
||
<div class="schritt"><div class="n">02</div>
|
||
<div><strong>Klartext lesen</strong><span>Kurz, einfach, ohne schwere Wörter.</span></div></div>
|
||
<div class="schritt"><div class="n">03</div>
|
||
<div><strong>Richtig reagieren</strong><span>Frist merken, Antwort erstellen, fertig.</span></div></div>
|
||
</section>
|
||
<section id="anmelden"><h2><span class="nr">§ 4</span> Warteliste</h2>
|
||
<div class="antrag"><h3>Seien Sie früh dabei</h3>
|
||
<p>Tragen Sie sich ein — wir schreiben Ihnen, sobald es losgeht.</p>
|
||
<p class="bonus">🎁 Als Dankeschön: 5 Gratis-Analysen statt 3.</p>
|
||
<a class="cta" style="width:auto" href="mailto:?subject=Beh%C3%B6rdenKlar%20Warteliste">Eintragen →</a>
|
||
<p class="klein">Keine Werbung. Jederzeit abmeldbar.</p>
|
||
</div></section>
|
||
<section><h2><span class="nr">§ 5</span> Häufige Fragen</h2>
|
||
<details><summary>Was kostet die App?</summary><p>Die ersten Analysen sind gratis. Danach ein günstiges Abo.</p></details><details><summary>Was passiert mit meinen Daten?</summary><p>Ihre Briefe bleiben verschlüsselt auf Ihrem Gerät.</p></details>
|
||
</section>
|
||
|
||
<footer>
|
||
<a href="/impressum.html">Impressum</a> · <a href="/datenschutz.html">Datenschutz</a>
|
||
<p style="margin-top:10px">Diese Seite ist kein echter Amtsbrief.</p>
|
||
</footer>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |