Files
beh-rde-brief/webseite/hr.html
T
JUSNandClaude Opus 5.5 220e54b815 Startseite, 27 Sprachseiten, App: "in der Regel nach 30 Tagen geloescht" statt "spaetestens"
Je Sprache nur der eine Satzteil umformuliert (Uebersetzer + Gegenpruefung),
Sprachseiten mit tools/sprachseiten/build.js neu erzeugt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 20:34:15 +02:00

421 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BehördenKlar – razumite pismo njemačke ustanove</title>
<meta name="description" content="BehördenKlar objašnjava njemačka službena pisma jednostavnim riječima — na hrvatskom. Fotografirajte, razumijte, odgovorite ispravno.">
<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/hr">
<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="hr_HR">
<meta property="og:url" content="https://behoerdenklar.de/hr">
<meta property="og:title" content="Stiglo je pismo od ustanove?">
<meta property="og:description" content="Fotografirajte — BehördenKlar objašnjava pismo jednostavnim jezikom, na hrvatskom. Lista čekanja: 5 besplatnih analiza.">
<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); }
.cta-sek { background: #fff; color: var(--amtsblau); }
.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; }
details { border-bottom: 1px solid rgba(33,33,29,.28); padding: 14px 4px; }
summary { font-weight: 700; cursor: pointer; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: 'Courier New', ui-monospace, monospace; font-size: 22px; color: var(--amtsblau); }
details[open] summary::after { content: '–'; }
details p { margin-top: 10px; color: var(--grau); font-size: 16px; }
</style>
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "BehördenKlar",
"description": "BehördenKlar objašnjava njemačka službena pisma jednostavnim riječima — na hrvatskom. Fotografirajte, razumijte, odgovorite ispravno.",
"applicationCategory": "AccessibilityApplication",
"operatingSystem": "iOS, Web",
"inLanguage": [
"de",
"tr",
"ar",
"ru",
"uk",
"pl",
"ro",
"en",
"fa",
"ku",
"bg",
"hr",
"sr",
"bs",
"sq",
"it",
"el",
"es",
"pt",
"fr",
"hu",
"vi",
"hi",
"ur",
"ps",
"ti",
"so",
"zh"
],
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "EUR"
},
"author": {
"@type": "Organization",
"name": "Webklar GbR",
"url": "https://behoerdenklar.de"
}
},
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Koliko košta?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Prva 3 pisma su besplatna (5 s kodom s liste čekanja). Zatim kupujete bodove: 5 analiza za 2,99 €, 15 za 6,99 €. Bez pretplate i bez računa."
}
},
{
"@type": "Question",
"name": "Koja pisma aplikacija objašnjava?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Pisma Jobcentra, Ureda za strance, mirovinskog osiguranja, zdravstvenog osiguranja, obiteljske blagajne (Kindergeld), porezne uprave ili ureda za kazne — ukratko, gotovo svako službeno pismo."
}
},
{
"@type": "Question",
"name": "Što se događa s mojim podacima?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Vaša pisma ostaju šifrirana na vašem uređaju. Za analizu se fotografija jednom sigurno šalje umjetnoj inteligenciji i ondje se u pravilu briše nakon 30 dana. Račun nije potreban."
}
}
]
}
]
</script>
</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="Odaberite jezik">
🌐
<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" selected>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>Pismo njemačke ustanove?<br><span class="markiert">Napokon razumljivo.</span></h1>
<p class="intro">Fotografirajte pismo. BehördenKlar ga objašnjava jednostavnim riječima — <strong>i na hrvatskom</strong>. Sa svim rokovima i popisom zadataka.</p>
<div class="hero-fuss">
<a class="cta" href="/demo?sprache=hr">📷 Isprobajte besplatno&nbsp;→</a>
<a class="cta cta-sek" href="#kaufen">Kupite bodove</a>
</div>
<p style="margin-top: 16px; font-size: 15.5px; color: var(--grau);">
2 analize besplatno — bez računa. &nbsp;·&nbsp; <a href="#anmelden">Na listu čekanja</a>
</p>
</header>
<section>
<h2>§ 1 &nbsp;Prije i poslije</h2>
<div class="verwandlung">
<div class="brief-karte amtsdeutsch">
<span class="karten-label">Prije · Izvornik (na njemačkom)</span>
<p>
„Die Festsetzung erfolgt gemäß § 164 AO unter dem Vorbehalt der
Nachprüfung. Der Nachzahlungsbetrag ist binnen eines Monats nach
Bekanntgabe fällig."
</p>
</div>
<p class="pfeil">— 📷 jednu fotografiju kasnije —</p>
<div class="brief-karte klartext">
<span class="karten-label">Poslije · BehördenKlar na hrvatskom</span>
<p>Morate doplatiti 480 € — u roku od mjesec dana. Porezna uprava može kasnije promijeniti odluku. Ako nešto nije točno, možete uložiti prigovor.</p>
</div>
</div>
<p class="hinweis">Aplikacija objašnjava pisma jednostavnim njemačkim i prevodi ih na više od 25 jezika.</p>
</section>
<section>
<h2>§ 2 &nbsp;Kako radi</h2>
<div class="schritte">
<div class="schritt"><div><strong>Fotografirajte</strong> <span>Fotografirajte pismo — ili učitajte PDF.</span></div></div>
<div class="schritt"><div><strong>Razumijte</strong> <span>Jednostavne riječi na vašem jeziku. Semafor pokazuje koliko je hitno.</span></div></div>
<div class="schritt"><div><strong>Odgovorite ispravno</strong> <span>Popis zadataka, podsjetnik na rok i gotov nacrt odgovora.</span></div></div>
</div>
</section>
<section id="kaufen">
<h2>§ 3 &nbsp;Kupite bodove i počnite odmah</h2>
<div class="antrag" style="border-color: var(--amtsblau);">
<h3>Objasnite više pisama</h3>
<p>Ne morate čekati: kupite bodove i koristite BehördenKlar odmah u pregledniku — na svakom uređaju, bez aplikacije. Bodovi ne istječu.</p>
<div id="paketListe" style="display: flex; flex-direction: column; gap: 12px; margin-top: 18px;"></div>
<p style="margin-top: 16px; background: #eef4fb; border-inline-start: 4px solid var(--amtsblau); padding: 12px 14px; font-size: 15px;">
📧 Pri plaćanju unesite e-mail adresu. Dobit ćete osobnu poveznicu za pristup — s njom bodovi rade na svakom uređaju.
</p>
<label style="display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; cursor: pointer;">
<input type="checkbox" id="kaufKonsens" style="margin-top: 3px; flex-shrink: 0;">
<span>Izričito zahtijevam da usluga započne odmah nakon kupnje i znam da time prestaje moje pravo na odustajanje. <a href="/agb.html" target="_blank">AGB</a> · <a href="/widerruf.html" target="_blank">Widerruf</a> (na njemačkom)</span>
</label>
<p id="kaufFehler" style="display: none; margin-top: 12px; color: #b3261e; font-size: 14px; font-weight: 600;"></p>
<p class="klein">🔒 Sigurno plaćanje putem Stripea. Bez PDV-a (§19 UStG). Pružatelj: Webklar GbR — na izvodu će pisati „Webklar".</p>
</div>
</section>
<section id="anmelden">
<h2>§ 4 &nbsp;Rani pristup</h2>
<div class="antrag">
<p class="formular-kopf">Obrazac F-01 · Lista čekanja</p>
<h3>Budite među prvima</h3>
<p>Aplikacija uskoro stiže za iPhone. Prijavite se — poslat ćemo <strong>jednu</strong> poruku kad krene. Bez reklama.</p>
<p class="bonus">🎁 <strong>Vaš poklon:</strong> <strong>5 pisama besplatno</strong> umjesto 3. Kod dobivate e-poštom.</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="Vaša e-mail adresa" 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">Prijavite se na listu →</button>
</form>
<p class="klein">Adresu čuvamo samo za ovu jednu poruku. Možete se odjaviti u svakom trenutku. <a href="datenschutz.html">Pravila privatnosti (na njemačkom)</a>.</p>
</div>
</section>
<section>
<h2>§ 5 &nbsp;Česta pitanja</h2>
<details>
<summary>Koliko košta?</summary>
<p>Prva 3 pisma su besplatna (5 s kodom s liste čekanja). Zatim kupujete bodove: 5 analiza za 2,99 €, 15 za 6,99 €. Bez pretplate i bez računa.</p>
</details>
<details>
<summary>Koja pisma aplikacija objašnjava?</summary>
<p>Pisma Jobcentra, Ureda za strance, mirovinskog osiguranja, zdravstvenog osiguranja, obiteljske blagajne (Kindergeld), porezne uprave ili ureda za kazne — ukratko, gotovo svako službeno pismo.</p>
</details>
<details>
<summary>Što se događa s mojim podacima?</summary>
<p>Vaša pisma ostaju šifrirana na vašem uređaju. Za analizu se fotografija jednom sigurno šalje umjetnoj inteligenciji i ondje se u pravilu briše nakon 30 dana. Račun nije potreban.</p>
</details>
</section>
<footer>
Imate pitanja? 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
&nbsp;·&nbsp; <a href="impressum.html">Impressum (na njemačkom)</a>
&nbsp;·&nbsp; <a href="datenschutz.html">Pravila privatnosti (na njemačkom)</a>
</footer>
</div>
<script>
(function () {
'use strict';
var BASIS = 'https://behoerdenklar-proxy.behoerdenbrief.workers.dev';
var PAKETE = [
{ priceId: 'price_1U6BNnBsRA1AOdnedGW5eefh', titel: '5', preis: '2,99 €' },
{ priceId: 'price_1U6BPRBsRA1AOdnemDUalzb8', titel: '15', preis: '6,99 €', best: true }
];
var liste = document.getElementById('paketListe');
var konsens = document.getElementById('kaufKonsens');
var fehler = document.getElementById('kaufFehler');
if (!liste) return;
konsens.addEventListener('change', function () { if (konsens.checked) fehler.style.display = 'none'; });
PAKETE.forEach(function (p) {
var b = document.createElement('button');
b.className = 'cta'; b.type = 'button';
b.style.width = '100%'; b.style.display = 'flex';
b.style.justifyContent = 'space-between'; b.style.alignItems = 'center';
var l = document.createElement('span');
l.textContent = (p.best ? '⭐ ' : '') + p.titel + ' \u00D7 analiza';
var r = document.createElement('strong'); r.textContent = p.preis;
b.appendChild(l); b.appendChild(r);
b.addEventListener('click', function () { starte(p.priceId, b); });
liste.appendChild(b);
});
function starte(priceId, knopf) {
if (!konsens.checked) { fehler.style.display = 'block'; fehler.textContent = 'Molimo najprije označite kućicu.'; konsens.focus(); return; }
fehler.style.display = 'none';
var alt = knopf.innerHTML; knopf.disabled = true;
fetch(BASIS + '/kaufen', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ priceId: priceId, sprache: 'hr' }) })
.then(function (r) { return r.json(); })
.then(function (d) { if (d && d.url) { window.location.href = d.url; return; } throw new Error('x'); })
.catch(function () { knopf.disabled = false; knopf.innerHTML = alt; fehler.style.display = 'block'; fehler.textContent = 'Stranica za plaćanje nije se mogla otvoriti. Pokušajte ponovno.'; });
}
})();
</script>
<!-- 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>