TORNADO Theme individualisieren

Mit TORNADO wird die Theme Toolbox 4.5 installiert. Sie bringt zwei Werkzeuge mit, um das Theme an dein Projekt anzupassen:

• den Live-Editor im Frontend – für Farben, Schriften, Abstände und Eckenradius, direkt auf der echten Seite
• den Theme Editor im Backend – für alles darüber hinaus: SCSS- und JavaScript-Varianten, Logo, Icons, Bilder und Webfonts

Tipp: Wenn du die Demo installiert hast, zeigt dir der Styleguide unter /styleguide/ jedes Element und jeden Baustein von TORNADO mit den passenden CSS-Klassen.

Wo liegen die Theme-Dateien?

Ordner	Inhalt
layout/tornado-theme/	Originaldateien des Themes – nicht direkt bearbeiten, werden bei Updates überschrieben
layout/custom/	Eigene Varianten und projektspezifische Anpassungen – bleiben bei Updates erhalten
assets/nutshell/	Nutshell Framework – die Basis aller unserer Themes, wird über Composer installiert und aktualisiert – nicht bearbeiten
files/demo/	Bilder der Demo-Inhalte

Anpassungen werden also nicht in layout/tornado-theme/ vorgenommen, sondern als Variante unter layout/custom/ abgelegt. Sowohl der Live-Editor als auch der Theme Editor übernehmen das Anlegen der Varianten automatisch.

Auch im Ordner assets/nutshell/ solltest du keine Änderungen vornehmen – sie würden beim nächsten Update überschrieben. Werte aus dem Nutshell Framework überschreibst du stattdessen über die _variables.scss und die _config.scss des Themes (siehe Abschnitt Variablen und Konfiguration).

Der Live-Editor

Der Live-Editor bearbeitet die Design-Token des Themes – Farben, Typografie, Abstände und Form – als Overlay direkt auf der echten Seite, mit sofortiger Vorschau.

Einschalten

Der Live-Editor ist ein Werkzeug für die Design-Phase und standardmäßig ausgeschaltet. Du aktivierst ihn in der Contao-Systemwartung über den Schalter „Frontend-Editor anzeigen“. Ist die Gestaltung abgeschlossen, schaltest du ihn dort wieder aus.

Solange er aktiviert ist, erscheint für eingeloggte Backend-Benutzer:innen auf jeder Frontend-Seite unten mittig die Dock-Pille „Theme bearbeiten“. Für Besucher:innen ohne Login bleibt das Frontend unberührt.

Vorlagen: Kobalt, Schiefer und Marmor

Am schnellsten kommst du über den Tab Vorlagen zu einem Ergebnis. TORNADO bringt drei fertige Vorlagen mit:

Vorlage	Beschreibung	Schriften	Eckenradius
Kobalt	Sanitärblau und Rot wie an der Mischbatterie, für Sanitär, Heizung und Notdienst	Open Sans, Überschriften Montserrat	12px
Schiefer	Anthrazit und Signalorange, kantig und technisch, für Sanitär, Heizung und Klima	Inter, Überschriften Sora	2px
Marmor	Fast Schwarz, Messing und Sand mit eleganter Serif, für Bäder und Ausstellungen	Manrope, Überschriften Playfair Display	6px

Ein Klick setzt alle Farben, beide Schriften und den Eckenradius. Anschließend kannst du in der Maske weiter nachjustieren. Die Farben der Vorlagen sind auf ausreichenden Kontrast geprüft.

Was sich einstellen lässt

Die Maske wird aus einer Token-Registry erzeugt. TORNADO liefert dazu eine eigene tokens.json mit, die die Basis-Registry der Theme Toolbox ergänzt. Editierbar sind:

