# ThemeWare® CSS-Klassen für Erlebniswelten (Übersicht)

## Animationen – CSS-Animationen für CMS-Blöcke

<table data-full-width="false"><thead><tr><th>Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-animation</strong></td><td>Block</td><td>Aktiviert die konfigurierte CSS-Animation für den entsprechenden CMS-Block.</td></tr></tbody></table>

***

## Boxed-Klassen – CSS-Klassen für Fullwidth-Sektionen

<table data-full-width="false"><thead><tr><th>Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-block-boxed</strong></td><td>Block</td><td>Setzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px).</td></tr><tr><td><strong>twt-cms-boxed-content</strong></td><td>Sektion</td><td>Setzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration.</td></tr></tbody></table>

***

## ThemeWare® CMS-Styling

| CSS-Klasse                         | Bereich | Funktionsbeschreibung                                                                                                                      |
| ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **twt-cms-block**                  | Block   | Der entsprechende CMS-Block erhält vordefiniertes Styling (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten).                        |
| **twt-cms-block-background**       | Block   | Der entsprechende CMS-Block erhält die Hintergrundfarbe vom vordefinierten Styling.                                                        |
| **twt-cms-block-border**           | Block   | Der entsprechende CMS-Block erhält die Rahmenfarbe vom vordefinierten Styling.                                                             |
| **twt-cms-block-margin**           | Block   | Der entsprechende CMS-Block erhält den Außenabstand nach unten vom vordefinierten Styling.                                                 |
| **twt-cms-block-reset**            | Block   | Das vordefinierte Styling wird auf den entsprechenden CMS-Block nicht angewendet (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten). |
| **twt-cms-block-reset-background** | Block   | Die Hintergrundfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.                                                 |
| **twt-cms-block-reset-border**     | Block   | Die Rahmenfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.                                                      |
| **twt-cms-block-reset-margin**     | Block   | Der Außenabstand nach unten vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.                                          |
| **twt-cms-reset-padding**          | Section | Diese Klasse entfernt doppelte Paddings in Layouts mit Sidebar.                                                                            |

***

## Column-Klassen – Spaltenabstände in CMS-Blöcken

<table data-full-width="false"><thead><tr><th>CSS-Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-col-padding-0</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel.</td></tr><tr><td><strong>twt-cms-col-padding-5</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel.</td></tr><tr><td><strong>twt-cms-col-padding-10</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel.</td></tr><tr><td><strong>twt-cms-col-padding-15</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel.</td></tr><tr><td><strong>-</strong></td><td>-</td><td>20 Pixel ist der Standard Spalten-Abstand.</td></tr><tr><td><strong>twt-cms-col-padding-25</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel.</td></tr><tr><td><strong>twt-cms-col-padding-30</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel.</td></tr><tr><td><strong>twt-cms-col-padding-35</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel.</td></tr><tr><td><strong>twt-cms-col-padding-40</strong></td><td>Block</td><td>Setzt den Innenabstand für Spalten in CMS-Blöcken auf 40 Pixel.</td></tr></tbody></table>

### Mobile Darstellung

<table data-full-width="false"><thead><tr><th>CSS-Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>-</strong></td><td>-</td><td>0 Pixel ist der Standard Spalten-Abstand.</td></tr><tr><td><strong>twt-cms-col-margin-5</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-10</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-15</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-20</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-25</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-30</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-35</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-40</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-45</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-50</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-55</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-60</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-65</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-70</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-75</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel.</td></tr><tr><td><strong>twt-cms-col-margin-80</strong></td><td>Block</td><td>Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 Pixel.</td></tr></tbody></table>

***

## Gap-Klassen – Abstände in CMS-Blöcken

<table data-full-width="false"><thead><tr><th>Klasse</th><th>Bereich</th><th>Funktionsbeschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-grid-gap-0</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 0 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-5</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 5 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-10</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 10 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-15</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 15 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-20</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 20 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-25</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 25 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-30</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 30 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-35</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 35 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-40</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 40 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-45</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 45 Pixel.</td></tr><tr><td><strong>twt-cms-grid-gap-50</strong></td><td>Block</td><td>Setzt den Abstand in CMS-Blöcken auf 50 Pixel.</td></tr></tbody></table>

***

## Headline-Klassen – Überschriften in CMS-Text-Blöcken

