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/ar.html

@@ -4,39 +4,37 @@
   <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 يشرح الرسائل الرسمية الألمانية بكلمات بسيطة — بالعربية. صوّر الرسالة، افهمها، وردّ بشكل صحيح. قريباً على iPhone.">
-  <meta name="keywords" content="Amtsbrief, Behördenbrief, verständlich, einfache Sprache, Jobcenter, Ausländerbehörde, Warteliste">
-  <meta name="author" content="BehördenKlar">
+  <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">
-  <meta name="apple-mobile-web-app-title" content="BehördenKlar">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta property="og:locale:alternate" content="tr_TR">
-  <meta property="og:locale:alternate" content="ar_AR">
-  <meta property="og:locale:alternate" content="en_US">
-  <meta property="og:locale:alternate" content="uk_UA">
-  <meta property="og:locale:alternate" content="ru_RU">
-  <meta property="og:locale:alternate" content="pl_PL">
-  <link rel="manifest" href="/manifest.json">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-  <meta name="google-site-verification" content="6o1sIKmK7WSloQrdTs2q4WtQsCUBB-bRa24gNXzVeFc">
-  <meta name="msvalidate.01" content="...">
-  <meta name="apple-app-site-association" content="...">
-  <meta name="app-links" content="...">
-  <meta name="target-audience" content="Erwachsene mit Leseschwierigkeiten, Migranten, Asylbewerber, Menschen mit Behinderungen, Ratsuchende">
-  <meta name="accessibility" content="WCAG 2.1 AA, Vorlesen, einfache Sprache, mehrsprachig">
-  <meta name="topics" content="civic-tech, legal-tech, accessibility, education, language-simplification, vulnerable-populations">
-  <meta name="target-organizations" content="Beratungsstellen, Jobcenter, Caritas, Diakonie, VHS, Migrationsberatung">
-  <meta name="problem-statement" content="6,2 Millionen Deutsche haben Probleme mit schweren Texten. Amtsbriefe sind eine Barriere.">
   <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="en" href="https://behoerdenklar.de/en">
-  <link rel="alternate" hreflang="uk" href="https://behoerdenklar.de/uk">
   <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/ar">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
@@ -44,12 +42,11 @@
   <meta property="og:type" content="website">
   <meta property="og:locale" content="ar_AR">
   <meta property="og:url" content="https://behoerdenklar.de/ar">
-  <meta property="og:title" content="وصلتك رسالة من دائرة حكومية ألمانية؟">
-  <meta property="og:description" content="صوّر الرسالة — التطبيق يشرحها بالعربية وبلغة بسيطة ويحدد المواعيد المهمة. سجّل في قائمة الانتظار: 5 تحليلات مجانية.">
+  <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 property="og:image:alt" content="BehördenKlar – Brief vom Amt. Endlich verstanden.">
   <meta name="twitter:card" content="summary_large_image">
   <style>
     :root {
@@ -61,9 +58,7 @@
     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);
+      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; }
@@ -74,85 +69,67 @@
     }
     .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 14px; align-items: center;
+    .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;
     }
-    .sprachen a { color: var(--amtsblau); text-decoration: none; border-bottom: 1px dotted var(--amtsblau); }
-    .sprachen .aktiv { font-weight: 700; color: var(--tinte); border-bottom: none; }
-    header { padding: 44px 0 8px; }
-    h1 { font-size: clamp(32px, 6.5vw, 48px); line-height: 1.14; font-weight: 700; }
+    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: 24px; font-size: 19px; max-width: 580px; }
-    .hero-fuss { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
+    .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: 17px 30px; background: var(--amtsblau);
-      color: #fff; text-decoration: none; font-size: 18px; font-weight: 700;
+      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 0.12s ease, box-shadow 0.12s ease;
+      transition: transform .12s ease, box-shadow .12s ease;
     }
-    .cta:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tinte); }
+    .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: 0.08em;
-      text-transform: uppercase; transform: rotate(-4deg); opacity: 0.9;
+      font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
+      transform: rotate(-4deg); opacity: .9;
     }
