Website: 28 Sprachen statt 7 — per Generator statt Handarbeit

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>

webseite/bs.html

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="bs">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BehördenKlar – razumijte pismo njemačke ustanove</title>
+  <meta name="description" content="BehördenKlar objašnjava njemačka službena pisma jednostavnim riječima — na bosanskom. Fotografišite, 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/bs">
+  <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="bs_BA">
+  <meta property="og:url" content="https://behoerdenklar.de/bs">
+  <meta property="og:title" content="Stiglo je pismo od ustanove?">
+  <meta property="og:description" content="Fotografišite — BehördenKlar objašnjava pismo jednostavnim jezikom, na bosanskom. 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); }
+    .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="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">Hrvatski</option>
+      <option value="sr.html" lang="sr">Српски</option>
+      <option value="bs.html" lang="bs" selected>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">Konačno razumljivo.</span></h1>
+      <p class="intro">Fotografišite pismo. BehördenKlar ga objašnjava jednostavnim riječima — <strong>i na bosanskom</strong>. Sa svim rokovima i spiskom zadataka.</p>
+      <div class="hero-fuss">
+        <a class="cta" href="#anmelden">Na listu čekanja&nbsp;→</a>
+        <span class="stempel">Uskoro na iPhoneu</span>
+      </div>
+    </header>
+
+    <section>
+      <h2>§ 1 &nbsp;Prije i poslije</h2>
+      <div class="verwandlung">
+        <div class="brief-karte amtsdeutsch">
+          <span class="karten-label">Prije · Original (na njemačkom)</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">— 📷 jednu fotografiju kasnije —</p>
+        <div class="brief-karte klartext">
+          <span class="karten-label">Poslije · BehördenKlar na bosanskom</span>
+          <p>Ako bez dobrog razloga ne dođete na termin, mjesec dana dobijate 10 % manje novca. Dođite — ili otkažite na vrijeme.</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>Fotografišite</strong> <span>Fotografišite 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>Spisak zadataka, podsjetnik na rok i gotov nacrt odgovora.</span></div></div>
+      </div>
+    </section>
+
+    <section id="anmelden">
+      <h2>§ 3 &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 dobijate 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>
+
+    <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>
+  <!-- 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>