Wie diese Seite entstanden ist

Wer eine Bewerbungsseite sieht, sieht das Ergebnis und nicht, wie es zustande kam. Bei einer Seite, deren Code ein Sprachmodell geschrieben hat, ist genau das die Frage. Hier steht die Antwort: was ich entschieden habe, was das Modell gemacht hat, was dabei schiefging und was ich heute anders machen würde.

Die Seite, die Sie gerade lesen, ist selbst eine Arbeitsprobe – die umfangreichste auf dieser Website und die einzige, die Sie in diesem Moment benutzen.

Was diese Seite ausmacht

52 Seiten, 10 im Browser bedienbare Demos, 444 Testfälle
reines HTML und CSS: Die Datei in meinem Ordner ist genau das, was Ihr Browser bekommt
0 externe Abhängigkeiten: nichts wird von fremden Servern geladen
kein Tracking, keine Cookies, keine Anmeldung
gebaut ohne Vorerfahrung in HTML, CSS oder JavaScript – der Code stammt von einem Sprachmodell

Ausgangslage

Vor diesem Projekt konnte ich keine Websites bauen: kein HTML, kein CSS, kein JavaScript. Was ich hatte, war eine Anforderung – eine Bewerbungsseite, die Arbeitsergebnisse zeigt, statt sie zu behaupten, und die zu jeder Zahl die Herleitung mitliefert.

Keine Agentur, kein Baukasten, kein Template. Weder der Entwurf noch die Umsetzung noch die Texte stammen von einer anderen Person.

Vorgehen

Zuerst der Inhalt, dann die Struktur, dann die Umsetzung, dann die Tests – in dieser Reihenfolge, weil sich die umgekehrte rächt.

Inhalt und Belege. Zuerst wurde zusammengetragen, was tatsächlich belegbar ist: Zeugnisse, Projektabgaben, Noten, Aufwandsaufzeichnungen. Was sich nicht belegen ließ, ist nicht auf die Seite gekommen oder steht dort ausdrücklich als eigene Angabe.
Struktur. Erst danach die Frage, wer diese Seite liest und in welcher Reihenfolge er lesen will. Daraus sind die Seitengliederung und die rollenbezogenen Einstiege entstanden.
Umsetzung. Statisches HTML und CSS, Seite für Seite. Die Demos kamen zuletzt, weil sie am meisten voraussetzen.
Prüfung. Testfälle, die im Browser gegen dieselbe Logik laufen wie die Auswertung selbst – nicht gegen eine Kopie. Ohne sie wäre „das Werkzeug tut, was hier steht“ nicht nachprüfbar.

Erweitern in Wellen. Nach dem ersten Livegang kamen fünf weitere Versionen dazu – zuletzt Fälle, in denen ein Sprachmodell echte Arbeit macht und maschinell nachgeprüft wird. Jede Stufe hat ihren eigenen Abschlussbericht mit dem, was offen blieb.
Vereinfachen. Am 3. September 2026 wurde die Seite bewusst zurückgebaut: Die Startseite bot dieselbe Rollennavigation dreimal an, und jede Beispielseite hatte ihre eigene Gliederung. Beides ist vereinheitlicht. Kein Beleg ist dabei entfallen – die Tiefe ist von der Startseite auf die Unterseiten gewandert.

Maßstab jeder Entscheidung: Kann ein Leser nachvollziehen, wie eine Angabe zustande gekommen ist? Wenn nein, gehörte sie nicht auf die Seite.

Entscheidungen und ihre Begründung

