Lohnzettel-Werkstatt

Lohn- und Gehaltszettel für den Mathe-Unterricht (Klasse 8–10): angelehnt an eine übliche Entgeltabrechnung, aber stark vereinfacht und nachrechenbar. Statische Web-App ohne Build, offlinefähig (PWA), Speicher lokal im Browser (IndexedDB), Austausch per JSON-Sicherung. Alle Firmen und Personen sind erfunden – kein echter Entgeltnachweis.

Stand

M0 bis M6 fertig (Rechenkern, Zettel-Editor, Bibliothek, Sicherung, Arbeits- und Lösungsblatt mit PDF, Zufallsfälle, Rückwärtsaufgaben, Vorführ- und Erklärmodus, Jahresübersicht, Härtung). Der Plan mit allen Meilensteinen steht in C:\Users\luk-e\.claude\plans\plane-eine-interaktive-html-anwendung-frolicking-sloth.md.

Meilenstein	Inhalt	Stand
M0	Gerüst, PWA, Rechenkern mit Tests	fertig
M1	Zettel-Editor, Vorschau, Bibliothek, Sicherung	fertig
M2	Lohnsteuertabelle als Anzeige, weitere Steuermodi verfeinern	teilweise (Posten, Zuschläge, Sonderzahlung, drei Steuermodi, Überschreiben sind schon drin; Tabelle steht im Beiblatt)
M3	Arbeitsblatt/Lösungsblatt, Teilaufgaben, PDF/Teilen, Beiblatt Merkzettel	fertig
M4	Zufallsfälle, Rückwärtsaufgaben	fertig
M5	Vorführmodus, Erklärmodus (Marken 1–10)	fertig
M6	Jahresübersicht, Härtung, Barrierefreiheit, Browser-Tests	fertig

Benutzung