• Markenfarbe (--color-brand) – das Türkis für Buttons, Links und Akzente
• Sekundärfarbe (--color-brand-secondary) – das Navy für Überschriften, die aktive Navigation, dunkle Buttons und die dunklen Boxen
• Akzent auf dunklem Grund (--color-brand-light) – Dachzeilen und Links in den dunklen Boxen
• Notdienst-Farbe (--color-alert) – die Notdienst-Karte, der 24/7-Hinweis im Header und Fehlermeldungen in Formularen
• Getönter Artikelhintergrund (--article-tint-background)
• Textfarbe, Gedämpfter Text, Seitenhintergrund und Rahmenfarbe
• Grundschrift, Überschriften-Schrift und Schriftschnitt der Überschriften
• Basis-Schriftgröße und Zeilenhöhe
• Basis-Abstand (--base-spacing-unit) und Spaltenabstand (--grid-gutter)
• Eckenradius (--base-border-radius) und Rahmenstärke

Alles Abgeleitete ist bewusst nicht editierbar:

• --color-brand-dark entsteht per color-mix() aus der Markenfarbe und färbt die Hover-Zustände von Links und Buttons – änderst du die Markenfarbe, zieht die dunkle Variante automatisch nach
• die dunklen Boxen (--article-dark-background) folgen der Sekundärfarbe
• die Radien von Formularfeldern, kleinen Karten und Abschnitten leiten sich vom Eckenradius ab
• Buttons und Navigation erscheinen immer als Pille, deshalb gibt es keinen eigenen Button-Radius

So bleibt das Farbsystem in sich stimmig: Wenige Grundfarben genügen, der Rest folgt.

Speichern

Während des Gestaltens werden die Werte nur zur Laufzeit als CSS Custom Properties ins :root geschrieben – es ist also noch nichts gespeichert. Erst „Übernehmen“ schreibt server-seitig.

Dabei ersetzt der Editor die geänderten Variablen direkt an Ort und Stelle in deiner Custom-_variables.scss – genau so, wie du es von Hand tun würdest. Nur tatsächlich geänderte Werte werden geschrieben, unberührte Token behalten ihren Ausdruck. Danach wird das Theme neu kompiliert.

Das hat einen angenehmen Nebeneffekt: Deine Gestaltung ist Teil der Theme-Quelle – sichtbar, reviewbar und deploybar. Rückgängig machen lässt sie sich im Backend über Theme-Toolbox » Theme Editor » Styles (Diff und „Original wiederherstellen“).

Eingehende Werte werden gegen die Registry geprüft – unbekannte Properties werden verworfen und Werte auf ihren erlaubten Bereich begrenzt.

Zum Kontrast: Während du gestaltest, warnt der Live-Editor, sobald ein Kontrast nicht reicht – korrigiert wird dabei nichts. Beim Übernehmen hebt die Theme Toolbox Textfarbe und gedämpften Text auf ausreichenden Kontrast zum Seitenhintergrund an: bei den Vorlagen immer, bei eigenen Werten nur, wenn du die Textfarbe und den Seitenhintergrund in derselben Sitzung geändert hast. Markenfarbe und Rahmenfarbe passt sie nie an. Ihren Kontrast prüfst du selbst.

Schriften im Live-Editor

Der Font-Picker nutzt dieselbe Google-Fonts-Funktion wie der Theme Editor: Die Schrift wird einmalig server-seitig heruntergeladen, self-hosted abgelegt und per @font-face registriert. Der Browser deiner Besucher:innen lädt ausschließlich die lokale Datei – es entsteht kein Google-Request im Frontend und damit kein DSGVO-Problem.

Geladen werden genau die Schnitte, die TORNADO nutzt: 400 (Fließtext), 600 (Navigation), 700 (Buttons und Links) und 800 (Überschriften). Wählst du für die Überschriften einen anderen Schriftschnitt, lädt die Theme Toolbox ihn zusätzlich. Bietet eine Schrift einen Schnitt nicht an, wird er übersprungen, und der Browser nimmt den nächstgelegenen.

Theme-Anpassungen über den Theme Editor

Alles, was über Design-Token hinausgeht, machst du im Backend unter Theme-Toolbox » Theme Editor.