<table data-full-width="false"><thead><tr><th>CSS-Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-headline-bath</strong></td><td>Block</td><td>Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken für verschiedene Themes.</td></tr><tr><td><strong>twt-cms-headline-classic</strong></td><td>Block</td><td>Stylt die Headline in CMS-Blöcken wie in Shopware 5 Einkaufswelten.</td></tr><tr><td><strong>twt-cms-headline-clean</strong></td><td>Block</td><td>Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Clean-Theme.</td></tr><tr><td><strong>twt-cms-headline-flower</strong></td><td>Block</td><td>Stylt die Headline in CMS-Blöcken wie im Flower-Theme.</td></tr><tr><td><strong>twt-cms-headline-kids</strong></td><td>Block</td><td>Stylt die Headline in CMS-Blöcken wie im Kids-Theme.</td></tr><tr><td><strong>twt-cms-headline-ladieswear</strong></td><td>Block</td><td>Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Ladieswear-Theme.</td></tr><tr><td><strong>twt-cms-headline-plants</strong></td><td>Block</td><td>Stylt die Headline in CMS-Blöcken wie im Ladieswear-Theme.</td></tr></tbody></table>

***

## Image-Klassen – Dekorationsklassen für Bilder

<table data-full-width="false"><thead><tr><th>Klasse</th><th>Bereich</th><th>Funktionsbeschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-image-border</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.</td></tr><tr><td><strong>twt-cms-image-border-semi</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen 12px dicken, halbtransparenten Rahmen hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-level-1</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-level-2</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-level-3</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-level-4</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-level-5</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-lg</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen auffälligen Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-box-shadow-sm</strong></td><td>Block</td><td>Fügt Bildern in einem CMS-Block einen dezenten Schlagschatten hinzu.</td></tr><tr><td><strong>twt-cms-image-rounded</strong></td><td>Block</td><td>Rundet Bilder in einem CMS-Block ab.</td></tr></tbody></table>

***

## Hover-Klassen – Hover-Effekte für Bilder

