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
17 KiB
HTML
259 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hi">
|
|
<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/hi">
|
|
<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="hi_IN">
|
|
<meta property="og:url" content="https://behoerdenklar.de/hi">
|
|
<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">العربية</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" selected>हिन्दी</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> 3 के बजाय <strong>5 चिट्ठियाँ मुफ़्त</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>
|
|
· <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>
|