Markdown (Eisvogel)

css-klassen.md

---
title: "CSS-Klassen im Storefront"
subtitle: "25now, Ultraforce, Shopware-Default & Bootstrap 5.3"
author: ["André Fischer"]
date: "23-04-2026"
lang: de
titlepage: true
titlepage-color: "1E3A5F"
titlepage-text-color: "FFFFFF"
titlepage-rule-color: "4A90D9"
titlepage-rule-height: 4
toc: true
toc-own-page: true
numbersections: true
header-left: "CSS Storefront"
header-right: "Anwenderdokumentation"
footer-left: "André Fischer"
---

# Zweck und Leserkreis

Diese Datei beschreibt, **woher welche CSS-Klassen stammen**, wie sie **zusammenspielen** und welche **Bootstrap-Standardklassen** sicher genutzt werden können.

Technische Tiefe (SCSS-Pfade, Compiler) ist nur dort enthalten, wo es dem Verständnis dient. Für vollständige Tiefe empfiehlen sich Online-Dokumentationen für Bootstrap / Shopware Storefront, so wie ein Blick in `src/Resources/app/storefront/src/scss` in dem **Itk25nowTheme**, bzw dem **Itk25NowChildTheme**.

---

# Überblick: Vier Schichten plus Vererbung

| Schicht | Quelle im Projekt | Rolle |
|--------|-------------------|--------|
| **Bootstrap 5.3** | Einbindung über Shopware-Storefront-Theme | Raster, Komponenten (Buttons, Cards, Modals, …), Hilfsklassen (`d-flex`, `mb-3`, …) |
| **Shopware Storefront (@Storefront)** | Paket `shopware/storefront` unter `vendor/shopware/storefront` | Basis-Layout, CMS-Markup, Checkout, Produktdarstellung, eigene Erweiterungen von Bootstrap |
| **Itk25nowTheme („25now“)** | `custom/plugins/Itk25nowTheme` | Marken-Layout, Überschreibungen, Zusatz-Komponenten (Vergleich, Konfigurator, …) |
| **Itk25NowChildTheme („Ultraforce“)** | `custom/plugins/Itk25NowChildTheme` | Child-Theme: Variablen und gezielte Overrides (z. B. Black-Week-Optik), lädt **nach** Parent und Storefront |

::: {.pdf-landscape}
```mermaid
flowchart TB
  subgraph laden["Reihenfolge CSS-Kompilierung (Ultraforce-Child)"]
    O["overrides.scss<br/>Bootstrap/ Shopware-Variablen (!default)"]
    S["@Storefront"]
    P["@Itk25NowTheme / main.scss"]
    B["base.scss<br/>Child-Variablen"]
    O --> S --> P --> B
  end
  subgraph quellen["Klassen-Herkunft im gerenderten HTML"]
    BS["Bootstrap: .row, .btn, …"]
    SW["Shopware: .cms-*, .product-*, .is-ctl-* …"]
    T25["25now: .itk-*, .box-custom, …"]
    UF["Ultraforce: data-itk-black-week + --sw-/--bs- Overrides"]
    BS --> DOM["Seite im Browser"]
    SW --> DOM
    T25 --> DOM
    UF --> DOM
  end
```
:::

**Wichtig:** In **Erlebniswelten** und **HTML-Feldern** arbeitet ihr meist mit **Bootstrap-Hilfsklassen** und den **von Shopware/Templates ausgegebenen** Klassennamen. Eigene Theme-Klassen (z. B. `.box-custom`) erscheinen nur dort, wo das Template oder ein CMS-Element sie setzt.

---

# Itk25nowTheme (25now)

Plugin-Pfad: `custom/plugins/Itk25nowTheme`. Laut `theme.json` heißt das Theme intern **`25now`**. Styles werden über `app/storefront/src/scss/main.scss` gebündelt.

## Eigene und stark genutzte Klassen (Auszug nach Bereich)

### Layout Kopfzeile & Suche