Entscheidung	Warum
Statisches HTML und CSS, kein Framework	Haltbarkeit: Die Seite muss in zwei Jahren noch laufen, ohne dass jemand Abhängigkeiten nachzieht. Dazu Ladezeit.
Nichts wird vor dem Hochladen umgebaut	Was im Verzeichnis liegt, ist genau das, was ausgeliefert wird. Kein zusammengepresster Code, den hinterher niemand mehr lesen kann – auch ich nicht.
Kein Tracking, keine Cookies	Sie lesen eine Bewerbung, kein Produkt. Kein Grund, Ihr Leseverhalten aufzuzeichnen – und keine Cookie-Abfrage.
Keine externen Schriften und Skripte	Nichts wird von fremden Servern nachgeladen; die Schriftkette greift auf vorhandene Systemschriften zurück.
Alle Demos ohne Server und ohne Schlüssel	Was Sie eingeben, bleibt in Ihrem Browser. Eine statische Seite kann keinen API-Schlüssel geheim halten; die KI-Stufen sind deshalb einmal echt gelaufene Aufzeichnungen, die im Browser gegen die Daten im Feld nachgerechnet werden.
Hosting über Cloudflare Pages	Statische Auslieferung, kein Server, keine Datenbank.
Nicht in Suchmaschinen	Diese Seite ist eine Bewerbungsunterlage, keine Publikation, und wird gezielt weitergegeben. Ein Header nimmt sie deshalb von der Indexierung aus. Der Preis ist bekannt und in Kauf genommen: Wer meinen Namen sucht, findet diese Seite nicht. Sitemap, Canonicals und das Personenschema bleiben trotzdem gepflegt, damit die Entscheidung umkehrbar ist.
Links mit `.html`, Canonicals ohne	Interne Links tragen die Dateiendung, damit das Verzeichnis auch ohne Server im Browser läuft – ein Ordner, den man öffnen kann, ist Teil der Prüfbarkeit. Die kanonische Adresse ist die Form ohne Endung, weil Cloudflare Pages so ausliefert. Beides nebeneinander ist Absicht. Im Ausdruck steht seit 21.09.2026 die kanonische Form: Dort wird die Adresse zum Abtippen, und die Endung gehört nicht dazu.
Gleiche Bauform, eigene Überschriften seit 03.09.2026, geändert 18.09.2026	Jede der 19 Beispielseiten beginnt mit einem Kurzkasten und endet mit einem Abschnitt, der sagt, für wen das etwas ist. Vorher trug jede Seite ihre eigene Gliederung – fachlich richtig, aber für jemanden, der zehn Bewerbungen am Tag durchsieht, jedes Mal neue Orientierungsarbeit.
Aus siebzehn Arbeitsproben wurden fünfzehn seit 21.09.2026	Vier der siebzehn beschrieben dieselbe Anlage in meiner Wohnung: der Störfall, das Systemmodell, die Wissensbasis und ein Musterangebot. Einzeln war jede sauber belegt, in der Reihe gelesen bekam die Sammlung eine Schlagseite – viel Werkzeugbau für selbst gestellte Aufgaben. Die Supportfall-Seite war ohnehin als „Die fünf Belege, ein Fall" angelegt, und zwei der fünf zeigten nach außen. Jetzt stehen alle fünf auf einer Seite.
Das Musterangebot steht nicht mehr für sich seit 21.09.2026	Es hatte einen erfundenen Auftraggeber und erfundene Preise – beides gekennzeichnet, aber als eigenständige Arbeitsprobe trug es damit nicht: Der schwierige Teil eines Angebots ist die Preisfindung, und genau der fehlte. Die echte Mengen- und Kostenherleitung steht auf Ausschreibung und Steuerung, wo jede Menge ihre Quelle mitträgt. Behalten habe ich, worum es eigentlich ging: die zwei Ausschlüsse und eine Nachfassnotiz, die gegen den eigenen Umsatz argumentiert. Beide Adressen leiten dauerhaft weiter.
Horn ist ein Freiraumprojekt seit 21.09.2026	Die Raumplanungsarbeit zu Horn stand nur unter ihrer eigenen Adresse und war von der Freiraumübersicht aus nicht erreichbar – obwohl sie dasselbe Muster trägt wie die drei anderen Projekte. Sie ist jetzt das vierte. Die Adresse bleibt `geodaten-kartierung-horn`, weil sie so bereits in Bewerbungen verschickt wurde; umbenennen bräche jeden dieser Links.
Eine falsche Zahl stand fünf Tage auf der Seite seit 21.09.2026	Die Lerndatei führte 372 Fotos und dazu die Lizenzverteilung 214/136/26/2 – zusammen 378, also die Zahl der Metadatensätze und nicht die der Bilder. Es sind 371: sechs Dateien kamen beim Abruf nicht an, eine ist danach verloren gegangen. Der Fehler stand vom 16. bis zum 21. September. Aufgefallen ist er beim Abgleich aller Seiten gegeneinander, nicht bei einer der Prüfungen – die sehen Struktur, nicht Bedeutung.
Die Überschriften dieser Kästen sind wieder verschieden seit 18.09.2026	Die Vereinheitlichung war einen Schritt zu weit gegangen: 34 Kästen trugen wörtlich „Auf einen Blick", und 13 Abschnitte endeten mit „Wenn das zu Ihrer Rolle passt". Eine Überschrift, die auf 34 Seiten dasselbe sagt, sagt nichts – sie kostet eine Zeile und liefert keine Information. Die Bauform ist weiterhin überall gleich, damit die Orientierung bleibt; nur die Beschriftung nennt jetzt, was im Kasten steht: „Die Mengen, auf denen alles beruht", „Eingabe, Läufe, Prüfungen", „Wo Geräte nicht miteinander reden".
Die Datenhälfte hat eine eigene Farbe seit 18.09.2026	Die Seite argumentiert an drei Stellen damit, dass sie zwei Hälften hat – Planung und Daten. Visuell waren beide dasselbe Grün; die Gestaltung widersprach damit dem Hauptargument. Das Blau gehört jetzt ausschließlich der Datenhälfte: der Digitalisierungsseite, dem Rolleneinstieg für Daten und Prozesse und den zehn Werkzeugen – zwölf Seiten.
Sieben Sektionen, ein einziger Grund seit 18.09.2026	Fünf der sieben Sektionen der Startseite hatten gar keinen Hintergrund, die beiden übrigen einen, der sich mit 1,13:1 vom Seitengrund nicht abhob. Über 6.046 px passierte kein einziger Flächenwechsel. Das war der Grund für den statischen Eindruck – es fehlte nicht Bewegung, es fehlte die Fläche.
Aus zwei Rollenseiten wurde eine seit 18.09.2026	`geodaten` und `oeffentliche-hand` stützten sich auf denselben Belegkern – Damm, Naschmarkt, Studium. Der einzige Link auf `/geodaten`, der je verschickt wurde, gehörte zu einer Bewerbung auf eine Stadtplanungsstelle. Die Adresse leitet per 301 auf die Ankermarke, damit ein bereits verschickter Link nicht auf einer Seite landet, die zuerst von Rechtsgrundlagen handelt.
Die Zahlen stehen über der Falz seit 18.09.2026	Die drei schwersten Zahlen standen bei 1.273 px, also anderthalb Bildschirme unter der Falz. Der erste Bildschirm einer Seite, deren These „belegt statt behauptet“ lautet, zeigte ausschließlich eine Behauptung. Offensiv macht eine Seite nicht der Anspruch, sondern der Abstand zwischen Anspruch und Beleg.
Die Schriften gehen mit seit 16.09.2026	Vorher standen hier `Iowan Old Style` für die Überschriften und `-apple-system` für den Fließtext. Das erste gibt es nur auf macOS, das zweite heißt auf jedem System etwas anderes – rund 90 % des Textes sahen überall anders aus als hier. Beide Schriften liegen jetzt unter `assets/fonts/` und gehen mit der Seite mit, unter der SIL Open Font License.
Es steht jetzt dabei, wo man ist seit 16.09.2026	49 Seiten beantworteten durchgehend die Frage „stimmt das?“ und nirgends die Frage „wo bin ich, und was kommt als Nächstes?“. Keine Brotkrume, keine Blätterleiste, auf Seiten mit 6.800 Wörtern kein Sprungmenü. Wer über einen Bewerbungslink mitten hineinkam, stand ohne Zusammenhang da.
Jede Arbeitsprobe fängt beim Problem an seit 16.09.2026	Vorher begann jede mit dem Verfahren: „Ein Sprachmodell liest 16 Seiten Fachtext und liefert 13 Datensätze“ beantwortet, wie viel und womit – nicht, wofür und für wen. Der Leser hatte drei offene Fragen, bevor die erste Zahl Bedeutung bekam. Jetzt stehen drei Sätze davor: Wer hat das Problem, worin besteht es, was kostet es.
Die Überschriften waren leiser als ihr Text seit 16.09.2026	90 von 188 Überschriften trugen die Eyebrow-Optik: 14 px, versal, grau – kleiner als die 17 px Fließtext darunter. Die Absicht war, dass sie sich von den übrigen Eyebrows nicht unterscheiden. Die Folge war, dass die Überschrift das leiseste Element des Abschnitts war, den sie eröffnet.
Eine zweite Prüfung, die den Browser braucht seit 06.09.2026	Das Prüfskript lief sauber durch, während sechs Fehler offenstanden, die es nicht sehen konnte: weiße Schrift auf hellgrünem Grund (2,09:1), sobald der Farbschalter gegen die Systemeinstellung stand; neun Seiten, die bei 320 px horizontales Scrollen erzwangen; eine Kopfzeile, die auf dem Telefon 163 px hoch klebte. Seither prüft `website-rendern.mjs`, was man nur im Browser sieht. Jede dieser Prüfungen wurde gegen den wiederhergestellten Fehler gehalten – eine Prüfung, die nie anschlägt, ist keine.
Die Startseite trägt weniger seit 03.09.2026	Sie bot dieselben sechs Rollenwege dreimal an – im Kopf, in der Mitte und in der Fußzeile – und kam auf rund 1.500 Wörter. Jetzt steht die Rollenwahl an einer Stelle, zwei Abschnitte sind gestrichen, und die Tiefe liegt auf den Unterseiten. Kein Beleg ist dabei entfallen.
Aus „Werkstatt" wurden „Fachnotizen" seit 03.09.2026	Der alte Name sagte nicht, was dort steht, und der Bereich stand in der Hauptnavigation gleichrangig neben Freiraum und Automatisierung – was er nicht ist. Er ist jetzt aus der Hauptnavigation genommen und über Fußzeile und Startseitenschluss erreichbar. Die alten Adressen leiten dauerhaft weiter (`_redirects`).
Der Seitengrund ist dunkler seit 03.09.2026	Er lag bei 95,7 % Helligkeit und damit fast auf Weiß – Karten, Kästen und Eingabefelder verschwanden darin. Jetzt sind es 83,9 %: Was darüberliegt, liegt sichtbar darüber. Alle Farbpaare sind gegen die WCAG-Schwellen nachgerechnet, keines liegt darunter.
Drei Kastenrollen, mehr nicht seit 03.09.2026	Vorher hatte eine Färbung keine feste Bedeutung: 185 gefüllte Kästen, auf einer Seite 18, auf der nächsten keiner – Kurzfassungen, Warnungen, Downloads und Querverweise trugen dieselbe Farbe. Jetzt gibt es genau drei Rollen, und jede beantwortet eine andere Frage: Was ist das hier? (oben, neutral), Was beweist es nicht? (sand), Was nehme ich mit? (grün, unten). Höchstens einer je Rolle und Seite. Alles andere steht weiterhin da, nur ohne Füllung – 96 gefüllte Kästen statt 185. Und die Regel wird geprüft: `website-pruefen.py` zählt sie je Seite nach und meldet jeden Verstoß; beim ersten Lauf waren es zwölf.
Aus „Automatisierung" wurde „Digitalisierung" seit 03.09.2026	Auf der Seite standen fünf Arbeitsproben unter der Überschrift „Die fünf Arbeitsproben" – und darunter, in vier verschiedenen Formaten, sechs weitere. Eine Fußnote sagte sogar zweimal ausdrücklich, dass diese nicht dazuzählen. Damit war der KI-Fall, der Supportfall, die Kalkulationsmappe und diese Website per Überschrift zweitrangig – obwohl der KI-Fall die stärksten Belege trägt. Danach standen alle elf im selben Format – zehn in vier Gruppen nach der Frage, was sie belegen (Regeln, KI, Daten, Technik), dazu diese Website als elfte. (Heute sind es fünfzehn in fünf Gruppen; die Zahl hier beschreibt den Stand vom 03.09.2026.) Der alte Name deckte ohnehin nur einen Teil ab. Die alte Adresse leitet dauerhaft weiter.
Lücken bleiben sichtbar	Wo Material oder Zahlen fehlen, steht das als Lücke da. Auch auf dieser Seite – siehe unten.

