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="pt">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BehördenKlar – perceber as cartas das repartições alemãs</title>
|
||
<meta name="description" content="O BehördenKlar explica as cartas oficiais alemãs com palavras simples — em português. Tire uma foto, perceba, responda corretamente.">
|
||
<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/pt">
|
||
<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="pt_PT">
|
||
<meta property="og:url" content="https://behoerdenklar.de/pt">
|
||
<meta property="og:title" content="Recebeu uma carta de uma repartição alemã?">
|
||
<meta property="og:description" content="Tire uma foto — o BehördenKlar explica a carta em linguagem simples, em português. Lista de espera: 5 análises grátis.">
|
||
<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="Escolha o idioma">
|
||
🌐
|
||
<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" selected>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>Uma carta de uma repartição alemã?<br><span class="markiert">Finalmente clara.</span></h1>
|
||
<p class="intro">Fotografe a carta. O BehördenKlar explica-a com palavras simples — <strong>e em português</strong>. Com todos os prazos e uma lista de tarefas.</p>
|
||
<div class="hero-fuss">
|
||
<a class="cta" href="#anmelden">Entrar na lista de espera →</a>
|
||
<span class="stempel">Brevemente no iPhone</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section>
|
||
<h2>§ 1 Antes e depois</h2>
|
||
<div class="verwandlung">
|
||
<div class="brief-karte amtsdeutsch">
|
||
<span class="karten-label">Antes · Carta original (em alemão)</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">— 📷 uma foto depois —</p>
|
||
<div class="brief-karte klartext">
|
||
<span class="karten-label">Depois · BehördenKlar em português</span>
|
||
<p>Se não for à marcação sem um bom motivo, durante um mês recebe menos 10 % de dinheiro. Vá — ou cancele a tempo.</p>
|
||
</div>
|
||
</div>
|
||
<p class="hinweis">A aplicação explica as cartas em alemão simples e traduz para mais de 25 idiomas.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>§ 2 Como funciona</h2>
|
||
<div class="schritte">
|
||
<div class="schritt"><div><strong>Tire uma foto</strong> <span>Fotografe a carta — ou carregue um PDF.</span></div></div>
|
||
<div class="schritt"><div><strong>Perceba</strong> <span>Palavras simples, na sua língua. Um semáforo mostra a urgência.</span></div></div>
|
||
<div class="schritt"><div><strong>Responda corretamente</strong> <span>Lista de tarefas, lembrete do prazo e um rascunho de resposta pronto.</span></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="anmelden">
|
||
<h2>§ 3 Acesso antecipado</h2>
|
||
<div class="antrag">
|
||
<p class="formular-kopf">Formulário F-01 · Lista de espera</p>
|
||
<h3>Esteja entre os primeiros</h3>
|
||
<p>A aplicação chega em breve para iPhone. Inscreva-se — enviamos <strong>um</strong> e-mail quando estiver pronta. Sem publicidade.</p>
|
||
<p class="bonus">🎁 <strong>O seu presente:</strong> analise <strong>5 cartas grátis</strong> em vez de 3. Recebe o código por e-mail.</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="O seu endereço de e-mail" 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">Entrar na lista →</button>
|
||
</form>
|
||
<p class="klein">Guardamos o endereço apenas para esta única mensagem. Pode cancelar a qualquer momento. <a href="datenschutz.html">Política de privacidade (em alemão)</a>.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
Tem dúvidas? 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
|
||
· <a href="impressum.html">Ficha técnica (em alemão)</a>
|
||
· <a href="datenschutz.html">Política de privacidade (em alemão)</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>
|