Website: 28 Sprachen statt 7 — per Generator statt Handarbeit

tools/sprachseiten/ enthaelt jetzt vorlage.html + texte.js + build.js.
'node tools/sprachseiten/build.js' erzeugt alle 27 Sprachseiten und pflegt
hreflang + Sprachwaehler auch in der handgemachten index.html nach.

Warum ein Generator: 28 Seiten von Hand zu pflegen heisst, jede kuenftige
Aenderung 28-mal zu machen. So ist es eine Aenderung an einer Stelle.

Neue Sprachen u. a. Rumaenisch, Kurdisch (Kurmanci), Bulgarisch, Kroatisch,
Serbisch, Bosnisch, Albanisch, Italienisch, Griechisch, Vietnamesisch, Hindi,
Urdu, Paschtu, Tigrinya, Somali, Chinesisch.

Sprachleiste ist jetzt ein Aufklappmenue — 28 Links nebeneinander waeren
unbenutzbar, besonders auf dem Handy. Google findet die Seiten weiter ueber
hreflang (28 + x-default, auf jeder Seite identisch) und die Sitemap (38 URLs).

Ausserdem: Hinweis in beiden Kauf-Boxen, warum sich die E-Mail-Angabe lohnt
(Zugangs-Link -> Guthaben auf jedem Geraet nutzbar).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
JUSNandClaude Opus 5 committed 2026-09-18 15:56:49 +02:00
1 parent 3cdf9d0bd1
commit 7d0692150c
33 files changed
+7216 -1001

No files matched your search

+258
View File
@@ -0,0 +1,258 @@
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BehördenKlar – نامه‌های اداری آلمان را بفهمید</title>
<meta name="description" content="BehördenKlar نامه‌های اداری آلمان را با کلمات ساده — به فارسی — توضیح می‌دهد. عکس بگیرید، بفهمید، درست پاسخ دهید.">
<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/fa">
<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="fa_IR">
<meta property="og:url" content="https://behoerdenklar.de/fa">
<meta property="og:title" content="نامه‌ای از اداره آلمانی گرفته‌اید؟">
<meta property="og:description" content="عکس بگیرید – BehördenKlar نامه را به زبان ساده و به فارسی توضیح می‌دهد. فهرست انتظار: ۵ تحلیل رایگان.">
<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; }
</style>
</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="زبان را انتخاب کنید">
🌐
<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">English</option>
<option value="fa.html" lang="fa" selected>فارسی</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>نامه‌ای از یک اداره آلمانی؟<br><span class="markiert">حالا قابل فهم است.</span></h1>
<p class="intro">از نامه عکس بگیرید. BehördenKlar آن را با کلمات ساده — <strong>و به فارسی</strong> — توضیح می‌دهد. با همه مهلت‌ها و فهرست کارها.</p>
<div class="hero-fuss">
<a class="cta" href="#anmelden">به فهرست انتظار بپیوندید&nbsp;→</a>
<span class="stempel">به‌زودی روی iPhone</span>
</div>
</header>
<section>
<h2>§ 1 &nbsp;قبل و بعد</h2>
<div class="verwandlung">
<div class="brief-karte amtsdeutsch">
<span class="karten-label">قبل · نامه اصلی (آلمانی)</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">— 📷 یک عکس بعد —</p>
<div class="brief-karte klartext">
<span class="karten-label">بعد · BehördenKlar به فارسی</span>
<p>اگر بدون دلیل موجه به قرار ملاقات نروید، یک ماه ۱۰ درصد پول کمتری دریافت می‌کنید. بروید — یا به‌موقع لغو کنید.</p>
</div>
</div>
<p class="hinweis">برنامه نامه‌ها را به آلمانی ساده توضیح می‌دهد و به بیش از ۲۵ زبان ترجمه می‌کند.</p>
</section>
<section>
<h2>§ 2 &nbsp;چگونه کار می‌کند</h2>
<div class="schritte">
<div class="schritt"><div><strong>عکس بگیرید</strong> <span>از نامه عکس بگیرید — یا فایل PDF بارگذاری کنید.</span></div></div>
<div class="schritt"><div><strong>بفهمید</strong> <span>کلمات ساده به زبان خودتان. یک چراغ راهنما فوریت کار را نشان می‌دهد.</span></div></div>
<div class="schritt"><div><strong>درست پاسخ دهید</strong> <span>فهرست کارها، یادآوری مهلت و یک پیش‌نویس آماده پاسخ.</span></div></div>
</div>
</section>
<section id="anmelden">
<h2>§ 3 &nbsp;دسترسی زودهنگام</h2>
<div class="antrag">
<p class="formular-kopf">فرم F-01 · فهرست انتظار</p>
<h3>جزو اولین‌ها باشید</h3>
<p>برنامه به‌زودی برای iPhone می‌آید. ثبت‌نام کنید — هنگام انتشار <strong>یک</strong> ایمیل برایتان می‌فرستیم. بدون تبلیغات.</p>
<p class="bonus">🎁 <strong>هدیه شما:</strong> به‌جای ۳ نامه، <strong>۵ نامه رایگان</strong> تحلیل کنید. کد را با ایمیل دریافت می‌کنید.</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="نشانی ایمیل شما" 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">ثبت‌نام در فهرست انتظار →</button>
</form>
<p class="klein">نشانی شما را فقط برای همین یک پیام نگه می‌داریم. هر زمان می‌توانید لغو اشتراک کنید. <a href="datenschutz.html">سیاست حفظ حریم خصوصی (آلمانی)</a>.</p>
</div>
</section>
<footer>
سؤالی دارید؟ 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
&nbsp;·&nbsp; <a href="impressum.html">اطلاعات ناشر (آلمانی)</a>
&nbsp;·&nbsp; <a href="datenschutz.html">سیاست حفظ حریم خصوصی (آلمانی)</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>