Zum Nachschlagen

Spickzettel & Glossar

Die häufigsten CSS-Klassen für das Feld CSS-Klasse und eine Erklärung der wichtigsten Begriffe. Die vollständige technische Referenz ist bundle/cheat-sheet.md.

Hintergründe

`bg-surface-1` / `-2` / `-3`	Grundfläche · abgesetzt · stärker abgesetzt
`bg-primary` / `bg-secondary`	Marken- bzw. Zweitfarbe (auch `-light`)
`bg-gradient-subtle` / `-primary` / `-secondary` / `-dark` / `-animated`	Verläufe
`bg-image` / `bg-image-dark` / `-light` / `-brand` / `-secondary` / `-gradient`	Hintergrundbild mit Overlay (Feld „Hintergrundbild“ nötig)
`bg-blur`	Zusatz: Hintergrundbild weichzeichnen
`bg-none`	eine geerbte Fläche entfernen

Stil

`style-card`	Karte: Fläche, Rahmen, Rundung, Polsterung, Schatten
`style-interactive-card`	Karte, hebt sich beim Überfahren
`style-pop`	federnder Hover (leichtes Größer-Werden) – auf Karte, Bild oder Button
`style-tile`	Kachel: Fläche + Polsterung, ohne Rundung/Schatten
`media-card`	auf einer Elementgruppe mit Bild oben: Bild randlos, Rest gepolsterter Körper
`style-glass` / `style-glass-dark`	Milchglas (hell / dunkel) – auf Bild-/Farbflächen
`style-shadow` / `style-rounded` / `style-squircle`	nur Schatten · nur Rundung · sehr weiche Ecken
`shadow-sm` / `-md` / `-lg` / `shadow-none`	Schatten-Stufen
`glow` / `glow-sm` / `-md` / `-lg` / `glow-none`	farbiges Leuchten statt Schatten (Farbe/Stärke im Studio)
`text-glow` / `-sm` / `-md` / `-lg`	Leuchten um die Schrift
`border-primary` / `-secondary` / `border-strong` / `border-none`	farbiger Rand · dicker · keiner
`border-top` / `-bottom` / `-left` / `-right`	Linie an einer Seite (frei kombinierbar)
`style-divider`	waagerechte Trennlinie (Border oben)
`cards-solid` / `cards-primary` / `cards-secondary`	auf die Sektion: Glas-Karten darin deckend machen (für dunkle Bild-Sektionen)
`dividers-v`	auf die Elementgruppe: senkrechte Trennlinien zwischen Spalten
`accordion--cards` / `--filled` / `--accent`	Akkordeon-Stile (aus `theme.css`)

Textfarbe im Bereich

`style-light`	weißer Text – für dunkle Hintergründe
`text-on-light`	dunkler Text – für helle Hintergründe
`color-primary` / `color-secondary`	Text der Sektion in Marken- / Zweitfarbe
`text-muted` / `text-primary` / `text-secondary`	Farbe nur für dieses eine Element (Überschrift + Text darin)
`links-plain` / `links-hover-underline` / `links-underline`	Link-Unterstrich in diesem Bereich: nie / beim Überfahren / immer – schaltet dort auch den Hover-Effekt der Persona ab

Typografie

`display-1` / `-2` / `-3` / `display-hero`	Hero-Titel-Größen
`lead`	größerer Einleitungsabsatz
`eyebrow` / `section-label` / `section-index` / `badge`	kleine Versalzeile · Bereichs-Label · großer Kicker · Chip
`pull-quote`	übergroßes, mittiges Aussage-Zitat
`text-sm` … `text-3xl`	Textgröße (wirkt auf Überschrift + Text im Element)
`font-light` … `font-black`	Schriftstärke
`tracking-tight` / `tracking-wide` / `tracking-widest`	Laufweite
`leading-none` … `leading-loose`	Zeilenhöhe (am Element, wirkt auf Überschrift + Text darin)
`text-balance` / `text-pretty` / `text-truncate`	ausgewogener Umbruch · schöner Umbruch · eine Zeile mit „…“
`measure-45` … `measure-70` / `measure` / `measure-none`	Zeilenlänge begrenzen (Zeichen) bzw. Überschriften-Maß an/aus
`prose` / `prose--sm` / `prose--lg`	angenehmer Lese-Rhythmus für lange Texte

