generated from knso/webklar-preview-template
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
15 KiB
HTML
259 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<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/zh">
|
|
<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="zh_CN">
|
|
<meta property="og:url" content="https://behoerdenklar.de/zh">
|
|
<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">हिन्दी</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" selected>中文</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>
|