Werkzeug

Gebaut habe ich die Seite mit Claude Code, einem Sprachmodell-Werkzeug für die Softwareentwicklung. Das gehört offen hierher: Eine Seite, deren gesamtes Argument lautet, dass nachvollziehbar bleiben muss, wie ein Ergebnis zustande gekommen ist, kann ihr eigenes Zustandekommen nicht verschweigen.

Die Arbeitsteilung war eindeutig. Das Sprachmodell hat den Code geschrieben. Ich habe die Anforderungen und die Struktur festgelegt, Entwürfe verworfen und angenommen, die Inhalte geschrieben beziehungsweise verantwortet, entschieden, was hineinkommt und was nicht, das Ergebnis geprüft und es veröffentlicht. Für jeden Satz und jede Zahl auf dieser Website stehe ich gerade.

Was hier steht und was nicht

Dieser Abschnitt beschreibt ein Vorgehen, keine Person – kein Versprechen, keine Selbstbewertung. Was daraus folgt, entscheiden Sie.

Zahlen aus dem Verzeichnis

HTML-Seiten 52
Zeilen CSS 2326
Zeilen JavaScript 8420
JavaScript-Dateien 36
Testfälle 444
Bilder und Grafiken 57
Nachgeladen von fremden Servern 0
Schritte zwischen Datei und Browser 0

