generated from knso/webklar-preview-template
JUSNandClaude Opus 5
7d0692150c
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>
259 lines
16 KiB
HTML
259 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" 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/ar">
|
|
<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="ar_AR">
|
|
<meta property="og:url" content="https://behoerdenklar.de/ar">
|
|
<meta property="og:title" content="وصلتك رسالة من دائرة ألمانية؟">
|
|
<meta property="og:description" content="صوّر الرسالة – يشرحها BehördenKlar بلغة بسيطة وبالعربية. قائمة الانتظار: 5 تحليلات مجانية.">
|
|
<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" selected>العربية</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">فارسی</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">انضم إلى قائمة الانتظار →</a>
|
|
<span class="stempel">قريباً على iPhone</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>§ 1 قبل وبعد</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>إذا لم تحضر الموعد بدون سبب وجيه، ستحصل على مال أقل بنسبة 10٪ لمدة شهر. اذهب إلى الموعد — أو ألغِه في الوقت المناسب.</p>
|
|
</div>
|
|
</div>
|
|
<p class="hinweis">يشرح التطبيق الرسائل بألمانية بسيطة ويترجمها إلى أكثر من 25 لغة.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>§ 2 كيف يعمل</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 وصول مبكر</h2>
|
|
<div class="antrag">
|
|
<p class="formular-kopf">استمارة F-01 · قائمة الانتظار</p>
|
|
<h3>كن من الأوائل</h3>
|
|
<p>التطبيق قادم قريباً لـ iPhone. سجّل الآن — سنرسل لك <strong>رسالة واحدة</strong> عند الإطلاق. بدون إعلانات.</p>
|
|
<p class="bonus">🎁 <strong>هديتك:</strong> حلّل <strong>5 رسائل مجاناً</strong> بدلاً من 3. ستصلك الشيفرة بالبريد.</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>
|
|
· <a href="impressum.html">بيانات الناشر (بالألمانية)</a>
|
|
· <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>
|