In der Dateibaum-Ansicht erkennst du sofort, welche Dateien projektspezifisch angepasst sind:

• Fett gedruckt mit Sternchen (*) = Variante – die Datei weicht vom Original ab und wird aus layout/custom/ geladen
• Normale Schrift = unveränderte Originaldatei aus layout/tornado-theme/

Wenn du eine Datei öffnest, kannst du:

• den Inhalt direkt im Editor bearbeiten
• über Unterschiede anzeigen den Diff zwischen Original und Variante einsehen
• über Original wiederherstellen die Variante entfernen, sodass wieder die Originaldatei verwendet wird

Hinweis: Änderungen sind unmittelbar im Frontend sichtbar. Du musst weder den Cache leeren, noch unter Systemwartung die Option „Skript Cache umgehen (im Produktivbetrieb)“ aktivieren. Der Compiler der Theme Toolbox erkennt Änderungen an den SCSS-Dateien automatisch.

Eigene SCSS-Dateien hinzufügen

Für eigene Komponenten – z.B. ein Modal – legst du im Theme Editor einfach eine neue SCSS-Datei an, etwa components/_modal.scss. Anschließend ergänzt du sie in der default.scss:

// COMPONENTS
// …
@import 'components/notes';
@import 'components/modal';

Sowohl deine neue Datei als auch die geänderte default.scss werden unter layout/custom/ gespeichert. Die Theme Toolbox sucht jede importierte Datei zuerst dort und erst danach im Original – deshalb reicht der Pfad relativ zum SCSS-Ordner.

Wichtig: Sobald eine Variante der default.scss existiert, verwendet die Toolbox nur noch diese. Bringt ein Theme-Update neue Dateien mit, die in der Original-default.scss importiert werden, musst du sie in deiner Variante nachtragen. Über Unterschiede anzeigen siehst du nach einem Update schnell, was sich geändert hat.

Alternative: Direkt im Code-Editor

Wenn dir der Theme Editor nicht zusagt, kannst du sämtliche Anpassungen auch direkt auf Dateiebene unter layout/custom/ mit dem Code-Editor deiner Wahl vornehmen. Auch dann sind die Änderungen unmittelbar im Frontend sichtbar.

Variablen und Konfiguration

Das Aussehen von TORNADO wird im Wesentlichen über zwei Dateien gesteuert:

Datei	Inhalt
_variables.scss	CSS Custom Properties (CSS-Variablen) für Farben, Schriften, Abstände, Größen usw. Sie wirken zur Laufzeit im Browser – genau diese Werte bearbeitet auch der Live-Editor.
_config.scss	Sass-Variablen, die beim Kompilieren ausgewertet werden, z.B. die maximale Seitenbreite und die Breakpoints

Die _config.scss

In der _config.scss legt TORNADO diese Werte fest:

$wrapper-max: 75.3em;

$additional_breakpoints: (
  menu: (
    min:        56.25em, // 900px
    max:        (56.25em - $max-diff), // 899px
  )
);

$nav-mobile-number-of-menu-points: 6;

• $wrapper-max – die maximale Breite des Inhaltsbereichs, 1280 Pixel inklusive Seitenabstand
• $breakpoints – TORNADO nutzt die Breakpoints des Nutshell Frameworks: xs unter 550 Pixel, sm ab 550, md ab 768, lg ab 940 und xl ab 1100 Pixel
• $additional_breakpoints – TORNADO definiert hier den Breakpoint menu: Ab 56.25em (900px) passt die Hauptnavigation neben Logo und Notdienst-Nummer, darunter erscheint das mobile Menü. Hat dein Menü viele Punkte, erhöhst du den Wert.
• $nav-mobile-number-of-menu-points – für so viele Menüpunkte wird im mobilen Menü eine gestaffelte Einblend-Animation erzeugt. Hat deine Hauptnavigation mehr Punkte, erhöhst du den Wert.