• Neuer Zettel → leer oder aus einem von neun Szenarien (Verkäuferin, Azubi, Minijob, Handwerker mit Überstunden, Pflegekraft mit Zuschlägen, Steuerklasse III und V, Weihnachtsgeld, über der Beitragsgrenze).
• Aufbau des Editors: Oben stehen Zurück, Titel und die Hauptknöpfe (Vorführen, PDF / Drucken, „⋯“ mit Duplizieren, Felder zurücksetzen, Drucken). Links steht die Form: Optik, Sehr einfach, Erklärmodus, Blattart, Rechenzeilen, Beiblatt. In der Mitte ist die ganze A4-Seite sichtbar, darüber die Ansichten (Zettel, Arbeitsblatt, Lösungsblatt, Jahr). Rechts steht der Inhalt in den Reitern Zettel, Aufgabe und Jahr, mehrspaltig; Posten sind eine Tabelle mit laufender Summe, „▾“ klappt Lohnart, Steuer und SV auf. Auf Full HD passt das ohne Scrollen, auf kleineren Notebooks scrollt der rechte Bereich. Unter 1100 px Breite steht alles untereinander.
• Kassenzettel (Übersicht, Knopf „Kassenzettel“): eigener Editor mit gleichem Aufbau. Steuersätze A = 19 %, B = 7 %. Variante Einfach: Laden, Artikel, Summe, MwSt.-Tabelle. Variante Standard: zusätzlich Anschrift, Datum, Bon-Nr., Menge × Einzelpreis, Rabatt, Pfand, gegeben und Rückgeld. Technische Angaben (TSE, Seriennummern, Prüfwerte) fehlen immer, der Bon ist als Übungsbeleg gekennzeichnet. Rechenweg je Blatt: Netto gegeben (MwSt. = Prozent vom Netto) oder Brutto gegeben (Netto = Brutto : 1,19 bzw. 1,07). Arbeits- und Lösungsblatt mit Antippen = gesucht, Teilaufgaben in Operator-Form, Beiblatt „So liest du einen Kassenzettel“, PDF. Zufallsbons in drei Stufen für Supermarkt, Drogerie, Bäckerei/Imbiss und Baumarkt/Schreibwaren, mit Gruppen A/B und „Neu würfeln“. Die MwSt. wird je Satz aus der Summe gerechnet; Rabatt gilt für Artikel, nicht für Pfand.
• Beiblätter sind bewusst ruhig gesetzt: eine Akzentfarbe (dunkles Blau) für Überschriften mit Unterstreichung und Formeln, Fett nur für Fachwörter und Ergebnisse, Tabellen nur mit Haarlinien. Jede Beispielrechnung steht in einer eigenen Zeile (.rechnung, bricht nie um). Aufgabentexte brauchen höchstens zwei Zeilen und Aufgaben werden nie über Seiten oder Spalten getrennt (Browser-Test „Nichts bricht um“).
• PDF: Seiten entstehen als echte PDF-Objekte (Text, Linien, Flächen in Helvetica/Courier), sind gestochen scharf und durchsuchbar (src/export-vektor.js). Nur wenn das scheitert, wird eine Seite als Bild eingefügt.
• Auf einen Wert im Zettel tippen: zeigt den Rechenweg und erlaubt, den Wert von Hand zu ändern (gelb markiert). Abhängige Felder rechnen mit dem neuen Wert weiter; so entstehen auch Zettel mit Fehlern.
• Lohnsteuer: Standard ist ein fester Steuersatz. Im Unterricht wird immer nur ein Monat betrachtet, das Gehalt liegt in der Regel über dem Steuerfreibetrag. Lohnsteuer = Brutto · Steuersatz; Soli entfällt (im Monat meist 0 €). Der Satz kommt aus der kleinen Steuersatz-Tabelle: Brutto-Bänder zu 250 € (1.500 bis unter 5.500 €) × Steuerklasse I bis VI, Satz = Lohnsteuer : Brutto nach dem amtlichen Programmablaufplan 2026 (BMF, Anlage 1 vom 12.11.2025), gerundet auf 0,1 %. Im Formular lässt sich nur ein Wert aus der Spalte der Steuerklasse wählen (kein 9 %, wenn die Tabelle nur 8,1 % und 9,3 % kennt); „Satz aus Tabelle übernehmen“ holt den Wert des Bands für das Brutto. Wahlweise: Schüler lesen den Steuersatz in der Tabelle auf dem Beiblatt ab (dann folgt der Satz dem Band und steht nicht im Aufgabentext). Weiterhin wählbar: Lohnsteuertabelle (Stufen von 50 €, ebenfalls nach dem Programmablaufplan) und rechnerisch nach Steuertarif (§ 32a EStG, vereinfacht). Bestehende Zettel behalten ihren gespeicherten Modus; ein gespeicherter Satz rastet auf den nächsten Tabellenwert ein. tests/pap.test.mjs prüft die Rechnung gegen die Prüftabelle des BMF (258 Werte).
• Sehr einfach (Schritt „Aussehen“, Bereich „Aussehen und weitere Blöcke“): Es gibt nur ein Brutto. Beitragsbemessungsgrenzen werden ignoriert, Steuer-Brutto ist das Gesamt-Brutto, es entfallen KV-/RV-/AV-/PV-Brutto, die Spalten St und SV und der Soli; alle Bezüge zählen voll (keine steuerfreien Anteile). Aufgaben, Rechenwege und Legende passen sich an („Rechne 8,75 % vom Brutto“). Bei den Zufallsfällen und Mischblättern der Stufe leicht ist „Sehr einfach“ automatisch an.
• Weitere Blöcke (Standard aus): Verdienstbescheinigung, Netto-Abzüge, Arbeitgeberseite, Fehltage/Hinweise, Anschriften/Bank. Optik: modern oder originalgetreu (Matrixdruck-Stil).
• Ansichten über dem Zettel: Zettel (alles sichtbar, Werte antippen zum Ändern), Arbeitsblatt (gesuchte Werte leer) und Lösungsblatt (gesuchte Werte grün, mit Rechenweg). Dort schaltet ein Tipp auf einen Wert „gesucht“ um. Im Schritt Aufgabe, Bereich „Arbeitsblatt“: Blattart (Aufgabenblatt mit Zettel oder nur Zettel), Überschrift, Rechenzeilen, Beiblatt „Abzüge im Überblick“ (Sätze der Person, Beitragsbemessungsgrenzen, Lohnsteuertabelle als Ausschnitt), gesuchte Werte, einleitender Text und Text jeder Teilaufgabe (leer = automatisch).
• PDF erstellen …: Arbeitsblatt, Lösungsblatt oder beides in einer Datei (A4 hoch). Danach Teilen (am iPad, z. B. nach GoodNotes), Herunterladen oder Öffnen. Rot umrandete Seiten in der Vorschau sind zu voll (Zettel müsste unter 55 % schrumpfen).
• Drucken gibt die gerade gezeigte Ansicht aus (Zettel oder alle Seiten des Arbeits-/Lösungsblatts).
• Sicherung (Übersicht): alle Zettel als JSON-Datei erstellen, auf anderem Gerät einlesen (neuere Fassung gewinnt).
• Zufallsfall (Übersicht): drei Stufen – leicht (runde Zahlen, fester Steuersatz, „Sehr einfach“), mittel (echte Sätze, fester Steuersatz), schwer (Zuschläge, Sonderzahlung, alle Steuerklassen). Darunter einzeln schaltbar: runde Zahlen, Zuschläge, Sonderzahlung, Kirchensteuer, Kinder, Verdienst über der Beitragsgrenze, Minijob, Steuerklassen, Lohnsteuer-Art, Aufgabe (alles, Abzüge und Netto, Sozialversicherung, Steuern, Brutto). Gleicher Startwert = gleicher Fall. Bei mehreren Gruppen (A, B, …) bleiben Beruf, Firma, Posten und Steuerklasse gleich, nur die Zahlen und Namen ändern sich – für Klassenarbeiten. Im Editor erzeugt Neu würfeln einen neuen Fall mit denselben Einstellungen (mit Rückgängig).
• Rückwärtsaufgaben (Formular „Arbeitsblatt“ → Aufgabenrichtung): Beitrag und Satz → Brutto (alle Brutto-Werte sind Lücken), Betrag und Stunden → Stundenlohn (oder Stunden, Zuschlagssatz; Menge, Faktor und Prozentsatz sind als Lücken wählbar), Netto und Abzugsquote → Brutto und Wunsch-Netto → nötiges Brutto durch Probieren (diese beiden ohne Zettel, mit Versuchstabelle; das Lösungsblatt zeigt die Versuche).
• Vorführen (Knopf im Editor, #/vorfuehren/<id>): der Zettel groß für Beamer oder iPad. Gesuchte Werte sind blau verdeckt (Verdeckt: gesuchte Werte, alle Ergebnisse oder nichts) und werden durch Tippen aufgedeckt. Ein Tipp auf einen sichtbaren Wert zeigt den Rechenweg in drei Schritten (Zutaten gelb markiert, Rechnung, Ergebnis; „Weiter“ oder Pfeiltasten). Oben Zoom auf Kopf, Bezüge, Steuer und SV oder Ergebnis, Vollbild und Erklärmodus.
• Einfache Sprache: Alle Texte für Schüler (Aufgaben, Einleitungen, Legende, Beiblatt, Rückwärts- und Jahresaufgaben) sind in kurzen Sätzen und mit bekannten Wörtern geschrieben, für leistungsschwache 8. Klassen; ein Test prüft die Satzlänge (höchstens 18 Wörter) und, bei „Sehr einfach“, dass keine schweren Wörter wie „Beitragsbemessungsgrenze“ oder „Freigrenze“ vorkommen.
• Beiblatt „Was wird abgezogen?“: erklärt in vier Schritten Brutto und Netto, die Sozialabgaben (mit „Wofür?“ und Rechenbeispiel aus den echten Sätzen), die Steuern (Lohnsteuer mit Beispiel und der kleinen Satz-Tabelle, Kirchensteuer, Steuerklassen) und „So kommt das Netto heraus“. Bei „Sehr einfach“ ohne Obergrenze und Soli.
• Aufgabentexte in Operator-Form: Alle automatischen Teilaufgaben beginnen mit einem Operator („Berechne …“, „Ermittle …“, „Bestimme …“, „Lies … ab“, „Erkläre …“, „Vergleiche …“), nicht mit einer Frage. Bei mehreren Teilaufgaben wechseln die Verben. Jeder Text lässt sich im Formular überschreiben (leer = automatisch).
• Mischblatt (Übersicht → Mischblatt, #/misch/<id>): ein Aufgabenblatt aus mehreren Aufgaben, jede mit eigenem Fall und eigener Art, Vorwärts und Rückwärts gemischt. Arten: Bezüge berechnen, Sozialversicherung berechnen, Steuern ermitteln (mit Lohnsteuertabelle), Netto berechnen, Rückwärts: Beitrag und Satz → Brutto, Rückwärts: Stundenlohn, Stunden oder Zuschlag, Rückwärts: Netto und Abzugsquote → Brutto, Rückwärts: Wunsch-Netto → Brutto (Probieren). Jede Aufgabe zeigt nur den passenden Ausschnitt des Zettels (z. B. nur „Steuer und Sozialversicherung“), die Aufgaben werden automatisch auf A4-Seiten verteilt. Im Erzeugen-Dialog: Stufe, Anzahl (2–8), gewählte Arten (nichts gewählt = zufällig gemischt ohne Wiederholung), Gruppen A bis D (gleiche Arten, Berufe und Steuerklassen, andere Zahlen), Startwert. Im Editor je Aufgabe: Art ändern (würfelt einen neuen Fall), neu würfeln, nach oben/unten, entfernen, Zettel aus der Übersicht als Kopie einsetzen, eigener einleitender Text; für das Blatt: Titel, Einleitung, Rechenzeilen, Beiblatt (allgemeine Sätze ohne persönliche Zu- und Abschläge), „Alle neu würfeln“, Duplizieren, Drucken und PDF (Arbeits- und Lösungsblatt). Mischblätter sind Teil der Sicherung.
• Jahresübersicht (Ansichten „Jahr: Aufgabe“ und „Jahr: Lösung“, Formular „Jahresübersicht“): zwölf Monate mit Brutto, Lohnsteuer, Soli, Kirchensteuer, den vier Beiträgen und Netto, dazu Summe, Durchschnitt je Monat und Anteil am Brutto. Welche Teile im Aufgabenblatt Lücken sind (Summen, Durchschnitt, Anteile, Netto jedes Monats), stellst du ein; das Lösungsblatt zeigt sie grün. Dazu ein Balkendiagramm (Netto und Abzüge je Monat), die Teilaufgaben mit Lösung und wahlweise ein Vergleich: alle Steuerklassen oder ein Ehepaar in III/V, IV/IV und V/III (Gehalt der Partnerin oder des Partners einstellbar). Eine Sonderzahlung gibt es nur in dem Monat, der im Zettel steht; alle anderen Monate haben das gleiche laufende Gehalt. Im PDF-Dialog: „Jahresübersicht (Aufgabe und Lösung)“.
• Erklärmodus (Formular „Aussehen“, auch im Vorführmodus): nummerierte Marken (Grundzettel 1–10, mit zugeschalteten Blöcken mehr) und eine Legende in Schülersprache; wirkt auch im Arbeitsblatt, Lösungsblatt und PDF.

Rechenkern (src/calc/)

• rates.js: Parameter je Jahr (derzeit 2026), geprüft gegen § 32a EStG (gesetze-im-internet.de) und die Sozialversicherungs-Rechengrößen 2026. Ein weiteres Jahr braucht nur einen weiteren Eintrag (Steuerformel-Koeffizienten, Beitragssätze, Grenzen).
• sv.js: KV/RV/AV/PV mit Beitragsbemessungsgrenzen, Pflegeversicherung nach Kinderzahl, Sonderzahlung gegen die anteilige Jahresgrenze.
• tax.js: Einkommensteuertarif, Splitting (III), Klasse V/VI als Näherung, Soli (Freigrenze und Milderungszone), Kirchensteuer, kleine Lohnsteuertabelle, Sonderzahlung über die Jahresdifferenz.
• payroll.js: setzt alles zusammen, liefert zu jedem Feld einen Rechenweg-Text.

Bewusste Vereinfachungen: fester Steuersatz statt Tarif (Standard); „Sehr einfach“ ohne Obergrenzen, steuerfreie Anteile und Soli; Steuersatz- und Lohnsteuertabelle für gesetzlich Versicherte ohne Kinderfreibeträge und Sonderfälle (Programmablaufplan); der Modus „Formel“ mit vereinfachter Vorsorgepauschale und Klasse V/VI als Näherung; Soli/Kirchensteuer in der Tabellenvariante ohne Kinderfreibetrag; Minijob ohne Arbeitnehmerabzüge; kein Übergangsbereich; die Jahressummen unterstellen gleiches laufendes Brutto in allen Monaten. Die Tabellen entsprechen der amtlichen Rechnung für die Mitte der Stufe; im Modus „Formel“ weichen die Ergebnisse um wenige Euro ab.

Entwickeln

npm install                    # einmal: installiert Playwright für die Browser-Tests
npm run test:e2e               # Browser-Tests mit dem installierten Edge (PW_CHANNEL=chrome für Chrome)
npm test                       # Unit-Tests (Rechenkern, Modell, Sicherung, Precache, Kontrast)
node tools/precache.mjs        # nach neuen/geänderten Dateien: sw.js aktualisieren (sonst schlägt npm test fehl)
node tools/serve.mjs 4180      # lokaler Server, http://localhost:4180/

Auf localhost ist der Service Worker aus (?sw=1 schaltet ihn ein). Neue Dateien in src/ oder assets/ → node tools/precache.mjs.

Härtung und Barrierefreiheit (M6)

• Speichern: Änderungen werden nach 0,4 s gespeichert und sofort, wenn die App in den Hintergrund geht oder geschlossen wird (iPad: App-Wechsel). Ist IndexedDB nicht nutzbar (z. B. privates Fenster), arbeitet die App im Arbeitsspeicher und zeigt eine Warnung.
• Fehler: Unerwartete Fehler erscheinen als kurze Meldung (Einzelheiten in der Konsole); eine kaputte Sicherungsdatei, ein fehlgeschlagenes PDF und ein volles Blatt (rot umrandet) haben eigene verständliche Meldungen.
• Bedienung: Registerkarten mit Pfeiltasten, Anfang und Ende (role="tablist"), sichtbarer Fokus überall, Touch-Ziele mindestens 40–44 px, prefers-reduced-motion schaltet Bewegung ab, Diagramm mit Bildbeschreibung, Dialoge mit Überschrift, alle Formularfelder mit Beschriftung.
• Farben: Alle Text-/Hintergrund-Paare erreichen mindestens 4,5 : 1 (WCAG AA); tests/kontrast.test.mjs rechnet das aus den CSS-Werten nach.
• Tests: 108 Unit-Tests und 13 Browser-Tests (Anlegen, Ändern, Neuladen, Arbeits-/Lösungsblatt, PDF-Download, Zufall, Rückwärts, Vorführen, Jahr, Mischblatt mit Seitenaufbau, PDF und Sicherung, Tastatur, schmaler Bildschirm; jeweils ohne Konsolenfehler und ohne fremde Netzanfragen).

iPad-Checkliste (fester Steuersatz, Sehr einfach)

1. Neuer Zettel: Lohnsteuer steht auf „Fester Steuersatz“, der Satz ist eine Auswahl aus Tabellenwerten, darunter steht „Laut Tabelle …“. Steuerklasse ändern: der Satz folgt der Spalte.
2. „Sehr einfach“ einschalten: Steuer-Brutto, KV-/RV-/AV-/PV-Brutto, St/SV und Soli verschwinden, die Beiträge rechnen vom Brutto.
3. Arbeitsblatt → zweite Seite „Was wird abgezogen?“: Texte gut lesbar, kleine Tabelle mit den Steuersätzen, alles auf einer Seite; PDF teilen.

iPad-Checkliste (Mischblatt)

1. Übersicht → Mischblatt: Arten wählen oder zufällig mischen, 2 Gruppen, Erzeugen. Seiten ansehen: Aufgaben sind lesbar, nichts ist abgeschnitten (rot umrandete Seiten sind zu voll).
2. Eine Aufgabe neu würfeln, die Art ändern, einen eigenen Zettel einsetzen; Rückgängig im Hinweis unten.
3. PDF erstellen … → Teilen nach GoodNotes; die Lösung liegt als zweiter Teil in derselben Datei.

iPad-Checkliste (M6)

1. Jahresübersicht: in den Ansichten „Jahr: Aufgabe“ und „Jahr: Lösung“ blättern, Vergleich „Ehepaar“ einschalten, PDF „Jahresübersicht“ teilen.
2. Zwischen Safari und einer anderen App wechseln, zurückkehren: die letzte Änderung ist noch da.
3. Hochkant und quer drehen: Editor, Vorführmodus und Jahresübersicht laufen nicht seitlich aus dem Bild.

iPad-Checkliste (M4 und M5)

1. Übersicht → Zufallsfall: Stufe wählen, 2 Gruppen, Erzeugen. Beide Zettel liegen in der Übersicht, Gruppe A und B haben denselben Aufbau.
2. Editor → Aufgabenrichtung: eine Rückwärtsaufgabe wählen, Arbeitsblatt und Lösungsblatt ansehen, PDF erstellen und teilen.
3. Editor → Vorführen: Werte antippen (aufdecken, Rechenweg), Zoom-Knöpfe, Erklärmodus, Vollbild (am iPad nur in neueren Safari-Versionen möglich).

iPad-Checkliste (M1)

1. Seite im Safari öffnen, „Zum Home-Bildschirm“ → startet ohne Adressleiste.
2. Neuer Zettel aus Szenario; Felder bedienbar, Tastatur zeigt Ziffern (Dezimalkomma).
3. Wert im Zettel antippen → Dialog mit Rechenweg; ändern, „Wieder automatisch“.
4. Flugmodus an, App neu öffnen: läuft offline.
5. Sicherung erstellen → Teilen-Menü → in Dateien/OneDrive ablegen; Datei wieder einlesen.