Styleguide

Paragraph Text Headlines Lists Boxen Spalten Layouts Buttons Border Radius

Stand Oktober 2025

Um die aktuelle Website weiterhin zu verwenden, können wir einen Container mit der .new-style Klasse nutzen, um alle neuen Klassen anzuwenden bis wir alle Seiten umgestellt haben.

Alle Maße sollten das 8px-Raster-System für visuelle Konsistenz priorisieren. Die semantische HTML-Struktur hat Vorrang vor visuellen Präferenzen. Man verwendet Styling-Klassen, wenn semantische und visuelle Anforderungen in Konflikt stehen, und hält konsistente Abstandsbeziehungen zwischen Inhaltselementen aufrecht.

Base Grid Unit: 8px

Alle Abstände, Größen und Layout-Maße müssen durch 8px teilbar sein, um Konsistenz und visuellen Rhythmus im gesamten Design-System zu gewährleisten. Bevorzugte Werte umfassen 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104px und ähnliche Abstufungen. Einheiten, die durch 4px teilbar sind wie 28px oder 36px, sind nur dann erlaubt, wenn es absolut notwendig ist, und sollten sparsam als Ausnahme zum Standard-Raster-System verwendet werden.

Content Struktur und SEO

Inhalte müssen einer ordnungsgemäßen SEO-Überschriftenhierarchie folgen, ohne Ebenen zu überspringen, um Barrierefreiheit und Suchmaschinenoptimierung sicherzustellen. Die korrekte Hierarchie verläuft von h1 zu h2 zu h3 zu h4 zu h5 zu h6 in sequenzieller Reihenfolge. Falsche Verwendung würde bedeuten, direkt von h1 zu h3 oder h4 zu springen, was die semantische Struktur bricht.

Korrekt: h1 → h2 → h3 → h4 → h5 → h6
Falsch: h1 → h3 or h1 → h4

Wenn du einen spezifischen visuellen Stil benötigen, der nicht zur semantischen Hierarchie passt, bieten Styling-Klassen die Lösung. Dazu gehören .new-h1, .new-h2, .new-h3, .new-h4, .new-h5, .new-h6 für Überschriften und .new-p für Absatz-Styling. Beispielsweise kannst du <h2 class=”new-h3″> verwenden, wenn du h2-Semantik für SEO-Zwecke benötigst, aber das visuelle Styling eines h3-Elements bevorzugst.

.new-h1, .new-h2, .new-h3, .new-h4, .new-h5, .new-h6
.new-p für normalen Paragraph Text.

Typographie

Die Basis-Schriftart verwendet Dosis als Schriftfamilie mit einer Schriftgröße von 18px, normaler Schriftstärke (400) und einer Zeilenhöhe von 1.5, was 27px entspricht. Fettgedruckter Text erhält eine Schriftstärke von 600, niemals 700, um Konsistenz zu gewährleisten.

Schriftstärken-Konsistenz

Alle Überschriften müssen feste Schriftstärken-Werte verwenden, um ein einheitliches Erscheinungsbild unabhängig von Fett-Styling sicherzustellen. Die h1-Überschrift verwendet 48px Größe mit Schriftstärke 600, 32px Abstand nach unten und die blaue Kontrastfarbe. H2-Überschriften haben 24px Größe mit Schriftstärke 600, 32px Abstand nach unten und graue Kontrastfarbe. H3-Überschriften nutzen 22px Größe mit Schriftstärke 600, 24px Abstand nach unten und graue Kontrastfarbe. H4, h5 und h6-Überschriften verwenden alle 20px, 18px bzw. 18px Größe mit jeweils Schriftstärke 600, 24px Abstand nach unten und graue Kontrastfarbe.

Abstände nach Inhaltsblöcken

Wenn eine Überschrift auf einen Absatz, eine ungeordnete Liste oder eine geordnete Liste folgt, wendet man 56px oberen Abstand an. Dies gilt für Kombinationen wie p + h1, p + h2, p + h3, p + h4, p + h5 sowie ul + h1, ul + h2, ul + h3, ul + h4, ul + h5 und ol + h1, ol + h2, ol + h3, ol + h4, ol + h5. Der letzte Paragraph / Liste eines Abschnitts hat KEIN Abstand nach unten.

Listen-Abstand-Regeln

Listen, denen Text folgt, erhalten einen unteren Abstand, während Listen ohne nachfolgenden Inhalt den unteren Abstand entfernen lassen.

Layout-Komponenten

Für responsive Spalten-Layouts ohne komplexe Backend-Container-Konstruktion stehen automatische Spalten-Klassen zur Verfügung. Diese umfassen .column-2-auto für automatisches 2-Spalten-Layout, .column-3-auto für automatisches 3-Spalten-Layout und .column-4-auto für automatisches 4-Spalten-Layout.

Buttons

Buttons sollten eine Standard-Schriftgröße von 18px mit einer Schriftstärke von 600 haben. Buttons haben einen Innenabstand von 12px vertikal und 20px horizontal sowie einen Rahmenradius von 4px. Die Hintergrundfarbe sollte die Primärfarbe mit weißem Text verwenden, um optimalen Kontrast und Lesbarkeit zu gewährleisten.

Border Radius

Man sollte ausschließlich diese vordefinierten Border-Radius-Werte verwenden: 4px, 8px, 12px, 16px, 20px und 24px. Diese standardisierten Werte gewährleisten eine einheitliche visuelle Sprache im gesamten Design-System.

Paragraph Text

Lorem ipsum dolor sit amet, fat and bold text, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Button Mit .btn Klasse Button Mit .btn Klasse

h1 oder .new-h1 ipsum dolor sit amet consectetur adipiscing

h2 oder .new-h2 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet

h3 oder .new-h3 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet

h4 oder .new-h4 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fermentum diam nisl sit amet

h5 oder .new-h5 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fermentum diam nisl sit amet

h6 oder .new-h6 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fermentum diam nisl sit amet

Das ist eine h1 Überschrift die aussieht wie ein normaler Paragraph. Benutze dafür die .new-p Klasse.

Das ist eine h1 Überschrift die aussieht wie eine h2 Überschrift. Benutze dafür die .new-h2 Klasse.

Unordered List

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
At vero eos et accusam et justo duo dolores et ea rebum.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

Ordered List

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
At vero eos et accusam et justo duo dolores et ea rebum.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

Eine Headline Mit Hintergrund

Für eine Headline mit Hintergrund kannst du die .headline-bg Klasse verwenden. Der Headline Text muss als Hilfselememt Bold sein um die Grafik in den Hintergrund zu stellen.

Große Boxen haben einen Innenabstand von 56px und einen Border Radius von 4px. Du kannst auch einfach die Klasse .box verwenden.

In einem 2-Column Grid beträgt der Abstand zwischen Box und Content 56px. Das ist der gleiche Abstand wie der Innenabstand von Boxen und der Abstand zwischen Paragraphen mit einer nachfolgenden Headline.

Kleine Boxen mit 32px Abstand

Automatic 2 Column Layout mit Klasse .column-2-auto

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.