Variablen aus dem Nutshell Framework überschreiben

TORNADO basiert auf dem Nutshell Framework, das viele weitere Variablen definiert. Beide Dateien sind so aufgebaut, dass du jede Nutshell-Variable im Theme überschreiben kannst – ohne assets/nutshell/ anzufassen:

• Sass-Variablen: Die _config.scss setzt zuerst die TORNADO-Werte und importiert am Ende die Nutshell-Konfiguration. Dort sind alle Werte mit !default definiert und greifen nur, wenn das Theme sie nicht bereits gesetzt hat. Eigene Werte ergänzt du deshalb immer oberhalb des @import am Ende der Datei.
• Custom Properties: Die _variables.scss importiert zuerst die Nutshell-Variablen und überschreibt sie anschließend im :root-Block. Möchtest du eine Nutshell-Variable ändern, die TORNADO bisher nicht anpasst, ergänzt du sie einfach im :root-Block deiner _variables.scss.

Welche Variablen es gibt, siehst du in assets/nutshell/scss/_config.scss und assets/nutshell/scss/_variables.scss – nur zum Nachschlagen, nicht zum Bearbeiten.

Erste Anpassungen vornehmen

1. Farben anpassen

Was du im Live-Editor klickst, kannst du genauso gut direkt in der _variables.scss schreiben. Ganz oben im :root-Block stehen im Abschnitt GENERAL/COLORS die Grundfarben:

// GENERAL/COLORS
--color-brand: #0a7682;                 // Türkis: Buttons, Links, Akzente
--color-brand-secondary: #0f2b46;       // Navy: Überschriften, dunkle Flächen
--color-brand-light: #6fd0d8;           // Akzent auf dunklem Grund
--color-alert: #c4452e;                 // Notdienst, Fehlermeldungen
--color-text: #0f2b46;
--color-gray: #4d6275;                  // gedämpfter Fließtext
--color-page-background: #f4f7f9;
--base-border-color: #e1e8ee;
--article-tint-background: #e3f3f4;     // Abschnitt „So einfach geht's“

Um die Markenfarbe zu ändern, ersetzt du

--color-brand: #0a7682;

durch deinen Farbwert:

--color-brand: #e30613;

Diese Zeilen liest und schreibt auch der Live-Editor. Trage hier deshalb Farbwerte ein und keine Verweise auf andere Variablen, wenn du weiter mit dem Live-Editor arbeiten möchtest.

Die Sekundärfarbe --color-brand-secondary trägt unter anderem die Überschriften (--headings-color), die aktive Navigation und die dunklen Boxen. Wenn du nur --color-brand änderst, bleiben Überschriften und Boxen navy.

Wichtig: Achte auf ausreichenden Kontrast. Buttons tragen weiße Schrift auf der Markenfarbe, Links stehen in der Markenfarbe auf hellem Grund. Für Text brauchst du mindestens 4,5:1. Der Live-Editor warnt dich, wenn ein Kontrast nicht reicht. Bei Änderungen direkt in der Datei prüfst du selbst.

2. Artikelhintergründe anpassen

Möchtest du einen Artikelhintergrund unabhängig von den Grundfarben ändern, findest du weiter unten in der _variables.scss den Abschnitt BASE/ARTICLE:

// BASE/ARTICLE
--article-surface-background: var(--color-surface);
--article-dark-background: var(--color-brand-secondary);
--article-dark-text: var(--color-text-inverted);

Diese Variablen werden in base/_article.scss verwendet:

• --article-surface-background – der weiße Abschnitt über die volle Breite (Klasse article--surface)
• --article-tint-background – die getönte Box (Klasse article--tint), steht oben bei den Grundfarben
• --article-dark-background und --article-dark-text – die dunklen Boxen (Klasse article--dark). Sie folgen der Sekundärfarbe. Wer die Boxen unabhängig davon einfärben will, überschreibt die Variable direkt:

--article-dark-background: #1d2b22;