Layout & Ausrichtung

`container--sm` … `container--2xl` / `container--full`	Inhaltsbreite dieser Sektion enger / voll
`section--bleed`	Sektion über die volle Fensterbreite (mit `section`, ohne Seitenspalte)
`layout-columns-2/3/4/6`	gleich breite Spalten (stapeln auf dem Handy)
`layout-columns-asymmetric` / `--reverse`	2:1 bzw. 1:2
`layout-feature`	Text + Bild, zentriert, großer Abstand
`layout-sidebar` / `--left`	Hauptinhalt + schmale Seitenspalte
`layout-auto-grid`	so viele Spalten, wie passen
`layout-stack` / `layout-row`	Kinder gestapelt / in einer Zeile (Zusatz `row-spread`)
`col-span-2` … `col-span-full`	an einem einzelnen Element im Spalten-Layout: über mehrere Spalten ziehen
`no-stack`	Modifier: auf dem Handy nicht stapeln
`align-text-center` / `align-text-end`	Text mittig / rechts
`av-y-center` / `av-y-end`	Inhalt vertikal mittig / unten
`align-items-start` / `-center` / `-end` / `-stretch`	Ausrichtung der Spalten in der Zeile
`self-center` / `self-end`	das Element selbst mittig / rechts (Button, Bild)
`align-all-center`	beide Achsen zentrieren (Button/Icon/kleine Inhalte)
`v-center`	Inhalt nur vertikal zentrieren (Text bleibt linksbündig)
`h-full` / `grow` / `fill-stack` / `fill-stack--even`	Boxen im Raster auf gleiche Höhe bringen / den freien Platz füllen lassen
`ratio-16-9` / `-4-3` / `-3-2` / `-1-1`	festes Seitenverhältnis, Kind füllt formatfüllend
`vh-third` / `vh-half` / `vh-large` / `vh-full`	Mindesthöhe (Hero)
`layout-sticky`	Element klebt beim Scrollen (nur Desktop)
`desktop-only` / `mobile-only`	je Bildschirmgröße ein-/ausblenden
`order-first--mobile` / `order-last--mobile` / `order-1` … `order-4`	Reihenfolge ändern

Abstände

`space-box-2xs` … `space-box-xl`	Innenabstand rundum
`space-block-xs` … `space-block-2xl`	Innenabstand nur oben/unten
`space-below-xs` … `space-below-2xl` / `no-space-below`	Außenabstand nach unten
`gap-none` … `gap-2xl`	Spalten- und Reihenabstand auf dem Layout-Wrapper
`gap-row-none` … `gap-col-2xl`	nur Reihen- bzw. nur Spaltenabstand
`space-none-mobile` / `space-inline-none-mobile` / `space-block-none-mobile`	Innenabstand auf dem Handy aufheben (alle / seitlich / oben-unten)
`space-mobile-collapse`	auf dem Handy Innen- und Außenabstand der Sektion auf 0

Bilder

`image--cover`	Bild füllt seine Box formatfüllend (mit Zuschnitt)
`image-left` / `image-right`	am Text-CE: Bild schrumpft und rückt an den Rand (kein Textumfluss)
`media--wrap-left` / `media--wrap-right`	Bild mit Textumfluss (auf dem Handy blockbreit)
`image--original`	dieses Bild vom globalen Bild-Filter ausnehmen
`logo-tint`	Logo nimmt die Farben seiner Umgebung an (Schrift = Textfarbe, Zeichen = Akzent); SVG mit Teilen `logo-mark` / `logo-word`, sonst Originalfarben · PNG einfarbig · JPG nie
`shape-rounded` / `-squircle` / `-circle` / `-blob`	Bildform (am `<img>`)
`shape-border` (+ `--secondary` / `--light` / `--dark`) / `shape-shadow`	Rahmen bzw. Schatten, folgt der Form

