hernstev97 · Oct 22, 2026 · Oct 22, 2026 · Oct 22, 2026
diff --git a/HANDBUCH.md b/HANDBUCH.md
@@ -71,7 +71,7 @@ Eine vollständige, minimale Vorlage mit jeder Übungsart liegt in [`tooling/fix
 
 1. **Lehrplan entwerfen.** Schreibe zuerst die Liste der Module auf: 10–16 Module in 2–4 Tracks, vom Einstieg bis zum Profi-Niveau. Frage dich bei jedem Modul: *Was kann ich danach, was ich vorher nicht konnte?* Und: *Würde ein Arbeitgeber das erwarten?*
 2. **Ordner anlegen:** `content/<bereich>/` mit `area.yaml` (Abschnitt 4). Die Ordner-ID ist kurz, klein und kebab-case, zum Beispiel `go`, `typescript`, `devops`.
-3. **Farbe wählen.** Eine kräftige Farbe, auf der schwarzer Text gut lesbar ist (Kontrast ≥ 4,5 : 1 zu `#0B0B0B`). Vorhandene Farben nicht wiederholen: `#A98BFF` Kotlin, `#FF6A3D` Rust, `#FFD400` Linux, `#4D8BFF` Python, `#2BD97C` Automation, `#FF5CA8` Git, `#22D3EE` Data Analysis, `#C6F432` Testing, `#FF9F1C` PostgreSQL, `#F4A3FF` Erzählhandwerk, `#FF4D6D` Combat Design. Gute freie Kandidaten: `#FFC6A8` (Apricot), `#B5E3FF` (Eisblau).
+3. **Farbe wählen.** Eine kräftige Farbe, auf der schwarzer Text gut lesbar ist (Kontrast ≥ 4,5 : 1 zu `#0B0B0B`). Vorhandene Farben nicht wiederholen: `#A98BFF` Kotlin, `#FF6A3D` Rust, `#FFD400` Linux, `#4D8BFF` Python, `#2BD97C` Automation, `#FF5CA8` Git, `#22D3EE` Data Analysis, `#C6F432` Testing, `#FF9F1C` PostgreSQL, `#F4A3FF` Erzählhandwerk, `#FF4D6D` Combat Design, `#FFC6A8` Pixelart. Guter freier Kandidat: `#B5E3FF` (Eisblau).
 4. **Module schreiben** (Abschnitte 5–7). Ein Modul pro Datei, Dateiname = Modul-ID.
 5. **Karten, Projekte, Glossar, Spickzettel, Berufsseite** ergänzen (Abschnitt 8).
 6. **Prüfen:** `pnpm content:check <bereich>`, dann `pnpm verify <bereich>`, dann `pnpm test` und `pnpm build`.
@@ -152,6 +152,7 @@ Manche Bereiche lehren Handwerk ohne Programmcode, zum Beispiel Erzählhandwerk.
 - **Übungen** nutzen `lang: prose` (Abschnitt 7). `output` passt nur, wo man wirklich etwas vorhersagt, etwa den Zustand einer Verzweigung; die Warnung „keine Vorhersage-Übung“ ist dort bewusst akzeptiert. `bug` heißt „die gemeinte Zeile finden“, meist ohne `fix`.
 - **Kreative Aufgaben** lassen die Lösung offen. Es gibt keine Mustertexte: `practice` mit `lang: prose` hat keine `solution`, die Checkliste enthält überprüfbare Kriterien, keine Geschmacksurteile. Analysen veröffentlichter Texte dürfen eine Musterantwort haben.
 - **Callouts** `INTERVIEW` und `PRAXIS` nur, wenn sie wirklich passen; `PRAXIS` zeigt dann, wie Studios oder Autoren arbeiten.
+- **Zeichnen und Pixelart** zeigen Pixel als Textraster in `text`-Blöcken, eine Zeile pro Pixelreihe: `#` dunkel, `+` Mittelton, `-` hell, `.` leer, höchstens 16 Pixel breit. Ein `bug` lässt dann die fehlerhafte Reihe anklicken. Zeichenaufgaben laufen auf Papier, Karopapier oder im Editor und werden über die Checkliste selbst geprüft. Die Schaubilder des Bereichs `pixelart` erzeugt `node tooling/pixelart-figures.ts` aus Code; sie zeigen Prinzipien, keine fertigen Figuren. Bilder Dritter werden nur verlinkt.
 
 ## 6. Lektionen schreiben
 
@@ -240,6 +241,20 @@ lesson: |
 
 Tabellen (GFM) sind erlaubt und im Spickzettel ausdrücklich erwünscht.
 
+### Bilder
+
+Screenshots und Abbildungen gehören dorthin, wo Text nicht reicht: ein Editor-Dock, das man wiedererkennen soll, ein Spielbild mit einem Darstellungsfehler, den man diagnostiziert. Sie gehen in Lektionen und in allen Markdown-Feldern der Übungen.
+
+```markdown
+![Inspektor eines Sprite2D mit Filter Linear: die Figur ist verwaschen](/media/godot/pixelraster/filter-linear@2x.png "Godot 4.7.2, Filter Linear, vierfach skaliert")
+```
+
+- **Ablage:** nur PNG unter `public/media/<bereich>/<modul>/`. Der Service Worker legt alle PNG-Dateien aus `public/` beim Installieren ab, Bilder gehen also offline. Halte sie klein (Pixelart und Editor-Ausschnitte als PNG mit wenigen Farben, meist unter 100 KB).
+- **Alt-Text ist Pflicht** und beschreibt, was zu sehen ist, auch das, worauf es ankommt. Der Titel in Anführungszeichen wird zur Bildunterschrift; nenne dort Quelle und Version.
+- **Größe:** Der Build liest Breite und Höhe aus der Datei, damit die Seite beim Laden nicht springt. Eine Datei `…@2x.png` hat doppelt so viele Pixel, wie sie anzeigt, und bleibt auf hochauflösenden Displays scharf. Ein Bild ist nie breiter als die Textspalte; ein Tipp öffnet es in voller Größe zum Zoomen. Gestalte Bilder für Unterwegs-Module deshalb so, dass sie bei 330 px Breite lesbar bleiben: lieber einen Ausschnitt als den ganzen Bildschirm.
+- **Prüfung:** `content:check` meldet fehlende Dateien und fehlende Alt-Texte als Fehler. Bilder von außerhalb (`https://…`) sind nicht erlaubt: Sie gingen offline nicht und könnten verschwinden.
+- Ein Bild allein in einem Absatz wird eine Abbildung mit Unterschrift; mitten im Text erscheint es als Block ohne Unterschrift.
+
 ## 7. Übungen
 
 Gemeinsame Felder aller Übungen:

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # learn.kiumu.app
 
-Private Lernplattform für Kotlin & Android, Rust, Linux, Python, Automation mit Python, Git, Data Analysis mit Excel, SQL und Python, Testing & Softwarequalität, SQL & PostgreSQL für Anwendungsentwickler sowie Combat Design & Game Feel mit Godot 4. Live: [learn.kiumu.app](https://learn.kiumu.app) · Öffentliches Repository: [hernstev97/learning-platform](https://github.com/hernstev97/learning-platform)
+Private Lernplattform für Kotlin & Android, Rust, Linux, Python, Automation mit Python, Git, Data Analysis mit Excel, SQL und Python, Testing & Softwarequalität, SQL & PostgreSQL für Anwendungsentwickler, Erzählhandwerk & interaktive Entscheidungen, Combat Design & Game Feel mit Godot 4 sowie Zeichnen, Character Design & Pixelart. Live: [learn.kiumu.app](https://learn.kiumu.app) · Öffentliches Repository: [hernstev97/learning-platform](https://github.com/hernstev97/learning-platform)
 
 Die Plattform ist kein Nachschlagewerk. Jedes Modul besteht aus einer Lektion, die ein Denkmodell aufbaut und auf die offizielle Dokumentation verweist, und aus 10–14 Übungen in fester Reihenfolge: verstehen → vorhersagen → schreiben → Fehler finden → erklären → anwenden. Jeder Bereich hat Interview-Karteikarten mit Wiederholung, Projekte und ein Abschlussprojekt, das wie eine Take-Home-Aufgabe im Bewerbungsprozess geschnitten ist.
 

diff --git a/content/pixelart/area.yaml b/content/pixelart/area.yaml
@@ -0,0 +1,35 @@
+id: pixelart
+title: Zeichnen, Character Design & Pixelart
+short: Pixelart
+tagline: Sehen lernen, Formen vereinfachen und lesbare Figuren und Tiles Pixel für Pixel bauen.
+description: >
+  Beobachten und Messen, einfache Körper und Draufsicht, Proportionen, Licht und Tonwerte, Farbe und
+  begrenzte Paletten, Linien und Cluster, Schattieren und Textur, Silhouette und Körpersprache, Sprites in
+  mehreren Ansichten, Maßstab und Tiles. Du brauchst keine Zeichenerfahrung und kein Grafiktablett: Papier,
+  Handy und Maus reichen, für Pixelarbeit nennt der Kurs freie Programme neben Aseprite. Jede Figur, jedes
+  Tile und jede Palette entwirfst du selbst; kreative Aufgaben prüfst du mit offenen Kriterien, nicht mit
+  einer Musterlösung. Module mit der Marke „Unterwegs“ gehen am Handy und mit Stift und Karopapier, „Am PC“
+  braucht einen Pixel-Editor; lesen kannst du auch diese Lektionen unterwegs.
+color: "#FFC6A8"
+order: 13
+outcomes:
+  - "Du **beobachtest statt zu erinnern**: Du misst Proportionen, siehst Negativraum und arbeitest mit Referenzen, ohne sie abzupausen."
+  - Du baust Gegenstände und Figuren aus **einfachen Körpern** auf und zeichnest sie in der Draufsicht, die Top-down-Spiele verwenden.
+  - Du planst **Licht, Tonwerte und Farbe** bewusst, gruppierst Werte und baust begrenzte Paletten mit Farbrampen.
+  - Du setzt Pixel mit Absicht – **saubere Linien, Cluster, Kantenglättung, Dithering** – und erkennst typische Fehler wie Doppelpixel, Banding und Kissenschattierung.
+  - Du entwirfst Figuren mit **lesbarer Silhouette, Formensprache und Körpersprache** und übersetzt Skizzen in kleine Sprites.
+  - Du hältst **Maßstab und Pixeldichte** über Figuren, große Kreaturen und Umgebung durch und zeichnest dieselbe Figur in mehreren Ansichten.
+  - Du prüfst eigene Arbeit mit **Graustufen-, Silhouetten- und 1×-Test**, holst Rückmeldung ein und dokumentierst deine Gestaltungsentscheidungen.
+tracks:
+  - title: Sehen und Formen
+    description: Beobachten und Messen, einfache Körper und Draufsicht, Figur und Proportion, Licht und Tonwerte. Alles mit Stift und Papier oder am Handy.
+    modules: [beobachten, grundkoerper-raum, figur-proportion, licht-werte]
+  - title: Pixel für Pixel
+    description: Einen Pixel-Editor einrichten, Linien und Cluster setzen, Farben in Rampen und Paletten ordnen, schattieren und Texturen bauen.
+    modules: [editor-einrichten, linien-cluster, farbe-paletten, schattieren-textur]
+  - title: Figuren entwerfen
+    description: Silhouette und Formensprache, Pose und Ausdruck im Standbild, vom Entwurf zum Sprite, mehrere Ansichten und große Kreaturen im selben Maßstab.
+    modules: [silhouette-formsprache, pose-ausdruck, sprite-entwerfen, ansichten-massstab]
+  - title: Umgebung und Asset-Set
+    description: Tiles und Umgebung, die Figuren tragen statt sie zu verschlucken, dann prüfen, überarbeiten und Entscheidungen festhalten.
+    modules: [umgebung-tiles, lesbarkeit-pruefen]
diff --git a/content/pixelart/career.md b/content/pixelart/career.md
@@ -0,0 +1,93 @@
+## Pixelart im Beruf
+
+Pixelart ist in der Spielebranche ein eigenes Handwerk: Figuren, Gegner, Tiles, Requisiten und Oberflächen in kleiner Auflösung, die zusammenpassen und in Bewegung lesbar bleiben. In größeren Teams teilen sich Character, Environment und Animation die Arbeit, in kleinen Studios und bei Solo-Projekten macht es eine Person.
+
+Für dich ist der Anlass dein eigenes Spiel. Diese Seite zeigt trotzdem, wie Studios Pixel Artists auswählen. Wer weiß, woran ein Art Lead eine Arbeit misst, weiß auch, worauf er bei der eigenen achten sollte, und kann mit einem Artist reden, falls er später jemanden beauftragt. Die Zitate stammen aus Anzeigen, die im Oktober 2026 online waren oder ausdrücklich als abgelaufen gekennzeichnet sind. Diese Seite ist keine Arbeitsmarktstudie.
+
+## Rollen und Jobtitel
+
+Titel bedeuten in jedem Studio etwas anderes. Lies die Aufgaben, nicht nur die Überschrift.
+
+| Rolle | Typische Titel | Alltag | Beispiel aus einer Anzeige |
+| --- | --- | --- | --- |
+| Pixel Art allgemein | Pixel Artist | Figuren, Kreaturen, Tiles und Requisiten im Stil des Spiels | Conradical Games: „A strong pixel art portfolio with unique creatures and characters.“ |
+| 2D Art | 2D Artist, 2D Game Artist | Pixelart oder gemalte Grafik, oft auch Oberfläche und Illustration | Pine Creek Games: „good knowledge of perspective“ |
+| Figuren | Character Artist, Character Designer | Entwurf und Ausarbeitung von Figuren, Modellblätter | — |
+| Umgebung | Environment Artist, Tile Artist | Tilesets, Hintergründe, Requisiten | — |
+| Animation | Pixel Art Animator, 2D Animator | Bewegung, Kampfanimationen | Dead Mage: „A portfolio of outstanding pixel art animation. This is the main thing we'll judge.“ |
+| Technik und Kunst | Technical Artist, 2D Technical Artist | Grafik in die Engine bringen, Werkzeuge, Pipelines | League of Geeks: „Experience working in and with game engines (i.e., Unreal, Unity, Godot)“ |
+
+Quellen: [Conradical Games](https://workwithindies.com/careers/conradical-games-pixel-artist), [Pine Creek Games](https://workwithindies.com/careers/pine-creek-games-2d-artist), [Dead Mage](https://workwithindies.com/careers/dead-mage-pixel-art-animator), [League of Geeks](https://workwithindies.com/careers/league-of-geeks-2d-artist).
+
+Animation ist hier nur der Vollständigkeit halber aufgeführt. Sie ist Thema des Animationskurses, der auf diesem Kurs aufbaut. Topdeck Productions etwa verlangt für einen 2D Character Animator ausdrücklich „a portfolio or reel showing combat-relevant animation (attacks, hits, deaths, idles)“ ([Topdeck Productions](https://workwithindies.com/careers/topdeck-productions-experienced-2d-character-animator)).
+
+## Was Studios erwarten
+
+Die Anzeigen wiederholen sich in wenigen Punkten:
+
+- **Das Portfolio entscheidet.** Kaum eine Anzeige fragt nach einem Abschluss, fast alle nach Arbeitsproben. Ein Panel der GDC 2019, zusammengefasst im ArtStation Magazine, sagt es knapp: „Your portfolio is more important than your resume.“ ([Top 10 Portfolio Tips](https://magazine.artstation.com/2019/03/games-portfolio-top-10/))
+- **Eigene Figuren und Kreaturen.** Studios wollen sehen, dass du entwerfen kannst, nicht nur nachzeichnen. Kreaturen kommen in Anzeigen für Actionspiele ausdrücklich vor.
+- **Perspektive und Konstruktion.** Pine Creek Games nennt „good knowledge of perspective“. Für Top-down-Spiele heißt das: die 3/4-Draufsicht sicher beherrschen.
+- **Arbeit in der Engine.** Wer seine Grafik selbst in Godot, Unity oder Unreal einsetzen und prüfen kann, spart dem Team Zeit.
+- **Eigene Arbeit statt KI.** Pine Creek Games schreibt in die Anforderungen „Not using AI in their work“. Das deckt sich mit der Regel dieses Kurses: Jede Zeichnung stammt von dir.
+- **Zusammenarbeit.** Art Leads wollen wissen, wie du mit Rückmeldung umgehst und ob du in einem vorgegebenen Stil arbeiten kannst.
+
+## Die Lage in Deutschland
+
+Auf [Games-Career](https://www.games-career.com/), der auf den deutschsprachigen Raum spezialisierten Jobbörse, stand bei der Recherche im Oktober 2026 keine Stelle für Pixel Artists oder 2D Artists. Die Art-Rubrik enthielt vor allem Koordinations- und UX-Stellen. Pixelart-Stellen sind häufig remote und international ausgeschrieben, etwa auf [Work With Indies](https://www.workwithindies.com/) oder [Hitmarker](https://hitmarker.net/). Viele kleine Studios vergeben Pixelart auch als Auftrag an Freiberufler statt als feste Stelle. Für dich als Entwickler mit eigenem Spiel ist der wichtigere Weg das veröffentlichte Projekt: Ein kleines Spiel mit eigener Grafik zeigt mehr als jede Bewerbung.
+
+## Art-Tests und Gespräche
+
+Viele Studios lassen Bewerber eine Probearbeit machen. Snow Day Games beschrieb für eine Stelle als 2D Technical Pixel Artist einen „Paid test commission to ensure shared artistic vision“ ([Work With Indies, abgelaufen](https://workwithindies.com/careers/snow-day-games-2d-technical-pixel-artist)). Typisch sind Aufgaben wie im Abschlussprojekt dieses Kurses: ein kleines Set aus Figur, Gegner und Tiles in einem vorgegebenen Rahmen.
+
+### Art-Test: so gehst du vor
+
+1. **Frag, was bewertet wird.** Entwurf, Ausführung im vorgegebenen Stil, Geschwindigkeit oder alles. Halte dich an Größen, Palette und Zeit.
+2. **Leg den Rahmen schriftlich fest.** Auflösung, Tile-Größe, Spritehöhe, Palette, Lichtrichtung. Eine Maßstabstabelle zeigt, dass du an Zusammenhalt denkst.
+3. **Zeig den Weg.** Thumbnails, Silhouetten, Tonwertskizze, dann die Ausarbeitung. Studios wollen sehen, wie du Entscheidungen triffst.
+4. **Prüf im Spielbild.** Lege die Assets in ein Mockup in Spielauflösung und mach die Proben aus [Prüfen, überarbeiten, dokumentieren](/pixelart/lesbarkeit-pruefen).
+5. **Begründe kurz.** Eine halbe Seite mit den wichtigsten Entscheidungen und dem, was du mit mehr Zeit ändern würdest.
+
+### Häufige Fragen im Gespräch
+
+- „Führ mich durch dieses Stück: Wo hast du angefangen?“ Zeig Thumbnails und Zwischenstände.
+- „Warum diese Palette?“ Antworte mit Rampen, Tonwerten und Lesbarkeit, nicht mit Geschmack.
+- „Was würdest du an diesem Asset ändern?“ Nenne eine konkrete Schwäche mit Beleg und wie du sie prüfen würdest.
+- „Wie gehst du mit Rückmeldung um, die dir nicht gefällt?“ Beschreibe, wie du eine Rückmeldung in eine Beobachtung übersetzt und dann entscheidest.
+- „Kannst du in einem fremden Stil arbeiten?“ Zeig ein Stück, das du in einer vorgegebenen Palette oder Größe gemacht hast.
+
+## Portfolio
+
+- **Weniger, aber stark.** „Delete half your portfolio.“ und „Taste over technique“ stehen in der Liste des ArtStation Magazine. Fünf zusammenpassende Stücke wirken mehr als zwanzig gemischte.
+- **Originalgröße und vergrößert.** Zeig Pixelart bei 1× und ganzzahlig vergrößert, nie unscharf skaliert.
+- **Im Zusammenhang.** Ein Mockup zeigt, dass Figuren auf dem Boden lesbar sind. Einzelsprites auf grauem Grund zeigen das nicht.
+- **Den Weg zeigen.** Ein Modellblatt mit Thumbnails, Gliederpuppe und fertigem Sprite erzählt mehr als das Endbild.
+- **Ehrlich kennzeichnen.** Bei Teamarbeit steht da, was von dir ist. Fanart ist als Fanart markiert.
+- **Bildschirmfotos für Spiele.** Wer ein eigenes Spiel auf itch.io veröffentlicht, sollte laut den Richtlinien der Plattform Screenshots zeigen: „Screenshots are an effective way to visually communicate what your project entails.“ ([itch.io](https://itch.io/docs/creators/quality-guidelines#provide-screenshots-for-your-project-if-applicable))
+
+## Lernplan in Wochen
+
+Ein Vorschlag für rund fünf Stunden pro Woche über 20 Wochen, gemischt aus Bus und Schreibtisch. Die Module brauchen laut ihren Zeitangaben zusammen etwa 27 Stunden, die vier Projekte etwa 74. Keine Pflichtreihenfolge; das Skizzenbuch-Projekt läuft parallel zu den ersten vier Wochen.
+
+| Woche | Unterwegs | Am PC |
+| --- | --- | --- |
+| 1 | [Beobachten](/pixelart/beobachten) | [Editor einrichten](/pixelart/editor-einrichten) |
+| 2 | [Grundkörper und Draufsicht](/pixelart/grundkoerper-raum) | erste Linien im Editor |
+| 3 | [Figur und Proportion](/pixelart/figur-proportion) | – |
+| 4 | [Licht und Tonwerte](/pixelart/licht-werte) | – |
+| 5 | [Linien und Cluster](/pixelart/linien-cluster) | Projekt „Ein Gegenstand in drei Größen“ beginnen |
+| 6 | [Farbe und Paletten](/pixelart/farbe-paletten) | [Schattieren und Textur](/pixelart/schattieren-textur) |
+| 7 | [Silhouette und Formensprache](/pixelart/silhouette-formsprache) | Projekt abschließen |
+| 8 | [Pose und Ausdruck](/pixelart/pose-ausdruck) | [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen) |
+| 9 | Thumbnails für eine eigene Figur | [Ansichten und Maßstab](/pixelart/ansichten-massstab) |
+| 10 | Proben am Handy | [Umgebung und Tiles](/pixelart/umgebung-tiles) |
+| 11 | [Prüfen und dokumentieren](/pixelart/lesbarkeit-pruefen) | Projekt „Eine eigene Figur in vier Richtungen“ beginnen |
+| 12–13 | Proben der eigenen Figur | Projekt „Eine eigene Figur in vier Richtungen“ abschließen |
+| 14–20 | Proben und Fremdtests | Abschlussprojekt „Asset-Set für eine Begegnung“ |
+
+## Ressourcen
+
+- **Pixelart:** [Saint11 (Pedro Medeiros)](https://saint11.art/blog/pixel-art-tutorials/), [Slynyrd Pixelblog](https://www.slynyrd.com/pixelblog-catalogue), [Derek Yu: Pixel Art Tutorial](https://www.derekyu.com/makegames/pixelart.html), [cure: The Pixel Art Tutorial](https://pixeljoint.com/forum/forum_posts.asp?TID=11299), Michael Azzi: [Pixel Logic](https://michafrar.gumroad.com/l/pixel-logic) (Buch), [Lospec](https://lospec.com/palette-list) für Paletten und Tutorials.
+- **Zeichnen:** [Drawabox](https://drawabox.com/lesson/0), [Ctrl+Paint](https://www.ctrlpaint.com/library), [Proko: Gesture](https://www.proko.com/course-lesson/how-to-draw-gesture), [Line of Action](https://line-of-action.com/), James Gurney: [Color and Light](https://jamesgurney.com/products/color-and-light-a-guide-for-the-realist-painter-signed-by-james-gurney) (Buch).
+- **Lesbarkeit:** Valve, [Illustrative Rendering in Team Fortress 2](https://media.steampowered.com/apps/valve/2007/NPAR07_IllustrativeRenderingInTeamFortress2.pdf), Jason Mitchell, [Connecting Visuals to Gameplay at Valve](https://media.steampowered.com/apps/valve/2008/MIGS08_ConnectingVisualsToGameplay.pdf).
+- **Werkzeuge:** [Pixelorama](https://pixelorama.org/), [LibreSprite](https://libresprite.github.io/), [Aseprite](https://www.aseprite.org/docs/), [Krita](https://docs.krita.org/en/user_manual/getting_started/basic_concepts.html).