Solltest du mit der Anpassung der Variablen nicht ans Ziel kommen, hast du immer noch die Möglichkeit, in der _article.scss direkt Anpassungen vorzunehmen.

3. Schriften anpassen

TORNADO verwendet die Figtree in den Schnitten 400, 600, 700 und 800 für Fließtext und Überschriften. Sie wird lokal vom eigenen Server geladen.

Neben dem Font-Picker im Live-Editor bietet auch der Theme Editor einen eigenen Bereich für Webfonts mit zwei Wegen:

Variante A: Aus dem Google-Webfont-Katalog installieren

Im Theme Editor lässt sich der Google-Webfont-Katalog direkt durchsuchen. Mit zwei Klicks wird die gewünschte Schrift installiert – die Theme Toolbox lädt die Font-Dateien automatisch nach layout/custom/fonts und ergänzt die passende @font-face-Deklaration in base/_fonts.scss. Es wird keine Verbindung zu Google-Servern aufgebaut (DSGVO-konform).

Variante B: Eigene Webfonts manuell hochladen

Alternativ lassen sich Schriftdateien (woff2, ttf, woff) manuell hochladen – z.B. lizenzierte Schriften aus deinem Bestand. Lade dann die Schnitte hoch, die TORNADO nutzt (400, 600, 700 und 800), sonst weicht der Browser auf den nächstgelegenen Schnitt aus.

Schriftart in den Variablen aktivieren

In beiden Fällen muss die Schrift anschließend noch in der _variables.scss eingetragen werden, damit sie auch verwendet wird:

// GENERAL/FONTS
--base-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

// BASE/TYPE
--headings-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--headings-font-weight: 800;

Ersetze einfach 'Figtree' durch den Namen deiner installierten Schriftart – für Fließtext und Überschriften getrennt, wenn du zwei Schriften verwenden möchtest. Nicht mehr benötigte Schriften lassen sich im Theme Editor über den Button „Ungenutzte @font-face bereinigen“ entfernen.

4. Logo austauschen

Das Logo liegt als layout/tornado-theme/img/logo.svg im Theme. Im Theme Editor ersetzt du es im Tab Bilder durch dein eigenes Logo (siehe nächster Abschnitt). Der Dateiname bleibt logo.svg.

Eingebunden wird das Logo im Frontend-Modul Content - Logo (bzw. in den Varianten mit Zusatz One-Page und Styleguide). Dort stehen Breite und Höhe des Logos (131 × 40 Pixel). Hat dein Logo ein anderes Seitenverhältnis, passt du die beiden Werte im Modul an.

Den Markennamen im Footer änderst du im Modul Content - Copyright.

5. Icons und Bilder ersetzen

Im Theme Editor gibt es einen eigenen Tab Bilder, in dem sämtliche Bilder und Icons aus layout/tornado-theme/img verwaltet werden. Erlaubt sind JPG, JPEG, PNG, GIF, SVG, WebP und AVIF bis 5 MB.

Datei	Verwendung
logo.svg	Logo im Header
icon-phone.svg	Telefon-Icon der Notdienst-Karte
icon-file-download.svg	Datei-Icon der Downloads

• Ersetzen – die neue Datei wird unter layout/custom/img abgelegt, das Original bleibt unberührt; in der Vorschau werden beide nebeneinander dargestellt.
• Hinzufügen – neue Bilder und Unterordner lassen sich direkt im Custom-Bereich anlegen.
• Umbenennen & Löschen – beim Löschen einer Überschreibung wird automatisch wieder das Original verwendet.

Die beiden Icons werden per CSS-Maske eingefärbt. Für einen Ersatz eignet sich deshalb ein einfarbiges SVG, seine Farbe spielt keine Rolle.

6. Eigene JavaScript-Varianten

Wie bei den SCSS-Dateien lassen sich auch JavaScript-Dateien als Variante anlegen. Die Theme Toolbox verwendet dann automatisch deine Variante aus layout/custom/js statt der Originaldatei. TORNADO liefert vier Skripte mit:

