# 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. |