-    section { margin-top: 60px; }
+    section { margin-top: 56px; }
     h2 {
-      font-size: 15px; text-transform: uppercase; letter-spacing: 0.14em;
-      color: var(--grau); font-weight: 400; margin-bottom: 20px;
-      display: flex; align-items: center; gap: 12px;
+      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,0.25); }
+    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,0.28);
-      padding: 22px 24px; position: relative;
-      box-shadow: 4px 5px 0 rgba(33,33,29,0.08);
+      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(-0.7deg); background: var(--papier-dunkel); }
-    .brief-karte.klartext { transform: rotate(0.5deg); }
+    .brief-karte.amtsdeutsch { transform: rotate(-.7deg); background: var(--papier-dunkel); }
+    .brief-karte.klartext { transform: rotate(.5deg); }
     .karten-label {
-      position: absolute; top: -12px; left: 16px;
+      position: absolute; top: -12px; inset-inline-start: 16px;
       font-family: 'Courier New', ui-monospace, monospace; font-size: 12px;
-      text-transform: uppercase; letter-spacing: 0.1em;
+      text-transform: uppercase; letter-spacing: .1em;
       background: var(--tinte); color: var(--papier); padding: 3px 10px;
     }
-    [dir="rtl"] .karten-label { left: auto; right: 16px; }
     .brief-karte.klartext .karten-label { background: var(--gruen); }
-    .amtsdeutsch p {
-      font-family: 'Courier New', ui-monospace, monospace;
-      font-size: 14.5px; color: #45423b; line-height: 1.75;
-    }
-    .klartext p { font-size: 18px; }
-    .pfeil { text-align: center; font-size: 15px; color: var(--grau); font-family: 'Courier New', ui-monospace, monospace; }
-    .hinweis { margin-top: 10px; font-size: 14.5px; color: var(--grau); }
-    .schritte { counter-reset: schritt; }
-    .schritt {
-      counter-increment: schritt; display: flex; gap: 20px; padding: 20px 4px;
-      border-bottom: 1px solid rgba(33,33,29,0.15); align-items: baseline;
-    }
-    .schritt:last-child { border-bottom: none; }
-    .schritt::before {
-      content: counter(schritt, decimal-leading-zero);
-      font-family: 'Courier New', ui-monospace, monospace;
-      font-size: 30px; font-weight: 700; color: var(--amtsblau);
-      flex-shrink: 0; width: 52px;
-    }
-    .schritt strong { font-size: 19px; display: block; margin-bottom: 2px; }
-    .schritt span { color: var(--grau); font-size: 16px; }
+    .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,0.9);
+      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: 0.1em; color: var(--grau); margin-bottom: 6px;
+      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; }
@@ -163,12 +140,7 @@
     .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);