Stand 01.10.2026, ausgezählt im Projektverzeichnis – nicht von Hand gepflegt, sondern vor jeder Veröffentlichung neu erhoben.

Die letzten beiden Zeilen stehen auf null, und das ist der Punkt: Beim Aufruf dieser Seite holt Ihr Browser nichts von einem fremden Server – keine Schrift, kein Skript, kein Zählpixel. Und zwischen der Datei, die bei mir im Ordner liegt, und dem, was Sie sehen, passiert nichts: kein Zusammenbauen, kein Zusammenpressen, kein Übersetzen in eine andere Sprache. Viele Websites durchlaufen genau das, bevor sie hochgeladen werden – am Ende liegt dort Code, den niemand mehr liest. Hier ist die Datei das Ergebnis.

Die 444 Testfälle sind dieselben, die in den Demos im Browser laufen; das Ergebnis des letzten Laufs außerhalb des Browsers steht in testlauf-2026-09-14.txt.

Der Zeitraum – und was ihn belegt

Angefangen habe ich Anfang August 2026, zunächst nebenher. Die intensive Phase lag zwischen dem 20. August und dem 6. September 2026; in diesen gut zwei Wochen ist der größte Teil dessen entstanden, was Sie hier sehen.

Das ist meine eigene Angabe – anders als die Zahlen weiter oben lässt sie sich nicht nachrechnen. Bis zum 31. August 2026 hatte das Projekt keine Versionsgeschichte, aus der sich ein Zeitraum auslesen ließe, und rückwirkend entsteht sie nicht mehr. Die Änderungszeiten der Dateien reichen bis zum 23. August zurück, decken den Anfang also nicht ab.