Datei	Aufgabe
navigation.js	Mobiles Menü, Untermenüs der Hauptnavigation, Abstand der Sprungziele zum Sticky Header
forms.js	Fokus auf Bestätigung bzw. ersten Fehler nach dem Absenden eines Ajax-Formulars
dialog.js	Öffnet Referenzen und Nachrichten in einem Dialog, statt die Seite zu wechseln
hero-video.js	Button zum Anhalten des Hintergrundvideos im Hero-Element; bei „Bewegung reduzieren“ startet das Video erst per Klick

Auch hier stehen Diff-Ansicht und Revert-Funktion zur Verfügung. Zusätzlich kannst du eigene Skripte anlegen und im Seitenlayout einbinden.

7. Notdienst-Nummer und Inhalte im Header

Die Notdienst-Nummer im Header ist das Frontend-Modul Content - Notdienst. Trage dort deine Nummer zweimal ein: im Link als tel: mit Ländervorwahl (z.B. tel:+49123456789) und als sichtbaren Text. Die Nummer steht auf allen Bildschirmbreiten im Header.

Templates anpassen mit dem Template Studio

TORNADO liefert seine Templates als Twig aus dem Theme-Bundle aus. Anpassungen nimmst du über das Template Studio im Contao-Backend vor.

So gehst du vor:

1. Öffne im Backend Layout » Template Studio.
2. Suche das Template, das du anpassen möchtest.
3. Lege eine projektspezifische Kopie an und passe sie im Template Studio an.

Welche Templates TORNADO selbst mitbringt und was darin geändert ist, steht unter Angepasste Templates. Eine Einführung in Twig-Templates für Contao findest du in der offiziellen Contao-Dokumentation.

Überschriften gestalten

Dachzeile

Viele Überschriften der Demo haben eine kleine farbige Zeile darüber. Das ist das Feld Dachzeile, das das Nutshell Framework in den Inhaltselementen Überschrift und Text ergänzt. Die Farbe kommt aus --supline-color (Markenfarbe, in dunklen Boxen der Akzent auf dunklem Grund).

Farbige Wörter mit

Contao erlaubt im Überschriftenfeld kein HTML. Um einzelne Wörter in der Markenfarbe hervorzuheben, bringt TORNADO den Insert-Tag mark mit:

Heizung, die  hält

Ausgegeben wird <span class="mark">angenehm warm</span>. Die Farbe steuerst du über --mark-color.

Hilfsklassen verwenden

Die meisten Klassen sind im Klassen-Manager der Theme Toolbox hinterlegt, du wählst sie also direkt in den Artikeln und Inhaltselementen aus. Klassen ohne Eintrag im Klassen-Manager trägst du in den Experteneinstellungen ins Feld CSS-Klasse ein. Das gilt auch für Frontend-Module, zum Beispiel nav nav--main nav--mobile in der Hauptnavigation.

Klassen für Abstände

Standardmäßig haben alle im Theme gestalteten Elemente und Module einen Abstand, der auf der --base-spacing-unit basiert. Auch Artikel (.mod_article) haben standardmäßig einen Abstand nach oben und unten.

Abstände lassen sich über folgende Klassen realisieren:

• m-t-0 bis m-t-5 (Außenabstand oben 0 bis 5)
• m-b-0 bis m-b-5 (Außenabstand unten 0 bis 5)
• p-t-0 bis p-t-5 (Innenabstand oben 0 bis 5)
• p-b-0 bis p-b-5 (Innenabstand unten 0 bis 5)

Die Abstände basieren auf der --base-spacing-unit und werden mit dem jeweiligen Wert multipliziert. Also ist p-t-1 = (--base-spacing-unit * 1) und p-t-5 = (--base-spacing-unit * 5). An Artikeln ändern p-t-* und p-b-* den Abstand zum nächsten Abschnitt, auch bei den Boxen.