-    }
-
-    /* Warteliste-Formular (Brevo) */
+    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;
@@ -177,72 +149,62 @@
     .wl-input::placeholder { color: #9a958a; }
     .wl-btn { width: 100%; cursor: pointer; text-align: center; font-family: inherit; }
   </style>
-  <script type="application/ld+json">
-  {
-    "@context": "https://schema.org",
-    "@type": "SoftwareApplication",
-    "name": "BehördenKlar",
-    "description": "KI erklärt Amtsbriefe in einfacher Sprache für Menschen mit Leseschwierigkeiten, Migranten und Ratsuchende",
-    "applicationCategory": "AccessibilityApplication",
-    "offers": {
-      "@type": "Offer",
-      "price": "0",
-      "priceCurrency": "EUR"
-    },
-    "inLanguage": ["de", "tr", "ar", "en", "uk", "ru", "pl", "fa", "ro", "fr"],
-    "featureList": [
-      "Amtsbriefe fotografieren und erklären lassen",
-      "Klartext in einfacher Sprache",
-      "Übersetzung in über 25 Sprachen",
-      "Automatische Erinnerungen für Fristen",
-      "Fertige Antworten generieren",
-      "Vorlesen der Inhalte",
-      "Keine Anmeldung erforderlich"
-    ],
-    "targetGroup": "Erwachsene mit Leseschwierigkeiten, Migranten, vulnerable Bevölkerungsgruppen",
-    "author": {
-      "@type": "Organization",
-      "name": "BehördenKlar"
-    }
-  }
-  </script>
 </head>
 <body>
   <div class="wrap">
     <div class="briefkopf">
-      <span class="absender">📬 BehördenKlar</span>
+      <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="اختر اللغة">
       🌐
-      <a href="index.html" lang="de">Deutsch</a>
-      <a href="tr.html" lang="tr">Türkçe</a>
-      <span class="aktiv">العربية</span>
-      <a href="en.html" lang="en">English</a>
-      <a href="uk.html" lang="uk">Українська</a>
-      <a href="ru.html" lang="ru">Русский</a>
-      <a href="pl.html" lang="pl">Polski</a>
+      <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" selected>العربية</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">中文</option>
+      </select>
     </nav>
 
     <header>
-      <h1>رسالة من دائرة ألمانية؟<br><span class="markiert">الآن فهمها سهل.</span></h1>
-      <p class="intro">
-        صوّر الرسالة بهاتفك. يشرح لك BehördenKlar الرسالة بألمانية بسيطة —
-        <strong>وبالعربية أيضاً</strong>. مع كل المواعيد وقائمة بما يجب أن
-        تفعله.
-      </p>
+      <h1>وصلتك رسالة من دائرة ألمانية؟<br><span class="markiert">الآن تفهمها بسهولة.</span></h1>
+      <p class="intro">صوّر الرسالة. يشرحها BehördenKlar بكلمات بسيطة — <strong>وبالعربية</strong> — مع كل المواعيد النهائية وقائمة بما عليك فعله.</p>
       <div class="hero-fuss">
-        <a class="cta" href="#anmelden">سجّل في قائمة الانتظار&nbsp;←</a>
+        <a class="cta" href="#anmelden">انضم إلى قائمة الانتظار&nbsp;→</a>
         <span class="stempel">قريباً على iPhone</span>
       </div>
     </header>
 
     <section>
-      <h2>§ 1 &nbsp;التحويل</h2>
+      <h2>§ 1 &nbsp;قبل وبعد</h2>
       <div class="verwandlung">
         <div class="brief-karte amtsdeutsch">
           <span class="karten-label">قبل · الرسالة الأصلية (بالألمانية)</span>
-          <p dir="ltr" lang="de">
+          <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."
@@ -251,58 +213,42 @@
         <p class="pfeil">— 📷 بعد صورة واحدة —</p>
         <div class="brief-karte klartext">
           <span class="karten-label">بعد · BehördenKlar بالعربية</span>
-          <p>
-            إذا لم تذهب إلى الموعد بدون سبب مهم، ستحصل على نقود أقل بنسبة
-            ١٠٪ لمدة شهر واحد. اذهب إلى الموعد — أو ألغِه في الوقت المناسب.
-          </p>
+          <p>إذا لم تحضر الموعد بدون سبب وجيه، ستحصل على مال أقل بنسبة 10٪ لمدة شهر. اذهب إلى الموعد — أو ألغِه في الوقت المناسب.</p>
         </div>
       </div>
-      <p class="hinweis">
-        يشرح التطبيق الرسائل بألمانية بسيطة ويترجمها إلى: العربية، التركية،
-        الإنجليزية، الروسية، الأوكرانية، الفرنسية، الفارسية، الرومانية
-        والبولندية.
-      </p>
+      <p class="hinweis">يشرح التطبيق الرسائل بألمانية بسيطة ويترجمها إلى أكثر من 25 لغة.</p>
     </section>
 
     <section>
       <h2>§ 2 &nbsp;كيف يعمل</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 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 &nbsp;الوصول المبكر</h2>
+      <h2>§ 3 &nbsp;وصول مبكر</h2>
       <div class="antrag">
-        <p class="formular-kopf">نموذج F-01 · قائمة الانتظار</p>
+        <p class="formular-kopf">استمارة F-01 · قائمة الانتظار</p>
         <h3>كن من الأوائل</h3>
-        <p>
-          التطبيق قادم قريباً لهواتف iPhone. سجّل الآن — نرسل لك رسالة
-          <strong>واحدة</strong> عندما يصبح التطبيق جاهزاً. بدون دعاية.
-        </p>
-        <p class="bonus">
-          🎁 <strong>هديتك:</strong> حلّل <strong>٥ رسائل مجاناً</strong>
-          بدلاً من ٣. تحصل على الرمز عبر البريد الإلكتروني.
-        </p>
+        <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>
+          <button class="cta wl-btn" type="submit">انضم إلى قائمة الانتظار →</button>
         </form>
-        <p class="klein">
-          نحفظ عنوان بريدك الإلكتروني فقط لهذه الرسالة الواحدة. يمكنك إلغاء
-          التسجيل في أي وقت. <a href="datenschutz.html">سياسة الخصوصية (بالألمانية)</a>.
-        </p>
+        <p class="klein">نحفظ بريدك لهذه الرسالة الواحدة فقط. يمكنك إلغاء الاشتراك في أي وقت. <a href="datenschutz.html">سياسة الخصوصية (بالألمانية)</a>.</p>
       </div>
     </section>
 
     <footer>
-      أسئلة؟ 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
-      &nbsp;·&nbsp; <a href="impressum.html">Impressum (بالألمانية)</a>
+      لديك سؤال؟ 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
+      &nbsp;·&nbsp; <a href="impressum.html">بيانات الناشر (بالألمانية)</a>
       &nbsp;·&nbsp; <a href="datenschutz.html">سياسة الخصوصية (بالألمانية)</a>
     </footer>
   </div>