<table data-full-width="false"><thead><tr><th>Klasse</th><th>Bereich</th><th>Funktionsbeschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-image-hover-blur</strong></td><td>Block</td><td>Dreht Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-blur-out</strong></td><td>Block</td><td>Dreht Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-flash</strong></td><td>Block</td><td>Lässt Bilder mit einem Link aufblitzen (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-grayscale</strong></td><td>Block</td><td>Graut Bilder mit einem Link aus (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-grayscale-out</strong></td><td>Block</td><td>Färbt graue Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-opacity</strong></td><td>Block</td><td>Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-rotate</strong></td><td>Block</td><td>Dreht Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-rotate-left</strong></td><td>Block</td><td>Dreht Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-rotate-right</strong></td><td>Block</td><td>Dreht Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-shine</strong></td><td>Block</td><td>Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-zoom</strong></td><td>Block</td><td>Vergrößert Bilder mit einem Link (Hover-Effekt).</td></tr><tr><td><strong>twt-cms-image-hover-zoom-out</strong></td><td>Block</td><td>Verkleinert Bilder mit einem Link (Hover-Effekt).</td></tr></tbody></table>

***

## Max-width-Klassen – Breite von CMS-Sektionen/-Blöcken

<table data-full-width="false"><thead><tr><th width="249.33333333333331">Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>twt-cms-max-width</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration.</td></tr><tr><td><strong>twt-cms-max-width-500</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 500px.</td></tr><tr><td><strong>twt-cms-max-width-576</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 576px.</td></tr><tr><td><strong>twt-cms-max-width-600</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 600px.</td></tr><tr><td><strong>twt-cms-max-width-700</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 700px.</td></tr><tr><td><strong>twt-cms-max-width-768</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 768px.</td></tr><tr><td><strong>twt-cms-max-width-800</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 800px.</td></tr><tr><td><strong>twt-cms-max-width-900</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 900px.</td></tr><tr><td><strong>twt-cms-max-width-992</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 992px.</td></tr><tr><td><strong>twt-cms-max-width-1000</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1000px.</td></tr><tr><td><strong>twt-cms-max-width-1100</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1100px.</td></tr><tr><td><strong>twt-cms-max-width-1200</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1200px.</td></tr><tr><td><strong>twt-cms-max-width-1300</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1300px.</td></tr><tr><td><strong>twt-cms-max-width-1400</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1400px.</td></tr><tr><td><strong>twt-cms-max-width-1500</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1500px.</td></tr><tr><td><strong>twt-cms-max-width-1600</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1600px.</td></tr><tr><td><strong>twt-cms-max-width-1700</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1700px.</td></tr><tr><td><strong>twt-cms-max-width-1800</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1800px.</td></tr><tr><td><strong>twt-cms-max-width-1920</strong></td><td>Sektion, Block</td><td>Setzt die maximale Breite auf 1920px.</td></tr></tbody></table>

***

## Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke

<table data-full-width="false"><thead><tr><th>Klasse</th><th>Bereich</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>twt-m-1</strong></td><td>Sektion, Block</td><td>Außenabstand, 10px (margin)</td></tr><tr><td><strong>twt-mt-2</strong></td><td>Sektion, Block</td><td>Außenabstand oben, 20px (margin-top)</td></tr><tr><td><strong>twt-me-3</strong></td><td>Sektion, Block</td><td>Außenabstand rechts, 30px (margin-right)</td></tr><tr><td><strong>twt-mb-4</strong></td><td>Sektion, Block</td><td>Außenabstand unten, 40px (margin-bottom)</td></tr><tr><td><strong>twt-ms-5</strong></td><td>Sektion, Block</td><td>Außenabstand links, 50px (margin-left)</td></tr><tr><td><strong>twt-mx-6</strong></td><td>Sektion, Block</td><td>Außenabstand links/rechts, 60px (margin-left, margin-right)</td></tr><tr><td><strong>twt-my-7</strong></td><td>Sektion, Block</td><td>Außenabstand oben/unten, 70px (margin-top, margin-bottom)</td></tr><tr><td><strong>twt-my-md-8</strong></td><td>Sektion, Block</td><td>Außenabstand oben/unten, 80px ab 768px (margin-top, margin-bottom)</td></tr><tr><td><strong>twt-my-n-9</strong></td><td>Sektion, Block</td><td>Außenabstand oben/unten, -90px (margin-top, margin-bottom)</td></tr><tr><td><strong>twt-p-1</strong></td><td>Sektion, Block</td><td>Innenabstand, 10px (margin)</td></tr><tr><td><strong>twt-pt-2</strong></td><td>Sektion, Block</td><td>Innenabstand oben, 20px (margin-top)</td></tr><tr><td><strong>twt-pe-3</strong></td><td>Sektion, Block</td><td>Innenabstand rechts, 30px (margin-right)</td></tr><tr><td><strong>twt-pb-4</strong></td><td>Sektion, Block</td><td>Innenabstand unten, 40px (margin-bottom)</td></tr><tr><td><strong>twt-ps-5</strong></td><td>Sektion, Block</td><td>Innenabstand links, 50px (margin-left)</td></tr><tr><td><strong>twt-px-6</strong></td><td>Sektion, Block</td><td>Innenabstand links/rechts, 60px (margin-left, margin-right)</td></tr><tr><td><strong>twt-py-7</strong></td><td>Sektion, Block</td><td>Innenabstand oben/unten, 70px (margin-top, margin-bottom)</td></tr><tr><td><strong>twt-py-md-8</strong></td><td>Sektion, Block</td><td>Innenabstand oben/unten, 80px ab 768px (margin-top, margin-bottom)</td></tr><tr><td><strong>twt-py-n-9</strong></td><td>Sektion, Block</td><td>Innenabstand oben/unten, -90px (margin-top, margin-bottom)</td></tr></tbody></table>

***

## Overlay-Klassen

Die Overlay-Klassen funktionieren mit Standard CMS-Blöcken von Shopware. Nutzt du diese Klassen in einer CMS-Sektion wird der Hintergrund von einer Farbfläche überlagert.

| CSS-Klasse                                   | Bereich | Funktionsbeschreibung                                                                                                                                                 |
| -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **twt-custom-cms-element-overlay-primary**   | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.                |
| **twt-custom-cms-element-overlay-secondary** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.              |
| **twt-custom-cms-element-overlay-success**   | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.      |
| **twt-custom-cms-element-overlay-info**      | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. |
| **twt-custom-cms-element-overlay-warning**   | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.     |
| **twt-custom-cms-element-overlay-danger**    | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.      |
| **twt-custom-cms-element-overlay-light**     | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.                 |
| **twt-custom-cms-element-overlay-dark**      | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.              |

***

## Sonstige

| CSS-Klasse    | Bereich        | Funktionsbeschreibung                                                                                                                                                                                                                                                                                         |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **container** | Block, Sektion | In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops. |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten-uebersicht.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.