Im Klassen-Manager findest du die Gruppe Außenabstände bei Inhaltselementen und Formularfeldern, die Gruppe Innenabstände nur bei Artikeln. Brauchst du an einem Inhaltselement einen Innenabstand, trägst du die Klasse ins Feld CSS-Klasse ein.

Klassen für Artikel

In den Artikeleinstellungen wählst du in der Gruppe Varianten Hintergrund und Form eines Abschnitts:

Klasse	Bezeichnung im Klassen-Manager	Wirkung
article--hero	Hero	Randlos mit schmalem Abstand zum Fensterrand, für das Hero-Element
article--surface	Artikel weiß	Weißer Abschnitt über die volle Breite
article--tint	Box getönt	Getönte Box mit abgerundeten Ecken in Inhaltsbreite
article--dark	Box dunkel	Dunkle Box, etwas breiter als der Inhalt; Überschriften, Links und Fokus passen sich an
article--dark article--page-head	Seitenkopf (dunkel)	Seitenkopf der Unterseiten, Text zentriert
article--dark article--cta	Box dunkel, Inhaltsbreite	Dunkle Box für einen Hinweis mit Button

In der Gruppe Breite stehen:

• article-md-10 article-start-md-2 – ab Tablet 10 von 12 Spalten, mittig
• article-md-8 article-start-md-3 – ab Tablet 8 von 12 Spalten, mittig, gut lesbar für längere Texte
• article--full – volle Fensterbreite ohne Innenabstand

Die Breitenklassen folgen dem Muster article-[viewport]-[spalten] und article-start-[viewport]-[spalte], du kannst also auch eigene Kombinationen eintragen, z.B. article-lg-6 article-start-lg-4.

Klassen für Elemente und Module

Gruppe	Klasse	Wirkung
Überschriften	heading--center	Überschrift zentriert
Überschriften	heading--1, heading--2, heading--3	Überschrift in der Größe einer h1, h2 bzw. h3, unabhängig von der Überschriftenebene
Text	text--chips	Liste als Chips mit Haken
Text, Ausrichtung	text--center	Text oder Link zentriert
Hero	hero--text-right	Textbox rechts statt links, wenn das Motiv links im Bild liegt
Card	card--alert	Hervorgehobene Karte in der Notdienst-Farbe
Slider	slider--testimonials	Kundenstimmen mit Pfeilen und Zähler unten
Reihe Start/Ende	steps	Text-Elemente werden zu nummerierten Ablauf-Schritten
Reihe Start/Ende	split	Großer Spaltenabstand ab 940 Pixel, z.B. Kontaktdaten und Formular
Galerie	gallery--logos	Partner-Logos
Galerie	masonry	Galerie in Spalten (Masonry)
Galerie, Modul	gallery--references	Referenzen mit Bildunterschrift und Pfeil
Links	btn btn--primary, btn btn--secondary, btn btn--tertiary	Button primär, sekundär, tertiär
Formular	form--contact	Kontaktformular in einer Box
Rahmen	border-top, border-bottom	Linie oben bzw. unten

Im Rich-Text-Editor findest du außerdem unter Theme Styles die Buttons Primary, Secondary und Tertiary sowie den Einleitungstext Text Lead.

Weitere Hilfsklassen ohne Eintrag im Klassen-Manager: block--center (Element mit fester Breite mittig) und text--inverted (helle Schrift auf dunklem Grund).

Spalten mit der Grid-Erweiterung

Für Spalten setzt du ein Element Reihe Start vor und Reihe Ende hinter die Elemente. Jedes Element dazwischen bekommt im Feld Grid-Spalten seine Breite im 12er-Raster, je Breakpoint, z.B. col-md-6 col-lg-4 für drei Spalten ab 940 Pixel. Ohne Angabe nimmt ein Element die ganze Breite. Abstände zwischen Spalten und Reihen kommen automatisch. Karten in einer Reihe sind gleich hoch.