Buttons

Setzt du bequemer über Element-Stil am Hyperlink-Element; die Klassen dahinter:

`btn`	Primär-Button (gefüllt)
`btn--secondary` / `--neutral` / `--outline` / `--outline-secondary`	Farb-/Umriss-Varianten
`btn--ghost` / `--soft` / `--dark` / `--glass`	transparent · Primär-Tint · dunkel · Milchglas
`btn--sm` / `--lg` / `--pill` / `--full` / `--icon`	Größe / Form / volle Breite / nur Symbol
`btn--shadow` / `btn--glow` / `btn--hover-flat`	Schatten / Leuchten / Abheben abschalten

Animation & Tabellen

`animate`	Element blendet beim Scrollen ein (Fade + leichtes Hochgleiten)
`animate--fade` / `--left` / `--right`	Richtung des Einblendens
`animate--stagger` / `--hero` / `--count-up`	Kinder nacheinander · beim Laden · erste Zahl zählt hoch
`table-compact` / `-comfortable` / `-spacious` / `-nowrap`	Zell-Polster einer Tabelle · Spalten nicht umbrechen

Glossar

Design-Variable / Token	Ein benannter Wert (Farbe, Abstand, Radius …), auf den das ganze Theme verweist. Name im Code: `--av-…`. Ändern = überall gleichzeitig ändern.
Design Studio	Das Schiebe-Panel im Frontend, mit dem Administratoren das Gesamtaussehen einstellen. Optionales Zusatzmodul; schreibt beim Speichern die Datei theme-vars.css. Das Theme läuft auch ohne.
Register	Ein aufklappbarer Abschnitt im Contao-Bearbeitungsformular (grauer Balken), z. B. Design, Element-Stil, Experte. Kein Browser-Tab.
Sektion	Sammelbegriff dieser Hilfe für einen Artikel oder eine Elementgruppe. Beide tragen das Register Design. Im Backend selbst gibt es das Wort „Sektion“ nicht.
Elementgruppe	Selbst ein Inhaltselement: „Elementgruppe“ einfügen, andere Elemente hineinziehen. Verhält sich wie eine kleine Sektion (eigenes Layout, eigener Hintergrund) und kann obendrein als Karte gerahmt werden.
Inhaltselement	Ein einzelner Baustein: Text, Bild, Überschrift, Button, Akkordeon … Trägt das Register Element-Stil.
Overlay	Eine halbdurchsichtige Ebene über einem Hintergrundbild, damit der Text lesbar bleibt. Dunkles Overlay → heller Text (die „-dunkel“/„-hell“-Optionen stellen die Textfarbe mit um).
Hero / Mindesthöhe	Ein großflächiger Einstiegsbereich, der mindestens einen Teil des Bildschirms hoch ist. Feld Mindesthöhe am Artikel/an der Elementgruppe.
Vorlage / Persona	Dieselbe Liste fertiger Gesamt-Looks, zwei Zugänge: als „Vorlagen“-Kacheln im Studio-Panel, und als ?persona=name in der Adresszeile (Demo). Dieselben Regler, andere Zahlen.
Utility-Klasse	Ein kurzer Name für das Feld CSS-Klasse, der eine kleine, klar umrissene Wirkung hat (z. B. `align-text-center`).
custom.css	Projekteigene Datei für Feinheiten, die die Regler nicht abdecken. Wird zuletzt geladen und gewinnt – deshalb macht ein fester Wert dort den passenden Studio-Regler wirkungslos.
Datei-Verknüpfung per Kennung	Contao merkt sich ausgewählte Bilder an einer internen Kennung, nicht am Dateipfad. Umbenennen/Verschieben ist deshalb unkritisch, nur Löschen nicht.