Seit dem 31. August 2026 gibt es eine: Der Quellcode liegt seither in einer Versionsverwaltung, die jede Änderung mit Datum festhält. Was davor liegt, bleibt eine Lücke – der erste Eintrag ist der Stand vom 31. August, nicht der Anfang.

Was daran schwierig war und was ich anders machen würde

Was am Ergebnis ablesbar ist, steht hier. Was nur ich beantworten kann – wie lange ich gebraucht habe, wie oft ich neu angefangen habe, was mich am meisten Zeit gekostet hat und welche Entscheidung ich rückblickend anders träfe –, ergänze ich hier in eigenen Worten. Bis dahin bleibt dieser Absatz absichtlich unvollständig; ein erfundener Schwierigkeitsbericht wäre schlimmer als ein leerer.

Ablesbar ist das hier: Bis zum 31. August 2026 gab es keine Versionsgeschichte des Projekts – rückblickend ein Fehler, weil sich damit weder der Verlauf noch ein einzelner Schritt rekonstruieren lässt und weil eine Zwischenfassung nicht wiederherstellbar ist. Seither gibt es eine; den entgangenen Verlauf holt sie nicht mehr ein.

Ebenfalls ablesbar: Der Anspruch, jede Zahl mit ihrer Herleitung zu zeigen, macht die Arbeit deutlich langsamer. Mehrere Angaben stehen heute nicht auf der Seite, weil sich das Material nicht eindeutig zuordnen ließ – bei den Studienprojekten zum Beispiel die Zeichnungen, deren Urheberschaft im Abbildungsverzeichnis anderen zugeordnet ist. Das ist eine Entscheidung gegen Vollständigkeit und für Belegbarkeit, und sie kostet sichtbar Inhalt. Sie ausführlich zu begründen kostet allerdings noch mehr: Auf der Freiraumseite stand dazu ein ganzer Absatz, der einem Leser erklärte, was er nicht zu sehen bekommt. Er ist am 03.09.2026 gestrichen. Die Zuordnung steht weiterhin auf jeder Projektseite, aber als Angabe, nicht als Rechtfertigung.

Und die naheliegende Frage: Kann ich den Code inzwischen selbst lesen und ändern? Diese Frage beantworte ich im Gespräch, nicht in einem Werbetext – und ich beantworte sie ehrlich.

Warum das hier steht

Ohne diesen Abschnitt wäre die Seite Werbung. Auf jeder Fallbeschreibung steht, was das Werkzeug nicht kann – für die Website gilt derselbe Maßstab.

Verwandt: der Abschnitt „Was Sie bekommen und was nicht“.

Zu den fünfzehn Arbeitsproben → · Zum Werdegang → · Kontakt →