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>
This commit is contained in:
JUSNandClaude Opus 5 committed 2026-09-18 15:56:49 +02:00
1 parent 3cdf9d0bd1
commit 7d0692150c
33 files changed
+7216 -1001

No files matched your search

+107 -161
View File
@@ -3,40 +3,38 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BehördenKlar – Understand German official letters</title>
<meta name="description" content="BehördenKlar explains German official letters in simple words — in English. Take a photo, understand the letter, respond the right way. Coming soon for iPhone.">
<meta name="keywords" content="Amtsbrief, Behördenbrief, verständlich, einfache Sprache, Jobcenter, Ausländerbehörde, Warteliste">
<meta name="author" content="BehördenKlar">
<title>BehördenKlar – understand letters from German authorities</title>
<meta name="description" content="BehördenKlar explains German official letters in plain words — in English. Take a photo, understand it, respond correctly.">
<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/en">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@@ -45,11 +43,10 @@
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://behoerdenklar.de/en">
<meta property="og:title" content="Got a letter from a German authority?">
<meta property="og:description" content="Take a photo – BehördenKlar explains official German letters in plain language, in 9 languages. Join the waiting list for 5 free analyses.">
<meta property="og:description" content="Take a photo — BehördenKlar explains the letter in plain language, in English. Waiting list: 5 free analyses.">
<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,68 +149,58 @@
.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="Choose language">
🌐
<a href="index.html" lang="de">Deutsch</a>
<a href="tr.html" lang="tr">Türkçe</a>
<a href="ar.html" lang="ar">العربية</a>
<span class="aktiv">English</span>
<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">العربية</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" selected>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>A letter from a German office?<br><span class="markiert">Now easy to understand.</span></h1>
<p class="intro">
Take a photo of the letter. BehördenKlar explains it in simple German —
<strong>and in English</strong>. With all deadlines and a list of what
to do.
</p>
<h1>A letter from a German authority?<br><span class="markiert">Finally clear.</span></h1>
<p class="intro">Take a photo of the letter. BehördenKlar explains it in plain words — <strong>and in English</strong>. With every deadline and a to-do list.</p>
<div class="hero-fuss">
<a class="cta" href="#anmelden">Join the waiting list&nbsp;→</a>
<span class="stempel">Coming soon for iPhone</span>
<span class="stempel">Coming soon on iPhone</span>
</div>
</header>
<section>
<h2>§ 1 &nbsp;The transformation</h2>
<h2>§ 1 &nbsp;Before and after</h2>
<div class="verwandlung">
<div class="brief-karte amtsdeutsch">
<span class="karten-label">Before · Original letter (German)</span>
@@ -251,25 +213,18 @@
<p class="pfeil">— 📷 one photo later —</p>
<div class="brief-karte klartext">
<span class="karten-label">After · BehördenKlar in English</span>
<p>
If you do not go to the appointment without a good reason, you will
get 10% less money for one month. Go to the appointment — or cancel
it in time.
</p>
<p>If you miss the appointment without a good reason, you will get 10% less money for one month. Go — or cancel in good time.</p>
</div>
</div>
<p class="hinweis">
The app explains letters in simple German and translates into English,
Turkish, Arabic, Russian, Ukrainian, French, Farsi, Romanian and Polish.
</p>
<p class="hinweis">The app explains letters in plain German and translates them into more than 25 languages.</p>
</section>
<section>
<h2>§ 2 &nbsp;How it works</h2>
<div class="schritte">
<div class="schritt"><div><strong>Take a photo</strong> <span>of the letter — or upload a PDF.</span></div></div>
<div class="schritt"><div><strong>Understand it</strong> <span>Simple words, in your language. A traffic light shows how urgent it is.</span></div></div>
<div class="schritt"><div><strong>Respond the right way</strong> <span>To-do list, deadline reminder, and a ready-made reply.</span></div></div>
<div class="schritt"><div><strong>Take a photo</strong> <span>Photograph the letter — or upload a PDF.</span></div></div>
<div class="schritt"><div><strong>Understand</strong> <span>Plain words, in your language. A traffic light shows how urgent it is.</span></div></div>
<div class="schritt"><div><strong>Respond correctly</strong> <span>A to-do list, a deadline reminder and a ready-made draft reply.</span></div></div>
</div>
</section>
@@ -277,15 +232,9 @@
<h2>§ 3 &nbsp;Early access</h2>
<div class="antrag">
<p class="formular-kopf">Form F-01 · Waiting list</p>
<h3>Be one of the first</h3>
<p>
The app is coming soon for iPhone. Sign up now — we will send you
<strong>one</strong> email when it is ready. No spam.
</p>
<p class="bonus">
🎁 <strong>Your gift:</strong> analyse <strong>5 letters for free</strong>
instead of 3. You get the code by email.
</p>
<h3>Be among the first</h3>
<p>The app is coming soon for iPhone. Sign up — we will send you <strong>one</strong> email when it launches. No advertising.</p>
<p class="bonus">🎁 <strong>Your gift:</strong> analyse <strong>5 letters free</strong> instead of 3. You get the code by email.</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="Your email address" required autocomplete="email">
<input type="text" name="email_address_check" value="" style="position:absolute; left:-5000px;" tabindex="-1" autocomplete="off" aria-hidden="true">
@@ -293,16 +242,13 @@
<input type="hidden" name="html_type" value="simple">
<button class="cta wl-btn" type="submit">Join the waiting list →</button>
</form>
<p class="klein">
We only store your email address for this one message. You can
unsubscribe at any time. <a href="datenschutz.html">Privacy policy (in German)</a>.
</p>
<p class="klein">We store your address only for this single message. You can unsubscribe at any time. <a href="datenschutz.html">Privacy policy (German)</a>.</p>
</div>
</section>
<footer>
Questions? 📧 <a href="mailto:behoerdenbriefhelfer@gmail.com">behoerdenbriefhelfer@gmail.com</a>
&nbsp;·&nbsp; <a href="impressum.html">Impressum (German)</a>
&nbsp;·&nbsp; <a href="impressum.html">Legal notice (German)</a>
&nbsp;·&nbsp; <a href="datenschutz.html">Privacy policy (German)</a>
</footer>
</div>