| Klasse (Auszug) | Kurzbeschreibung |
|-----------------|------------------|
| `.header-minimal` | Variante Minimal-Header |
| `.header-main`, `.header-row`, `.header-logo-col`, `.header-logo-main-link`, `.header-logo-picture` | Standard-Header-Struktur (Shopware-Basis, im Theme optisch angepasst) |
| `.itk-header-compare-col`, `.itk-header-wishlist-col` | Spalten für Vergleich / Merkzettel im Header |
| `.itk-top-bar-usp` | USP-Zeile in der Top-Bar |
| `.top-bar` | Obere Leiste inkl. Container/Row-Anpassungen im Theme |
| `.header-search-input`, `.header-search-btn`, `.header-close-btn`, `.header-search-form`, `.header-search-icon` | Suchfeld und Steuerung |
| `.search-suggest-container`, `.search-suggest-product-link` | Livesuche-Dropdown |

### Navigation & Flyout

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.nav-main`, `.main-navigation-link-text`, `.main-navigation-link` | Hauptnavigation |
| `.navigation-flyout`, `.navigation-flyouts`, `.navigation-flyout-close` | Megamenü / Flyout |
| `.navigation-offcanvas` | Mobile Navigation im Offcanvas |

### Produkt & PDP (Produktdetailseite)

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.product-detail-name` | Produkttitel |
| `.product-detail-buy`, `.product-detail-price`, `.product-detail-tax-container`, `.product-detail-tax`, `.product-detail-ordernumber-container` | Kaufbox-Bereich |
| `.itk-product-description` | Zusätzliche Kurzbeschreibung im Buy-Box-Bereich |
| `.product-detail-wishlist-compare` | Container für Merkzettel + Vergleich (mit BEM: `__item`, `__btn`, `__icon`) |
| `.product-wishlist-btn`, `.product-wishlist-btn-content`, `.product-wishlist-action`, `.product-wishlist-icon-wrapper` | Merkzettel-Steuerung |
| `.compare-icon-outline`, `.compare-icon-fill` | Vergleichs-Icon Zustände; Zustand `.is-added-to-compare` am Button |
| `.gallery-slider-item`, `.gallery-slider-thumbnails-*`, `.base-slider`, `.base-slider-dots`, `.tns-nav-active` | Galerie / Slider |
| `.video-gallery-thumbnail`, `.video-thumbnail-container`, `.video-play-button-overlay`, `.video-popup-modal`, `.gallery-video-info` | Video in der Galerie |
| `.cms-block-gallery-buybox` | CMS-Block „Galerie + Buybox“ |
| `.cms-block-product-description-reviews` | Tabs Beschreibung / Bewertungen |
| `.product-detail-tab-navigation-link`, `.refurbished-tab-title`, `.bware-tab-title` | Tab-Navigation inkl. Spezial-Tabs |
| `.product-detail-description-text` | Tab-Inhalt Text |
| `.itk-cross-selling`, `.product-detail-cross-selling` | Cross-Selling-Bereich |
| `.cms-block-product-info-card`, `.cms-block-product-additional-content` | Zusatz-CMS-Blöcke |
| `.product-heading-manufacturer-logo-container`, `.product-detail-list-price-wrapper` | Herstellerlogo, Listenpreis |

### Karten, Boxen, Listing

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.box-container`, `.box-custom` | Flexible Produkt-/Aktions-Karten (Theme-Design); nutzt u. a. `.card-body`, `.product-image-wrapper`, `.product-badges` |
| `.horizontal-product-card`, `.horizontal-product-card-title` | Horizontale Produktkachel (Kategorie-/Slider-Kontext) |
| `.cms-block-category-navigation` | CMS-Block Kategorie-Navigation (Sidebar) |

### Buttons & Warenkorb

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.btn-action-add-to-cart`, `.btn-action-buy`, `.btn-buy`, `.btn-footer` | Kauf- / Warenkorb-Aktionen |
| `.buy-icon`, `.info-icon` | Icons in Primärbuttons |
| `.line-item-remove-button`, `.offcanvas-cart-promotion-button` | Warenkorb / Offcanvas |
| `.btn.btn-plus.js-btn-plus`, `.btn.btn-minus.js-btn-minus` | Mengensteuerung |

