generated from knso/webklar-preview-template
JUSNandClaude Opus 5.5
6a7f35eb19
- marketing/praesentation-mbe/handzettel: A4 zum Dalassen (Testzugang 1 Monat, bis 100 Briefe), QR-Code wird nach Anlegen des Codes eingetragen - musterbrief-auslaenderbehoerde: erfundene Behoerde/Person, zum Ausdrucken und Live-Fotografieren (Frist + Termin + Telefon + Fachbegriffe) - Testphase im Preisblatt auf 1 Monat + Auswertungsgespraech - FEATURES.md: Handy<->PC, Einrichtungs-Codes, lokal testen Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
203 lines
11 KiB
HTML
203 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Handzettel für Beratungsstellen (DIN A4, zum Dalassen nach der Präsentation).
|
|
CODE unten eintragen, sobald der Einrichtungs-Code angelegt ist
|
|
(node tools/einrichtungs-code.js neu "MBE Donnersberg" MBE --briefe 100 --monate 1),
|
|
dann neu als PDF ausgeben:
|
|
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new \
|
|
--no-pdf-header-footer --print-to-pdf=handzettel.pdf "file://$PWD/handzettel.html"
|
|
-->
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>BehördenKlar für Beratungsstellen</title>
|
|
<script src="../../webseite/qrcode.js"></script>
|
|
<style>
|
|
@page { size: A4; margin: 0; }
|
|
:root {
|
|
--papier: #faf7f0; --tinte: #21211d; --grau: #6b675e;
|
|
--amtsblau: #1d4e89; --stempelrot: #b3372b; --marker: #ffe66b; --gruen: #2e7d4f;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
body { font-family: Georgia, 'Times New Roman', serif; color: var(--tinte); background: #fff; }
|
|
.seite {
|
|
width: 210mm; height: 297mm; overflow: hidden; position: relative;
|
|
padding: 11mm 14mm 0;
|
|
background: repeating-linear-gradient(0deg, transparent 0 6.5mm, rgba(33,33,29,0.03) 6.5mm 6.7mm), var(--papier);
|
|
font-size: 9.6pt; line-height: 1.42;
|
|
}
|
|
.mono { font-family: 'Courier New', ui-monospace, monospace; }
|
|
.briefkopf { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 2mm; border-bottom: 0.6mm solid var(--tinte); }
|
|
.absender { font-weight: 700; font-size: 12.5pt; }
|
|
.absender small { font-weight: 400; font-size: 8pt; opacity: .6; letter-spacing: .04em; }
|
|
.az { color: var(--grau); font-size: 8pt; }
|
|
.betreff { margin-top: 5mm; font-size: 8pt; color: var(--grau); text-transform: uppercase; letter-spacing: .14em; }
|
|
h1 { font-size: 23pt; line-height: 1.14; margin-top: 1.5mm; letter-spacing: -0.01em; }
|
|
.markiert { background: linear-gradient(104deg, transparent 2%, var(--marker) 4%, var(--marker) 96%, transparent 98%); padding: 0 1.5mm; }
|
|
.anrede { margin-top: 3mm; font-size: 10.5pt; max-width: 165mm; }
|
|
|
|
.schritte { display: flex; gap: 3mm; margin-top: 4.5mm; }
|
|
.schritt { flex: 1; border: 0.4mm solid var(--tinte); background: #fff; padding: 2.2mm 3mm; font-size: 9pt; line-height: 1.3; }
|
|
.schritt b { font-family: 'Courier New', monospace; color: var(--amtsblau); margin-right: 1mm; }
|
|
|
|
h2 { font-size: 8pt; text-transform: uppercase; letter-spacing: .14em; color: var(--grau); font-weight: 400;
|
|
margin: 5mm 0 2.5mm; display: flex; align-items: center; gap: 3mm; }
|
|
h2::after { content: ''; flex: 1; border-top: 0.25mm solid rgba(33,33,29,.25); }
|
|
|
|
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4mm 5mm; }
|
|
.punkt { display: flex; gap: 2.5mm; align-items: flex-start; }
|
|
.punkt .ik { font-size: 12pt; line-height: 1.2; width: 6mm; flex-shrink: 0; text-align: center; }
|
|
.punkt h3 { font-size: 10pt; line-height: 1.25; }
|
|
.punkt p { color: #3a3833; font-size: 8.8pt; line-height: 1.36; }
|
|
.punkt.neu h3::after { content: 'NEU'; font-family: 'Courier New', monospace; font-size: 6.5pt; letter-spacing: .1em;
|
|
color: var(--stempelrot); border: 0.3mm solid var(--stempelrot); padding: 0 1mm; margin-left: 1.5mm; vertical-align: 1px; }
|
|
|
|
.unten { display: grid; grid-template-columns: 1fr 72mm; gap: 5mm; margin-top: 5mm; }
|
|
.kasten { background: #fff; border: 0.5mm solid var(--tinte); padding: 3.5mm 4mm; position: relative; }
|
|
.kasten .label { position: absolute; top: -2.6mm; left: 3.5mm; font-family: 'Courier New', monospace; font-size: 7pt;
|
|
text-transform: uppercase; letter-spacing: .1em; background: var(--tinte); color: var(--papier); padding: .4mm 2mm; }
|
|
.kasten ul { list-style: none; font-size: 8.7pt; line-height: 1.38; }
|
|
.kasten li { padding-left: 4mm; position: relative; margin-bottom: 1mm; }
|
|
.kasten li::before { content: '✓'; position: absolute; left: 0; color: var(--gruen); font-weight: 700; }
|
|
.kasten li.ehrlich::before { content: '!'; color: var(--stempelrot); left: .8mm; }
|
|
|
|
.angebot { border: 0.7mm solid var(--tinte); box-shadow: 1.6mm 1.8mm 0 rgba(33,33,29,.9); background: #fff; padding: 4mm; text-align: center; }
|
|
.angebot .kopf { font-family: 'Courier New', monospace; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em; color: var(--grau); }
|
|
.angebot .gross { font-size: 13pt; font-weight: 700; line-height: 1.25; margin: 1.5mm 0; }
|
|
.angebot .gross .markiert { padding: 0 1mm; }
|
|
.angebot .klein { font-size: 8pt; color: var(--grau); line-height: 1.35; }
|
|
#qr { width: 34mm; height: 34mm; margin: 2.5mm auto 1.5mm; }
|
|
#qr svg { width: 100%; height: 100%; display: block; }
|
|
.code { font-family: 'Courier New', monospace; font-weight: 700; font-size: 13pt; letter-spacing: .08em; background: var(--marker); display: inline-block; padding: .3mm 2.5mm; }
|
|
.link { font-family: 'Courier New', monospace; font-size: 7.5pt; color: var(--amtsblau); word-break: break-all; margin-top: 1mm; }
|
|
|
|
.chatgpt { margin-top: 4mm; font-size: 8.7pt; line-height: 1.4; color: #3a3833; }
|
|
.chatgpt b { color: var(--tinte); }
|
|
|
|
.fuss { position: absolute; left: 14mm; right: 14mm; bottom: 8mm; border-top: 0.4mm solid var(--tinte); padding-top: 2mm;
|
|
display: flex; justify-content: space-between; align-items: flex-end; font-size: 8pt; line-height: 1.4; }
|
|
.fuss .wer b { font-size: 9.5pt; }
|
|
.stempel { display: inline-block; padding: 1mm 2.5mm; border: 0.5mm solid var(--stempelrot); color: var(--stempelrot);
|
|
font-family: 'Courier New', monospace; font-weight: 700; font-size: 7.5pt; letter-spacing: .1em;
|
|
text-transform: uppercase; transform: rotate(-4deg); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="seite">
|
|
|
|
<div class="briefkopf">
|
|
<span class="absender">📬 BehördenKlar <small>by Webklar</small></span>
|
|
<span class="az mono">Az: KLAR-BERATUNG/2026 · Anlage: 1 Testzugang</span>
|
|
</div>
|
|
|
|
<p class="betreff">Für Beratungsstellen · Migrationsberatung · Soziale Beratung</p>
|
|
<h1>Ihre Ratsuchenden verstehen den Brief, <span class="markiert">bevor sie zu Ihnen kommen.</span></h1>
|
|
<p class="anrede">
|
|
BehördenKlar erklärt schwierige Post in einfacher Sprache, auf Wunsch in 27 Sprachen:
|
|
von Ausländerbehörde, Jobcenter, Finanzamt, Krankenkasse, Vermieter oder Inkasso.
|
|
Ein Foto genügt. Ihre Beratungszeit geht in die Lösung, nicht ins Vorlesen.
|
|
</p>
|
|
|
|
<div class="schritte">
|
|
<div class="schritt"><b>1</b> Brief mit dem Handy fotografieren, im Browser, ohne App und ohne Konto.</div>
|
|
<div class="schritt"><b>2</b> Nach etwa einer Minute: Was will das Amt, was ist zu tun, bis wann?</div>
|
|
<div class="schritt"><b>3</b> Frist in den Kalender, Spickzettel fürs Telefonat, mit den wichtigen Fragen zu Ihnen.</div>
|
|
</div>
|
|
|
|
<h2>Was BehördenKlar kann</h2>
|
|
<div class="raster">
|
|
<div class="punkt"><span class="ik">🌐</span><div>
|
|
<h3>27 Sprachen, Fachbegriffe bleiben deutsch</h3>
|
|
<p>Arabisch, Farsi, Paschtu, Kurdisch, Tigrinya, Türkisch, Ukrainisch u. v. m. Das deutsche Wort bleibt stehen, damit man es im Brief wiederfindet.</p>
|
|
</div></div>
|
|
<div class="punkt"><span class="ik">🚦</span><div>
|
|
<h3>Frist erkannt, Dringlichkeit sichtbar</h3>
|
|
<p>Ampel: Rot bei 7 Tagen oder weniger. Mit konkreter To-do-Liste: welche Unterlagen, wohin, bis wann.</p>
|
|
</div></div>
|
|
<div class="punkt"><span class="ik">📅</span><div>
|
|
<h3>Frist und Termin in den Handy-Kalender</h3>
|
|
<p>Ein Tipp genügt, das Handy erinnert 3 Tage und 1 Tag vorher. Keine Frist geht zwischen zwei Beratungsterminen unter.</p>
|
|
</div></div>
|
|
<div class="punkt"><span class="ik">📞</span><div>
|
|
<h3>Anruf-Hilfe fürs Amt</h3>
|
|
<p>Telefonnummer und Aktenzeichen aus dem Brief, dazu Sätze zum Sagen: auf Deutsch, darunter die Bedeutung in der eigenen Sprache.</p>
|
|
</div></div>
|
|
<div class="punkt neu"><span class="ik">💻</span><div>
|
|
<h3>Beratung am PC, Foto mit dem Handy</h3>
|
|
<p>QR-Code am Bildschirm scannen, Brief fotografieren: Sie lesen die Erklärung auf Deutsch, Ihr Gegenüber gleichzeitig in seiner Sprache.</p>
|
|
</div></div>
|
|
<div class="punkt neu"><span class="ik">📱</span><div>
|
|
<h3>Ergebnis zum Mitnehmen</h3>
|
|
<p>Per QR-Code wandert die Erklärung vom Beratungs-PC aufs Handy der Ratsuchenden, mit Kalender und Anruf-Hilfe.</p>
|
|
</div></div>
|
|
<div class="punkt"><span class="ik">🔎</span><div>
|
|
<h3>Erfindet nichts</h3>
|
|
<p>Steht keine Telefonnummer oder kein Datum im Brief, sagt BehördenKlar das, statt zu raten.</p>
|
|
</div></div>
|
|
<div class="punkt"><span class="ik">⚖️</span><div>
|
|
<h3>Ergänzung, kein Ersatz</h3>
|
|
<p>Jede Erklärung verweist bei wichtigen Entscheidungen ausdrücklich auf eine Beratungsstelle.</p>
|
|
</div></div>
|
|
</div>
|
|
|
|
<div class="unten">
|
|
<div>
|
|
<div class="kasten">
|
|
<span class="label">Datenschutz, ehrlich erklärt</span>
|
|
<ul>
|
|
<li>Kein Konto, keine Anmeldung, keine Installation nötig.</li>
|
|
<li>Briefe werden bei uns nicht dauerhaft gespeichert.</li>
|
|
<li>Übergabe zwischen PC und Handy Ende-zu-Ende verschlüsselt: Der Schlüssel steckt nur im QR-Code, unser Server sieht nichts.</li>
|
|
<li>Keine Werbung, kein Verkauf von Daten.</li>
|
|
<li class="ehrlich">Die Erklärung erstellt der KI-Dienst Anthropic (USA). Er löscht Anfragen nach spätestens 30 Tagen und nutzt sie nicht zum Training. Das sagen wir offen, auch auf der Seite vor dem Hochladen.</li>
|
|
</ul>
|
|
</div>
|
|
<p class="chatgpt">
|
|
<b>„Ist das nicht einfach ChatGPT?“</b> Dort braucht man ein Konto und eine gut
|
|
formulierte Frage, und danach ist der Brief vergessen. Bei BehördenKlar macht man
|
|
ein Foto. Frist, Termin und Telefonnummer werden zu Kalender-Eintrag und
|
|
Anruf-Hilfe, und deutsche Fachbegriffe bleiben erkennbar.
|
|
</p>
|
|
<p class="chatgpt">
|
|
<b>Und nach dem Test?</b> Ihre Einrichtung bekommt ein festes Briefkontingent zu
|
|
einem Preis für Beratungsstellen. Die Ratsuchenden zahlen weiterhin nichts. Ohne
|
|
Abo-Falle: Nach vier Wochen schauen wir gemeinsam, was es gebracht hat.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="angebot">
|
|
<p class="kopf">Ihr Testzugang</p>
|
|
<p class="gross">1 Monat · bis 100 Briefe<br><span class="markiert">kostenlos</span></p>
|
|
<p class="klein">Ratsuchende zahlen nichts. Kein Vertrag, endet von selbst, verlängerbar.</p>
|
|
<div id="qr"></div>
|
|
<p class="klein">Code für Ihre Ratsuchenden:</p>
|
|
<p><span class="code" id="codeText"></span></p>
|
|
<p class="link" id="linkText"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fuss">
|
|
<div class="wer">
|
|
<b>Justin Klein</b> · Webklar GbR · Am Schwimmbad 10, 67722 Winnweiler<br>
|
|
Tel. 0170 4969375 · justin@webklar.com · <b>behoerdenklar.de</b>
|
|
</div>
|
|
<span class="stempel">Aus dem Donnersbergkreis</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Einrichtungs-Code hier eintragen, sobald er angelegt ist (z. B. 'MBE-K7QX').
|
|
var CODE = '';
|
|
var url = CODE ? 'https://behoerdenklar.de/demo?code=' + CODE : 'https://behoerdenklar.de/demo';
|
|
var qr = qrcode(0, 'M');
|
|
qr.addData(url);
|
|
qr.make();
|
|
document.getElementById('qr').innerHTML = qr.createSvgTag({ cellSize: 4, margin: 0, scalable: true });
|
|
var codeEl = document.getElementById('codeText');
|
|
codeEl.textContent = CODE || 'wird beim Termin eingetragen';
|
|
if (!CODE) { codeEl.style.fontSize = '8.5pt'; codeEl.style.letterSpacing = '0'; }
|
|
document.getElementById('linkText').textContent = url.replace('https://', '');
|
|
</script>
|
|
</body>
|
|
</html>
|