generated from knso/webklar-preview-template
JUSNandClaude Opus 5
5486a6aafb
Bisher lagen alle 9 FAQ-Bloecke auf deutschen Seiten — die Sprachseiten hatten gar keine. Jetzt hat jede drei Fragen (Kosten, welche Briefe, Datenschutz) in der jeweiligen Sprache. Zwei Effekte: Google kann die aufklappbaren Fragen auch fuer diese Sprachen anzeigen (groesserer Treffer, mehr Klicks), und die Seiten sind inhaltlich nicht mehr duenn — das war mein Bedenken beim Anlegen der 28 Seiten. Sichtbarer Text und Schema werden aus derselben Quelle erzeugt, koennen also nicht auseinanderlaufen. Geprueft: 38 gueltige Bloecke, 0 kaputt, sichtbare Fragen identisch mit dem Schema. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
363 lines
19 KiB
HTML
363 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BehördenKlar – understand letters from German authorities</title>
|
||
<meta name="description" content="BehördenKlar explains German official letters in plain words — in English. Take a photo, understand it, respond correctly.">
|
||
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
|
||
<meta name="theme-color" content="#1d4e89">
|
||
<link rel="alternate" hreflang="de" href="https://behoerdenklar.de/">
|
||
<link rel="alternate" hreflang="tr" href="https://behoerdenklar.de/tr">
|
||
<link rel="alternate" hreflang="ar" href="https://behoerdenklar.de/ar">
|
||
<link rel="alternate" hreflang="ru" href="https://behoerdenklar.de/ru">
|
||
<link rel="alternate" hreflang="uk" href="https://behoerdenklar.de/uk">
|
||
<link rel="alternate" hreflang="pl" href="https://behoerdenklar.de/pl">
|
||
<link rel="alternate" hreflang="ro" href="https://behoerdenklar.de/ro">
|
||
<link rel="alternate" hreflang="en" href="https://behoerdenklar.de/en">
|
||
<link rel="alternate" hreflang="fa" href="https://behoerdenklar.de/fa">
|
||
<link rel="alternate" hreflang="ku" href="https://behoerdenklar.de/ku">
|
||
<link rel="alternate" hreflang="bg" href="https://behoerdenklar.de/bg">
|
||
<link rel="alternate" hreflang="hr" href="https://behoerdenklar.de/hr">
|
||
<link rel="alternate" hreflang="sr" href="https://behoerdenklar.de/sr">
|
||
<link rel="alternate" hreflang="bs" href="https://behoerdenklar.de/bs">
|
||
<link rel="alternate" hreflang="sq" href="https://behoerdenklar.de/sq">
|
||
<link rel="alternate" hreflang="it" href="https://behoerdenklar.de/it">
|
||
<link rel="alternate" hreflang="el" href="https://behoerdenklar.de/el">
|
||
<link rel="alternate" hreflang="es" href="https://behoerdenklar.de/es">
|
||
<link rel="alternate" hreflang="pt" href="https://behoerdenklar.de/pt">
|
||
<link rel="alternate" hreflang="fr" href="https://behoerdenklar.de/fr">
|
||
<link rel="alternate" hreflang="hu" href="https://behoerdenklar.de/hu">
|
||
<link rel="alternate" hreflang="vi" href="https://behoerdenklar.de/vi">
|
||
<link rel="alternate" hreflang="hi" href="https://behoerdenklar.de/hi">
|
||
<link rel="alternate" hreflang="ur" href="https://behoerdenklar.de/ur">
|
||
<link rel="alternate" hreflang="ps" href="https://behoerdenklar.de/ps">
|
||
<link rel="alternate" hreflang="ti" href="https://behoerdenklar.de/ti">
|
||
<link rel="alternate" hreflang="so" href="https://behoerdenklar.de/so">
|
||
<link rel="alternate" hreflang="zh" href="https://behoerdenklar.de/zh">
|
||
<link rel="alternate" hreflang="x-default" href="https://behoerdenklar.de/">
|
||
<link rel="canonical" href="https://behoerdenklar.de/en">
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||
<meta property="og:site_name" content="BehördenKlar">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="en_US">
|
||
<meta property="og:url" content="https://behoerdenklar.de/en">
|
||
<meta property="og:title" content="Got a letter from a German authority?">
|
||
<meta property="og:description" content="Take a photo — BehördenKlar explains the letter in plain language, in English. Waiting list: 5 free analyses.">
|
||
<meta property="og:image" content="https://behoerdenklar.de/vorschau.png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<style>
|
||
:root {
|
||
--papier: #faf7f0; --papier-dunkel: #f1ecdf; --tinte: #21211d;
|
||
--grau: #6b675e; --amtsblau: #1d4e89; --stempelrot: #b3372b;
|
||
--marker: #ffe66b; --gruen: #2e7d4f; color-scheme: light;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: Georgia, 'Times New Roman', serif;
|
||
background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(33,33,29,0.025) 34px 35px), var(--papier);
|
||
color: var(--tinte); line-height: 1.7; font-size: 17px;
|
||
}
|
||
.mono { font-family: 'Courier New', ui-monospace, monospace; letter-spacing: 0.02em; }
|
||
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px 72px; }
|
||
.briefkopf {
|
||
display: flex; justify-content: space-between; align-items: baseline;
|
||
padding: 20px 0 12px; border-bottom: 2px solid var(--tinte); font-size: 14px;
|
||
}
|
||
.briefkopf .absender { font-weight: 700; font-size: 16px; }
|
||
.briefkopf .az { color: var(--grau); font-size: 13px; }
|
||
.sprachen { padding: 12px 0 0; font-size: 15px; color: var(--grau); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
|
||
.sprachwahl {
|
||
font-family: inherit; font-size: 15px; color: var(--tinte);
|
||
background: #fff; border: 1.5px solid var(--tinte); padding: 6px 10px;
|
||
max-width: 220px; cursor: pointer;
|
||
}
|
||
header { padding: 40px 0 8px; }
|
||
h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.15; font-weight: 700; }
|
||
.markiert {
|
||
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;
|
||
}
|
||
.intro { margin-top: 22px; font-size: 18px; max-width: 580px; }
|
||
.hero-fuss { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
|
||
.cta {
|
||
display: inline-block; padding: 16px 28px; background: var(--amtsblau); color: #fff;
|
||
text-decoration: none; font-family: inherit; font-size: 17px; font-weight: 700;
|
||
border: 2px solid var(--tinte); box-shadow: 5px 5px 0 var(--tinte);
|
||
transition: transform .12s ease, box-shadow .12s ease;
|
||
}
|
||
.cta:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--tinte); }
|
||
.stempel {
|
||
display: inline-block; padding: 7px 14px; border: 2.5px solid var(--stempelrot);
|
||
color: var(--stempelrot); font-family: 'Courier New', ui-monospace, monospace;
|
||
font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
|
||
transform: rotate(-4deg); opacity: .9;
|
||
}
|
||
section { margin-top: 56px; }
|
||
h2 {
|
||
font-size: 15px; text-transform: uppercase; letter-spacing: .14em; color: var(--grau);
|
||
font-weight: 400; margin-bottom: 18px; display: flex; align-items: center; gap: 12px;
|
||
}
|
||
h2::after { content: ''; flex: 1; border-top: 1px solid rgba(33,33,29,.25); }
|
||
.verwandlung { display: grid; gap: 14px; }
|
||
.brief-karte {
|
||
background: #fff; border: 1px solid rgba(33,33,29,.28); padding: 22px 24px;
|
||
position: relative; box-shadow: 4px 5px 0 rgba(33,33,29,.08);
|
||
}
|
||
.brief-karte.amtsdeutsch { transform: rotate(-.7deg); background: var(--papier-dunkel); }
|
||
.brief-karte.klartext { transform: rotate(.5deg); }
|
||
.karten-label {
|
||
position: absolute; top: -12px; inset-inline-start: 16px;
|
||
font-family: 'Courier New', ui-monospace, monospace; font-size: 12px;
|
||
text-transform: uppercase; letter-spacing: .1em;
|
||
background: var(--tinte); color: var(--papier); padding: 3px 10px;
|
||
}
|
||
.brief-karte.klartext .karten-label { background: var(--gruen); }
|
||
.amtsdeutsch p { font-family: 'Courier New', ui-monospace, monospace; font-size: 15px; direction: ltr; text-align: start; }
|
||
.pfeil { text-align: center; color: var(--grau); font-size: 15px; margin: 4px 0; }
|
||
.hinweis { margin-top: 18px; font-size: 15.5px; color: var(--grau); }
|
||
.schritte { display: grid; gap: 14px; }
|
||
.schritt { background: #fff; border: 1px solid rgba(33,33,29,.28); padding: 16px 20px; }
|
||
.schritt strong { font-weight: 700; }
|
||
.schritt span { color: var(--grau); }
|
||
.antrag {
|
||
background: #fff; border: 2px solid var(--tinte); box-shadow: 7px 8px 0 rgba(33,33,29,.9);
|
||
padding: 30px 28px; position: relative; margin-top: 8px;
|
||
}
|
||
.antrag .formular-kopf {
|
||
font-family: 'Courier New', ui-monospace, monospace; font-size: 13px;
|
||
text-transform: uppercase; letter-spacing: .1em; color: var(--grau); margin-bottom: 6px;
|
||
}
|
||
.antrag h3 { font-size: 26px; line-height: 1.25; }
|
||
.antrag p { margin-top: 12px; max-width: 540px; }
|
||
.bonus {
|
||
margin: 18px 0; padding: 14px 16px; font-size: 17px;
|
||
background: linear-gradient(104deg, transparent 1%, var(--marker) 3%, var(--marker) 97%, transparent 99%);
|
||
}
|
||
.antrag .klein { font-size: 13.5px; color: var(--grau); margin-top: 14px; }
|
||
.antrag .klein a { color: var(--grau); }
|
||
a { color: var(--amtsblau); }
|
||
footer { margin-top: 56px; padding-top: 14px; border-top: 2px solid var(--tinte); font-size: 14.5px; color: var(--grau); }
|
||
.wl-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
|
||
.wl-input {
|
||
width: 100%; padding: 15px 16px; font-size: 17px; font-family: inherit;
|
||
border: 2px solid var(--tinte); background: #fff; color: var(--tinte);
|
||
}
|
||
.wl-input::placeholder { color: #9a958a; }
|
||
.wl-btn { width: 100%; cursor: pointer; text-align: center; font-family: inherit; }
|
||
details { border-bottom: 1px solid rgba(33,33,29,.28); 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', ui-monospace, monospace; font-size: 22px; color: var(--amtsblau); }
|
||
details[open] summary::after { content: '–'; }
|
||
details p { margin-top: 10px; color: var(--grau); font-size: 16px; }
|
||
</style>
|
||
<script type="application/ld+json">
|
||
[
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "BehördenKlar",
|
||
"description": "BehördenKlar explains German official letters in plain words — in English. Take a photo, understand it, respond correctly.",
|
||
"applicationCategory": "AccessibilityApplication",
|
||
"operatingSystem": "iOS, Web",
|
||
"inLanguage": [
|
||
"de",
|
||
"tr",
|
||
"ar",
|
||
"ru",
|
||
"uk",
|
||
"pl",
|
||
"ro",
|
||
"en",
|
||
"fa",
|
||
"ku",
|
||
"bg",
|
||
"hr",
|
||
"sr",
|
||
"bs",
|
||
"sq",
|
||
"it",
|
||
"el",
|
||
"es",
|
||
"pt",
|
||
"fr",
|
||
"hu",
|
||
"vi",
|
||
"hi",
|
||
"ur",
|
||
"ps",
|
||
"ti",
|
||
"so",
|
||
"zh"
|
||
],
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "EUR"
|
||
},
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "Webklar GbR",
|
||
"url": "https://behoerdenklar.de"
|
||
}
|
||
},
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
"mainEntity": [
|
||
{
|
||
"@type": "Question",
|
||
"name": "What does it cost?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Your first 3 letters are free (5 with the waiting-list code). After that you buy credit: 5 analyses for €2.99 or 15 for €6.99. No subscription, no account."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Which letters can the app explain?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Letters from the Jobcenter, the immigration office, pension insurance, health insurance, the family benefits office (Kindergeld), the tax office or the fines authority — in short, almost any official letter."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "What happens to my data?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Your letters stay encrypted on your own device. For the analysis the photo is sent once, securely, to the AI and is deleted there after 30 days at the latest. You do not need an account."
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="briefkopf">
|
||
<span class="absender">📬 BehördenKlar <span style="font-weight:400;font-size:.62em;opacity:.6;letter-spacing:.04em;">by Webklar</span></span>
|
||
<span class="az mono">Az: KLAR-01/2026</span>
|
||
</div>
|
||
<nav class="sprachen" aria-label="Choose language">
|
||
🌐
|
||
<select class="sprachwahl" onchange="if(this.value)location.href=this.value">
|
||
<option value="index.html" lang="de">Deutsch</option>
|
||
<option value="tr.html" lang="tr">Türkçe</option>
|
||
<option value="ar.html" lang="ar">العربية</option>
|
||
<option value="ru.html" lang="ru">Русский</option>
|
||
<option value="uk.html" lang="uk">Українська</option>
|
||
<option value="pl.html" lang="pl">Polski</option>
|
||
<option value="ro.html" lang="ro">Română</option>
|
||
<option value="en.html" lang="en" selected>English</option>
|
||
<option value="fa.html" lang="fa">فارسی</option>
|
||
<option value="ku.html" lang="ku">Kurdî</option>
|
||
<option value="bg.html" lang="bg">Български</option>
|
||
<option value="hr.html" lang="hr">Hrvatski</option>
|
||
<option value="sr.html" lang="sr">Српски</option>
|
||
<option value="bs.html" lang="bs">Bosanski</option>
|
||
<option value="sq.html" lang="sq">Shqip</option>
|
||
<option value="it.html" lang="it">Italiano</option>
|
||
<option value="el.html" lang="el">Ελληνικά</option>
|
||
<option value="es.html" lang="es">Español</option>
|
||
<option value="pt.html" lang="pt">Português</option>
|
||
<option value="fr.html" lang="fr">Français</option>
|
||
<option value="hu.html" lang="hu">Magyar</option>
|
||
<option value="vi.html" lang="vi">Tiếng Việt</option>
|
||
<option value="hi.html" lang="hi">हिन्दी</option>
|
||
<option value="ur.html" lang="ur">اردو</option>
|
||
<option value="ps.html" lang="ps">پښتو</option>
|
||
<option value="ti.html" lang="ti">ትግርኛ</option>
|
||
<option value="so.html" lang="so">Soomaali</option>
|
||
<option value="zh.html" lang="zh">中文</option>
|
||
</select>
|
||
</nav>
|
||
|
||
<header>
|
||
<h1>A letter from a German authority?<br><span class="markiert">Finally clear.</span></h1>
|
||
<p class="intro">Take a photo of the letter. BehördenKlar explains it in plain words — <strong>and in English</strong>. With every deadline and a to-do list.</p>
|
||
<div class="hero-fuss">
|
||
<a class="cta" href="#anmelden">Join the waiting list →</a>
|
||
<span class="stempel">Coming soon on iPhone</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section>
|
||
<h2>§ 1 Before and after</h2>
|
||
<div class="verwandlung">
|
||
<div class="brief-karte amtsdeutsch">
|
||
<span class="karten-label">Before · Original letter (German)</span>
|
||
<p>
|
||
„Gemäß § 32 SGB II wird bei Nichterscheinen ohne wichtigen Grund
|
||
eine Minderung des maßgebenden Regelbedarfs in Höhe von 10 vom
|
||
Hundert festgestellt."
|
||
</p>
|
||
</div>
|
||
<p class="pfeil">— 📷 one photo later —</p>
|
||
<div class="brief-karte klartext">
|
||
<span class="karten-label">After · BehördenKlar in English</span>
|
||
<p>If you miss the appointment without a good reason, you will get 10% less money for one month. Go — or cancel in good time.</p>
|
||
</div>
|
||
</div>
|
||
<p class="hinweis">The app explains letters in plain German and translates them into more than 25 languages.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>§ 2 How it works</h2>
|
||
<div class="schritte">
|
||
<div class="schritt"><div><strong>Take a photo</strong> <span>Photograph the letter — or upload a PDF.</span></div></div>
|
||
<div class="schritt"><div><strong>Understand</strong> <span>Plain words, in your language. A traffic light shows how urgent it is.</span></div></div>
|
||
<div class="schritt"><div><strong>Respond correctly</strong> <span>A to-do list, a deadline reminder and a ready-made draft reply.</span></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="anmelden">
|
||
<h2>§ 3 Early access</h2>
|
||
<div class="antrag">
|
||
<p class="formular-kopf">Form F-01 · Waiting list</p>
|
||
<h3>Be among the first</h3>
|
||
<p>The app is coming soon for iPhone. Sign up — we will send you <strong>one</strong> email when it launches. No advertising.</p>
|
||
<p class="bonus">🎁 <strong>Your gift:</strong> analyse <strong>5 letters free</strong> instead of 3. You get the code by email.</p>
|
||
<form class="wl-form" action="https://86550585.sibforms.com/serve/MUIFAAvOQCpFg148k-xD2Ze2PDVKKaFEIaLECCCMe9fGKd_uIurPljyn_IhTrkR0EkM_pQp_8VBzcHZ6N9sKDX5GBZi9elYKN6isXGPUUxcAgO37OKhTFZyMlJiC9ikRmPI8Q2tU2GvqP6esJ5ReGfv1htZV_OfXRIgW59P6pkeUsYKxqdXA7nWOaWxNTYz4MzzoGg7czJMJ2fxuEg==" method="POST">
|
||
<input class="wl-input" type="email" name="EMAIL" placeholder="Your email address" required autocomplete="email">
|
||
<input type="text" name="email_address_check" value="" style="position:absolute; left:-5000px;" tabindex="-1" autocomplete="off" aria-hidden="true">
|
||
<input type="hidden" name="locale" value="de">
|
||
<input type="hidden" name="html_type" value="simple">
|
||
<button class="cta wl-btn" type="submit">Join the waiting list →</button>
|
||
</form>
|
||
<p class="klein">We store your address only for this single message. You can unsubscribe at any time. <a href="datenschutz.html">Privacy policy (German)</a>.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>§ 4 Frequently asked questions</h2>
|
||
<details>
|
||
<summary>What does it cost?</summary>
|
||
<p>Your first 3 letters are free (5 with the waiting-list code). After that you buy credit: 5 analyses for €2.99 or 15 for €6.99. No subscription, no account.</p>
|
||
</details>
|
||
<details>
|
||
<summary>Which letters can the app explain?</summary>
|
||
<p>Letters from the Jobcenter, the immigration office, pension insurance, health insurance, the family benefits office (Kindergeld), the tax office or the fines authority — in short, almost any official letter.</p>
|
||
</details>
|
||
<details>
|
||
<summary>What happens to my data?</summary>
|
||
<p>Your letters stay encrypted on your own device. For the analysis the photo is sent once, securely, to the AI and is deleted there after 30 days at the latest. You do not need an account.</p>
|
||
</details>
|
||
</section>
|
||
|
||
<footer>
|
||
Questions? 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
|
||
· <a href="impressum.html">Legal notice (German)</a>
|
||
· <a href="datenschutz.html">Privacy policy (German)</a>
|
||
</footer>
|
||
</div>
|
||
<!-- Cloudflare Web Analytics: cookielose Reichweitenmessung, keine Nutzer-Profile -->
|
||
<script type='module' src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "11f017e9a707466b9151921db6125dde"}'></script>
|
||
</body>
|
||
</html>
|