Intern · noindex

Stylesheet

Eine Schrift (Inter), drei Gewichte (400 / 500 / 600), sieben Größen, drei Trackings, vier Textfarben mit je einer Rolle. Alles hier rendert mit dem Live-CSS der Seite — Theme oben rechts umschalten, um Dark und Light zu prüfen.

Farben

Tokens und ihre eine Rolle

bgSeite
bg-mutedKarten, Formularfelder
textFließtext, Titel, Ziffern
text-mutedMeta, Zeiträume, Labels (= text-subtle)
borderHairlines, Karten-Rand
border-strongOutline-Button, Inputs
brand-amberKapitel-Overline — sonst nichts
brand-tealTextlinks — sonst nichts
accentFocus-Ring, Selection, Button-Hover

Typografie

Die Skala

H1 (Hero)28.8 / 38.4 px · 600 · −0.03em: Freelance Technical Product Owner
Kennzahl35.2 / 38.4 px · 600 · −0.03em: 50.000+
H2 (Kapitel)24 px · 600: Was ich mitbringe
Name / Lead groß18 / 20 px · 500: German Rauhut
H3 (Rolle, Karte)18 px · 600: Technical Product Owner
Fließtext16 px · 400 · 1.625: Brückenbauer zwischen Business und Technologie — Anforderung, Test, Release, verteilte Teams.
Fließtext gedimmt16 px · 400 · muted: Claim unter dem Rollen-Titel, Hero-Tagline.
Label14 px · 600: Mandat
Meta14 px · 400 · muted: Stuttgart · remote DACH · seit 10/2025
Overline Kapitel12 px · 500 · caps · 0.1em · amber: Kernkompetenzen
Overline Zeitraum / Tabellenkopf12 px · 500 · caps · 0.1em · muted: 10/2021 – 10/2025

Kapitel

Overline + Headline

Projekte

Freelance, Mercedes-Benz, frühere Stationen

Amber markiert das Kapitel, die weiße Headline trägt es. Abstand zwischen Kapiteln: 80 / 96 px, Hairline dazwischen. Unter der Headline folgt Fließtext in text, nie in text-muted.

Aktionen

Buttons und Links

Primary — Mandat besprechen Outline — E-Mail

Textlink — teal, unterstrichen

Pro Seite genau ein Primary im Hero, einer in der Lead-Angebotskarte, einer in der Navigation. Karte 3 bleibt Textlink.

Bausteine

Karte, Liste, Definitionsliste

Technical Product Ownership

Mandate in Konzernprogrammen — Anforderung, Backlog, verteilte Teams, Delivery.

Mandat besprechen (20 Min)

Anforderung & Backlog — fetter Lead, dann Fließtext. Marker in text-muted.
Test, Release, Abnahme — drei Zeilen Abstand zwischen Punkten (space-y-3).

Runtime: TypeScript, NestJS, Next.js, React, PostgreSQL
Delivery: Vercel, GitHub Actions, Docker

Tabelle

Nur Zeilenlinien

Heute	Fundament
Technical Product Ownership — Vision, Backlog, Delivery	Anforderungsmanagement — Grobkonzept bis technische Story
DevOps & CI/CD — GitHub Actions, Vercel, Monitoring	Testmanagement — E2E, API, Automatisierung

Timeline

Knoten, Zeitraum, Rolle, Claim

10/2021 – 10/2025
Technical Product Owner
Stammdaten-Produkt MData im PLUS-Programm
Lead-Absatz in text, Claim darüber in text-muted.

Formular

Feld und Label

Name