### Filter & Listing

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.filter-boolean`, `.filter-range`, `.filter-multi-select`, `.filter-panel-item-toggle`, `.filter-multi-select-dropdown`, `.filter-range-dropdown`, `.filter-panel-wrapper-toggle`, `.filter-reset-all`, `.filter-range-min`, `.filter-range-max`, `.filter-range-unit` | Listing-Filter (Shopware-Markup, theme-spezifisch verfeinert) |

### Checkout & Konto

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.checkout-aside-summary`, `.checkout-aside-summary-header`, `.checkout-aside-container`, `.checkout-aside-action` | Checkout-Seitenleiste |
| `.confirm-address`, `.confirm-tos`, `.checkout-card`, `.checkout-product-table`, `.finish-info`, `.finish-content` | Bestätigung / Finish |
| `.is-act-checkoutregisterpage` | Body-/Seitenkontext (Checkout Registrierung) |
| `.phone-warning-icon` | Hinweis-Icon (Telefonnummer) |
| `.card.register-card`, `.card.login-card`, `.account-overview-card`, `.account-content-main`, `.account-menu-inner`, `.order-table` | Konto- und Formular-Karten |
| `.account-menu-offcanvas`, `.account-menu-dropdown`, `.account-aside-item` | Konto-Menüs |
| `.account-delete-section` | Bereich Konto löschen |
| `.order-table-header-context-menu-content-link` | Kontextmenü Bestellungen |

### Vergleich (Compare)

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.compare-button`, `.compare-float-button`, `.header-compare`, `.js-compare-float-button`, `.js-compare-modal-button`, `.compare-float-badge`, `.is-visible` | Vergleich im Header und als Float |
| `.compare-page-header`, `.compare-actions`, `.compare-table-wrapper`, `.compare-table-scroll-wrapper`, `.compare-mobile-nav`, `.comparison-table`, `.comparison-item`, `.compare-section` | Vergleichsseite |

### PC-Konfigurator & Plugins

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.pc-configurator`, `.pc-configurator-compact`, `.pc-configurator-buy-widget`, `.pc-configurator-wrapper`, `.pc-configurator-buybox`, `.pc-configurator-products-select`, `.template-tabs`, `.template-condensed` | PC-Konfigurator-Oberfläche |
| `.gaia-configurator`, `.gaia-group`, `.gaia-item`, `.gaia-item.is-active`, `.gaia-item.is-input`, `.group-header`, `.inner-item`, … | Gaia-Konfigurator (Gruppen, Items, Templates `template="3col"` etc.) |
| `.dfd-layer` | DFD / Layer-Hilfsklasse (Plugin) |
| `.product-detail-financing-container`, `.financing-example-installment`, `.mille-efi-financing-tab-link` | Finanzierungs-Hinweise |

