Style Guide
Alle Farben, Schriften und Abstände sind zentral als globale Variablen und Klassen hinterlegt. Eine Überschrift einfügen, den Tag (H1–H6) wählen – fertig. Ändert sich eine Farbe, ändert sie sich auf der ganzen Website.
01 — Farben
#0C1D25 · color-primary
#071319 · color-primary-dark
#CDF902 · color-signature
#D3105E · color-accent
#3A4A53 · color-text
#6A7A83 · color-muted
#F4F7F8 · color-surface
#E8EEF1 · color-surface-alt
#B6E000 · color-signature-dark
#A80B4A · color-accent-dark
#D9E1E5 · color-line
#FFFFFF · color-white
02 — Typografie
Überschriften: Sora · Fließtext: DM Sans. Alle Größen skalieren automatisch zwischen Smartphone und Desktop.
H1
Sora 600 · 44–80 px
Einmal pro Seite
H2
Sora 600 · 32–52 px
Sektionsüberschrift
H3
Sora 600 · 24–32 px
Karten, Zitate
H4
Sora 600 · 22 px
Unterpunkte
H5
Sora 600 · 17 px
Kleine Titel
H6
DM Sans 700 · 14 px
Versalien, Akzent
Lead
Klasse: lead
Intro unter H1/H2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fließtext
DM Sans 400 · 17 px
Zeilenhöhe 1.7
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Fett hervorgehoben und kursiv betont.
Kleintext
Klasse: text-small
Hinweise, Bildunterschriften, Metadaten – Lorem ipsum dolor sit amet.
Dachzeile
Klasse: eyebrow
Dachzeile über einer Überschrift
Liste
Im Absatz-Widget
Label
Klasse: label-heading
Sieht aus wie H5, ist aber keine Überschrift
Adresse · Navigation · Erreichbarkeit
Jahreszahl
Klasse: milestone-year
Für Zeitleisten
1998
Zitat
Klasse: quote
Für Kundenstimmen
„Lorem ipsum dolor sit amet – genau so stellen wir uns Partnerschaft vor.“
03 — Abstände & Radius
Abstände sind feste Regeln, die sich automatisch an die Bildschirmgröße anpassen. Neue Sektionen übernehmen sie über die Klasse section – bitte nicht lokal überschreiben. Welcher Wert auf welchem Gerät gilt, zeigen die Tabellen unten.
space-section
gleitend 72–128 px · Abstand oben und unten jeder Sektion
space-gutter
gleitend 20–48 px · Seitenrand links und rechts
container-max
fest 1216 px · Maximale Inhaltsbreite (Klasse container)
radius
fest 6 px · Ecken von Karten, Bildern, Buttons, Feldern
Abstände und große Schriften wachsen stufenlos mit der Bildschirmbreite mit. Die Regel ist überall gleich – nur der Pixelwert hängt vom Gerät ab. Deshalb stehen bei einigen Werten Spannen.
01
Auf dem Smartphone wird nichts zu klein, auf dem großen Monitor nichts zu riesig.
02
Keine Sprünge an Breakpoints – wer das Browserfenster aufzieht, sieht die Seite ruhig mitwachsen.
03
H1 wächst fast auf das Doppelte, Fließtext bleibt bei 17 px. Lesbarkeit stabil, Hierarchie klarer.
04
Wer Überschriften setzt oder die Klasse section nutzt, bekommt diese Werte automatisch – auch auf Tablet und Smartphone.
Variable
Wofür
Smartphone
375 px
Tablet
768 px
Laptop
1366 px
Großer Monitor
1920 px
space-section
Abstand oben/unten jeder Sektion
72 px
72 px
109 px
128 px
space-gutter
Seitenrand links/rechts
20 px
31 px
48 px
48 px
Spaltenabstand split
Abstand Bild ↔ Text
32 px
38 px
68 px
80 px
fs-h1
Überschrift H1
44 px
48 px
73 px
80 px
fs-h2
Überschrift H2
32 px
34 px
49 px
52 px
fs-h3
Überschrift H3, Zitate
24 px
24 px
30 px
32 px
fs-lead
Einleitungstext
18 px
20 px
22 px
22 px
Inhaltsbreite
Ergebnis aus Seitenrand + container-max
335 px
≈ 706 px
1216 px
1216 px
Pixelwerte gerundet. Zwischen den Spalten gleiten die Werte stufenlos mit der Bildschirmbreite. Technisch: CSS-Funktion clamp(Minimum, bevorzugter Wert, Maximum).
Variable
Wofür
Wert
fs-h4
Überschrift H4
22 px
fs-h5
Überschrift H5, Labels
17 px
fs-body
Fließtext
17 px
fs-small
Kleintext, Dachzeilen
14 px
container-max
Maximale Inhaltsbreite
1216 px
radius
Ecken von Karten, Bildern, Buttons, Feldern
6 px
Karten-Innenabstand
Klasse card
32 px
04 — Layout
Jede Sektion folgt demselben Aufbau: Sektion (Klasse section) → Container (Klasse container) → Inhalt. Hintergründe wechseln über eine Zusatzklasse, Spalten über ein Raster.
section
Fläche (Standard)
section + section-white
Weiß
section + section-alt
Fläche alternativ
section + section-dark
Dunkel (Text mit text-light)
split — zwei Spalten, z. B. Bild + Text
Spalte 1
Spalte 2
grid-3 — drei Spalten, z. B. Karten
1
2
3
grid-4 — vier Spalten, z. B. Kennzahlen oder Team
1
2
3
4
Auf Tablet und Smartphone stapeln sich die Spalten automatisch – dafür ist nichts einzustellen.
05 — Buttons & Links
Klassen: btn-primary (Lime) · btn-secondary – auf hellen Flächen
Klassen: btn-light · btn-primary – auf dunklen Flächen
Textlink
Mehr über unsere Leistungen erfahren →
Klasse text-link – für einzelne Links unter Texten oder Karten. Hover färbt Pink.
06 — Dunkle Flächen
Auf dunklen Sektionen (section-dark) bekommen Texte eine Zusatzklasse – sonst wären sie dunkel auf dunkel.
Überschriften
Klasse text-light – reines Weiß
Fließtext
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Klasse text-light-muted – Weiß, leicht gedeckt
Akzente
250+
Klasse accent-on-dark (Dachzeilen) bzw. stat-number (Kennzahlen) – Lime
07 — Formulare
Alle Felder nutzen dieselben drei Klassen. Ein neues Formular sieht dadurch automatisch aus wie das Kontaktformular.
08 — Bausteine
01
Klasse card – mit sanftem Hover-Effekt. Für Leistungen, Werte, Vorteile.
250+
Kennzahl – Klasse stat-number
Bild – Klasse img-cover, Seitenverhältnis frei wählbar
Zitat / Kundenstimme
„Lorem ipsum dolor sit amet, consectetur adipiscing elit – genau so stellen wir uns Partnerschaft vor.“
Maria Musterfrau · Geschäftsführerin, Beispiel AG
Klasse quote – ein Absatz, keine Überschrift
FAQ-Akkordeon
Antworttext als normaler Absatz. Consectetur adipiscing elit sed do eiusmod.
Weitere Antwort – Ut enim ad minim veniam, quis nostrud exercitation.
Fragen als H3 mit Klasse faq-question. Auf echten FAQ-Seiten im Akkordeon „FAQ-Schema“ aktivieren (SEO).
Trennlinie
Element „Trenner“ mit Klasse divider
Logo-Laufband
Siehe Startseite, Navigator → Logo Laufband. Logos haben die Klasse logo-item, jedes Logo kann verlinkt werden. Beim Austauschen immer beide Sätze (Logo 1–5 und Wiederholung) ändern.
09 — Animationen
Animationen werden im Editor unter Interaktionen eingestellt. Diese Werte sorgen dafür, dass sich jede Seite gleich anfühlt – dynamisch, aber ruhig.
Seitenkopf
Auslöser „Laden“ · Einblenden von unten · 800–900 ms · Dachzeile, Titel und Text je +150 ms versetzt.
Inhalte
Auslöser „In Sicht scrollen“ · von unten · 800 ms · Abspielen nur einmal.
Karten & Raster
Jede Karte +100–150 ms Verzögerung zur vorherigen – so wie diese Karten hier.
Bild + Text
Bild von links bzw. rechts (1000 ms), Text von unten mit +200 ms.
Hover
Karten heben sich um 4 px, Buttons um 2 px · 0,2–0,3 s. Ist in den Klassen card und btn-* bereits enthalten.
Regel
Eine Animation pro Element, Blöcke statt einzelner Sätze animieren, keine Dauer über 1,2 s.
10 — Pflege
Vier einfache Regeln für die Bearbeitung im Elementor-Editor.
Element anklicken, Text im linken Panel ändern – Schrift, Farbe und Größe kommen automatisch aus dem Style Guide.
Pro Seite genau eine H1, Sektionen mit H2, Unterpunkte mit H3–H5. Jahreszahlen, Labels und Zitate sind keine Überschriften – dafür gibt es die Klassen milestone-year, label-heading und quote.
Rechtsklick auf eine Sektion im Navigator → Duplizieren. So bleiben Abstände, Klassen und Animationen erhalten.
Neue Farben nicht lokal setzen, sondern die globalen Variablen nutzen – dann bleibt alles markenkonform.