### CMS & Dynamic Grid

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.cms-element-grid` | Raster-CMS-Element |
| `.cms-el-dynamic-grid-element`, `.dynamic-grid-container`, `.dynamic-grid-cell` | Dynamisches Raster |
| `.cms-element-category-listing-item`, `.cms-element-category-listing-category-item`, `.cms-element-category-listing-item-image-wrapper`, `.cms-element-category-listing-item-title`, `.itk_no-icon` | Kategorie-Listing-Element (inkl. Modifikator ohne Icon) |

### Sonstiges UI

| Klasse | Kurzbeschreibung |
|--------|------------------|
| `.bootstrap-icon`, `.bi` | Bootstrap-Icons (Schriftart / Klassen `bi-*`) |
| `.is-contain` | Object-fit / Container-Hilfe |
| `.itk_read_more_trigger`, `.itk_read_less_trigger` | „Mehr lesen“ / „Weniger“ |
| `.black-week-stock-progress` | Lager-Fortschritt (Kampagne) |
| `.info-box`, `.warning-box`, `.condition-notice-box`, `.advantage-list`, `.process-card`, `.feature-box`, `.tab-pane-container` | Refurbished/B-Ware-Tab-Inhalte |
| `.cookie-permission-container` | Cookie-Hinweis-Container |
| `.pagination-nav`, `.breadcrumb-title` | Pagination, Brotkrumen-Titel |
| `.offcanvas`, `.offcanvas-header`, `.btn.offcanvas-close`, `.js-offcanvas-close`, `.cart-offcanvas` | Offcanvas allgemein / Warenkorb |
| `.modal-content` | Modal-Inhalt (global leicht angepasst) |
| `.table-striped` | Tabellenzeilen (gerade/ungerade im Theme getauscht) |
| `.e_label_neu_*`, `.e_label_alt_*` | Energielabel-Größen/-Klassen (Utilities) |

### ActiveCampaign-Embed (Newsletter-HTML)

Root: **`.itk_ac_newsletter`**. Häufige Unterklassen (vom Embed-Generator): `._form_hide`, `._form_show`, `._form-top`, `._form-bottom`, `._form-left`, `._form-right`, `._inline-form`, `._form-body`, `._form-label`, `._form_element`, `._submit`, `._error`, `._button-wrapper`, `._form-thank-you`, `sms_consent_checkbox`, `field-required`, …

**Hinweis für Redakteur:innen:** Diese Klassen stammen vom **ActiveCampaign-Formular-HTML**, nicht von Shopware. Änderungen nur mit Vorsicht (Styles brechen leicht).

---

# Itk25NowChildTheme (Ultraforce)

Plugin-Pfad: `custom/plugins/Itk25NowChildTheme`. In `theme.json`: Name **„UltraForce Theme (25now Child)“**, **`parentTheme`: `Itk25NowTheme`**.

## Style-Reihenfolge (praktisch relevant)

```json
"style": [
  "app/storefront/src/scss/overrides.scss",
  "@Storefront",
  "@Itk25NowTheme",
  "app/storefront/src/scss/base.scss"
]
```

- **`overrides.scss`**: Kommentar und Platzhalter für globale SCSS-Variablen-Overrides (Bootstrap/Shopware mit `!default` – siehe [Bootstrap Sass – Variable Defaults](https://getbootstrap.com/docs/5.3/customize/sass/#variable-defaults)).
- **`base.scss`**: importiert nur `abstract/_variables.scss` des Child-Themes.

## Eigenes Markup / Selektoren

Das Child-Theme definiert **keine große neue BEM-Welt**, sondern **Design-Tokens und Kontext**:

| Mechanismus | Beschreibung |
|-------------|--------------|
| `[data-bs-theme="dark"][data-itk-black-week]` | Selektor-Kontext für **Black Week** / Sonderdarstellung |
| CSS-Variablen | Überschreibt u. a. `--sw-color-brand-primary`, `--sw-color-price`, `--sw-color-success`, `--sw-border-color`, `--sw-headline-color`, `--sw-link-color`, `--sw-link-hover-color`, `--bs-primary-rgb`, `--bs-success` |
| `.btn.btn-buy` | Spezieller Verlauf, Schatten und Animation (`orangeFlow`) im Black-Week-Kontext |
| `.form-group.gaia-item-display-value.gaia-item-input-container` | Textfarbe angepasst (`var(--itk-black)`) |

**Kernaussage für Redakteur:innen:** Sichtbare Änderungen am „Ultraforce“-Look kommen primär über **Datenattribute am Layout** (`data-itk-black-week`, ggf. `data-bs-theme="dark"`) und **Theme-Konfiguration**, nicht über das manuelle Setzen vieler neuer Klassen in HTML.

---

# Shopware Storefront (Default, @Storefront)

Shopware baut den Storefront auf **SCSS** und **Bootstrap** auf und ergänzt eigene **Komponenten- und Seitenklassen**. Die Twig-Templates unter `Resources/views/storefront` erzeugen das Markup.

## Namenskonventionen (grober Leitfaden)

| Muster | Beispiele | Typische Verwendung |
|--------|-----------|---------------------|
| **CMS** | `cms-page`, `cms-page-center`, `cms-section`, `cms-section-default`, `cms-block`, `cms-block-container`, `cms-element-*`, `cms-image`, `cms-slot` | Erlebniswelten: jede Seite/Sektion/Block/Element |
| **Produkt** | `product-box`, `product-image-wrapper`, `product-info`, `product-name`, `product-variant-characteristics`, `product-price`, `product-action`, `product-wishlist` | Listing, Slider, Detail |
| **Warenkorb / Bestellung** | `line-item`, `line-item-row`, `line-item-details`, `line-item-img`, `line-item-label`, `line-item-total-price`, `line-item-remove` | Cart, Checkout, Account |
| **Checkout** | `checkout`, `checkout-main`, `checkout-aside`, `checkout-card`, `checkout-product-table`, `checkout-aside-summary` | mehrstufiger Checkout |
| **Navigation** | `navigation-offcanvas`, `main-navigation`, `main-navigation-link`, `category-navigation`, `category-navigation-entry` | Menü & Kategorien |
| **Seitenkontext (Body)** | `is-ctl-product`, `is-act-index`, `is-ctl-checkout`, `is-act-finishpage`, … | gezieltes Styling pro Controller/Aktion |
| **Zustände** | `is-active`, `was-active`, `is-loading`, `is-invalid`, `is-open`, `show` (Bootstrap) | Interaktion / Validierung |
| **Slider** | `base-slider`, `base-slider-controls`, `base-slider-items`, `tns-*` (Tiny Slider) | Produktgalerie, Slider-Elemente |

## Shopware-CSS-Variablen (Auswahl)

Im Theme und in Plugins werden oft **CSS Custom Properties** genutzt:

- **`--sw-color-brand-primary`**, **`--sw-color-price`**, **`--sw-text-color`**, **`--sw-background-color`**, **`--sw-background-color-alt`**, **`--sw-border-color`**, **`--sw-headline-color`**, **`--sw-link-color`**, **`--sw-link-hover-color`**, **`--sw-color-success`**, **`--sw-color-danger`**, **`--sw-muted-color`**, …  
- Bootstrap-Seite: **`--bs-primary`**, **`--bs-body-bg`**, **`--bs-border-color`**, … (siehe [Bootstrap CSS variables](https://getbootstrap.com/docs/5.3/customize/css-variables/))

Redakteur:innen ändern diese **nicht im HTML-Feld**, sondern über **Theme-Konfiguration** (Theme-Manager) oder **Entwickler-Anpassungen**.

## Offizielle Doku

- Storefront-Styling in Plugins: [Add Custom Styling](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-styling.html)  
- Bootstrap-Variablen im Theme: [Override Bootstrap Variables in a Theme](https://developer.shopware.com/docs/guides/themes/override-bootstrap-variables-in-a-theme.html)

---

# Bootstrap 5.3

Bootstrap liefert das **Rastersystem**, **Typo-Basics**, **Formulare**, **Komponenten** und **Utility-Klassen**. Shopware nutzt einen Teil davon direkt im Markup; das 25now-Theme erweitert oder überschreibt gezielt (z. B. `.btn-primary`).

## Offizielle Referenz

- Gesamt: [https://getbootstrap.com/docs/5.3/](https://getbootstrap.com/docs/5.3/)  
- **List Group** (inkl. Varianten, Flush, Horizontal, Tab-Integration): [https://getbootstrap.com/docs/5.3/components/list-group/](https://getbootstrap.com/docs/5.3/components/list-group/)

## Layout: Container, Raster, Spalten

| Klassenfamilie | Kurzbeschreibung |
|----------------|------------------|
| `.container`, `.container-fluid`, `.container-{breakpoint}` | Maximalbreite / volle Breite |
| `.row`, `.row-cols-*`, `.g-*`, `.gx-*`, `.gy-*` | Zeile, Spaltenanzahl, Gutter |
| `.col`, `.col-*`, `.col-{breakpoint}-*` | Spaltenbreiten (12er-Raster) |
| `.order-*`, `.offset-*` | Reihenfolge / Versatz |

## Utilities (häufig in CMS-HTML)

| Bereich | Beispielklassen |
|---------|-----------------|
| **Abstand** | `m-0`–`m-5`, `mt-*`, `mb-*`, `ms-*`, `me-*`, `p-*`, `px-*`, `py-*` |
| **Display** | `d-none`, `d-block`, `d-flex`, `d-grid`, `d-md-block`, … |
| **Flex** | `flex-row`, `flex-column`, `justify-content-between`, `align-items-center`, `flex-wrap`, `flex-fill` |
| **Text** | `text-start`, `text-center`, `text-muted`, `text-uppercase`, `fw-bold`, `small` |
| **Farbe / Hintergrund** | `text-primary`, `bg-light`, `text-bg-primary` (Badges) |
| **Sichtbarkeit** | `visually-hidden`, `opacity-*`, `overflow-hidden` |

## Komponenten (Kurzüberblick)

| Komponente | Zentrale Klassen |
|------------|------------------|
| **Buttons** | `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-link`, `.btn-lg`, `.btn-sm`, `disabled` / `[disabled]` |
| **Cards** | `.card`, `.card-body`, `.card-header`, `.card-title`, `.card-footer`, `.card-img-top` |
| **Modal** | `.modal`, `.modal-dialog`, `.modal-content`, `.modal-header`, `.modal-body`, `.modal-footer`, `.btn-close`; JS: `data-bs-toggle="modal"` |
| **Offcanvas** | `.offcanvas`, `.offcanvas-start`, `.offcanvas-header`, `.offcanvas-body`; JS: `data-bs-toggle="offcanvas"` |
| **Navbar / Nav** | `.navbar`, `.nav`, `.nav-link`, `.nav-tabs`, `.tab-content`, `.tab-pane`, `.active` |
| **Alerts** | `.alert`, `.alert-primary`, `.alert-success`, `.alert-danger`, `.alert-dismissible` |
| **Badges** | `.badge`, `.text-bg-primary`, `.rounded-pill` |
| **Breadcrumb** | `.breadcrumb`, `.breadcrumb-item` |
| **Formulare** | `.form-control`, `.form-label`, `.form-check`, `.form-check-input`, `.form-select`, `.input-group`, `.was-validated`, `.is-invalid`, `.invalid-feedback` |
| **List group** | `.list-group`, `.list-group-item`, `.list-group-item-action`, `.active`, `.disabled`, `.list-group-flush`, `.list-group-numbered`, `.list-group-horizontal`, `.list-group-item-primary` … `.list-group-item-dark` |
| **Tab + List Group** | Auf List-Items: `data-bs-toggle="list"`; Inhalt in `.tab-content` / `.tab-pane` mit `.fade` / `.show` für Einblendeffekt (siehe Bootstrap-Doku) |

### List group (Detail, nach Bootstrap 5.3)

- **Basis:** äußerer Container **`.list-group`**, Einträge **`.list-group-item`**.  
- **Aktiv:** **`.active`** am Item, sinnvoll mit `aria-current="true"`.  
- **Klickbar (Links/Buttons):** zusätzlich **`.list-group-item-action`**; bei Buttons `disabled`-Attribut, bei Links `.disabled` + `aria-disabled="true"`. **Keine** normale `.btn`-Klasse auf dem Listeneintrag verwenden (Bootstrap-Hinweis).  
- **`.list-group-flush`:** Kanten an Card anlegen; nicht kombinierbar mit **horizontal** laut Doku.  
- **Nummeriert:** **`.list-group-numbered`** (optional mit `<ol>`).  
- **Horizontal:** **`.list-group-horizontal`** oder **`.list-group-horizontal-{sm|md|lg|xl|xxl}`**; für gleich breite Items **`.flex-fill`** pro Eintrag.  
- **Kontextfarben:** **`.list-group-item-primary`** bis **`.list-group-item-dark`**.  
- **Badges:** Kombination mit Utilities, z. B. **`.d-flex`**, **`.justify-content-between`**, **`.align-items-center`**.  
- **Checkboxes/Radios:** **`.form-check-input`**, **`.form-check-label`**; optional **`.stretched-link`** am Label für ganze Zeile klickbar.

## Zusammenspiel mit Shopware

- Viele Shopware-Templates nutzen **`row` / `col-*`** und **Card**-Strukturen für Checkout und Konto.  
- **Modal/Offcanvas** werden für Warenkorb, Mobile-Menü, Cookie-Banner u. ä. verwendet – Klassennamen entsprechen oft Bootstrap, zusätzlich Shopware-**`js-*`-Hooks** für JavaScript.  
- Utility-Klassen (`mb-3`, `d-flex`, …) sind in **HTML-Elementen** in CMS und Übersetzungen **unkritisch**, solange ihr keine Shopware-spezifischen Klassen überschreibt.

---

# Zusammenhänge und Tipps für den Alltag

1. **„Sieht anders aus als in der Bootstrap-Doku“** → Shopware oder 25now überschreibt Variablen/Selektoren; prüft zuerst **Theme** und **Sales Channel**.  
2. **„Klasse existiert im HTML nicht“** → anderes Template / anderes CMS-Element; Klassen stammen immer aus **Twig**, nicht aus dem Erlebniswelt-Editor „von selbst“.  
3. **Gezielt nur eine Seite stylen** → Body-Klassen **`is-ctl-*` / `is-act-*`** (nur für fortgeschrittene Custom-CSS durch Entwicklung).  
4. **Ultraforce / Black Week** → optischer Switch über **`[data-itk-black-week]`** und **`data-bs-theme="dark"`** laut Child-`abstract/_variables.scss`, nicht über willkürliche neue Utility-Klassen im Content.

---

# Referenzen (extern)

- Bootstrap 5.3 Docs: [https://getbootstrap.com/docs/5.3/](https://getbootstrap.com/docs/5.3/)  
- Bootstrap List group: [https://getbootstrap.com/docs/5.3/components/list-group/](https://getbootstrap.com/docs/5.3/components/list-group/)  
- Shopware – Custom Styling: [https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-styling.html](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-styling.html)  
- Shopware – Theme / Bootstrap-Variablen: [https://developer.shopware.com/docs/guides/themes/override-bootstrap-variables-in-a-theme.html](https://developer.shopware.com/docs/guides/themes/override-bootstrap-variables-in-a-theme.html)

---

# FAQ

**Warum sehe ich `btn-primary` manchmal in Grün, manchmal in Orange?**  
Weil **CSS-Variablen** und **Theme-Schichten** (25now, Ultraforce, Theme-Manager) die Bootstrap-Farben **umdefinieren**, nicht weil sich die Klasse geändert hätte.

**Kann ich im CMS einfach `list-group` einfügen?**  
Ja, wenn **rohes HTML** erlaubt ist – nutzt die **Bootstrap-Struktur** aus der offiziellen Doku. Für **JavaScript** (Tabs/List) müsst ihr die **data-bs-***-Attribute und eingebundene Skripte** beachten; in Shopware ist oft bereits Bootstrap-JS aktiv.

**Wo finde ich alle Shopware-Klassen?**  
Im Core unter **`vendor/shopware/storefront`** (Views + SCSS). Diese Doku nennt die **gängigsten Muster**; eine vollständige Aufzählung wäre wartungsintensiv und für Redakteur:innen kaum lesbar.

**Was ist der Unterschied zwischen 25now und Ultraforce?**  
**25now** ist das **Parent-Theme** mit umfangreichem SCSS. **Ultraforce** ist das **Child-Theme** mit Fokus auf **Variablen und Sonderthemen** (z. B. Black Week), siehe `theme.json` und `abstract/_variables.scss`.