> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> Füge Custom CSS hinzu, um deinen Aftersell Cart über die integrierten Design-Einstellungen hinaus zu verfeinern.

Wenn die integrierten [Design-Einstellungen](/de/aftersell/cart/design-settings) nicht weit genug gehen, füge dein eigenes **Custom CSS** hinzu, um den Cart zu gestalten.

<div id="where-to-add-it">
  ## Wo du es hinzufügst
</div>

Öffne im Cart-Editor **Cart settings → Custom CSS**. Dein CSS **gilt für den gesamten Cart** und wird **nach** den Basis-Styles des Carts geladen, sodass deine Regeln Vorrang haben.

<div id="target-public-classes-only">
  ## Nur öffentliche Klassen ansprechen
</div>

Gestalte den Cart über seine **öffentlichen `cart-external-*`-Klassen**. Der Editor vervollständigt diese automatisch und warnt dich vor allen anderen:

* **`cart-external-*`**: das öffentliche, unterstützte Ziel. Verwende diese. Sie tragen selbst kein Styling und existieren also ausschließlich, damit sich dein CSS daran anheften kann.
* **`cart-internal-*`**: die interne Struktur des Carts, in der sein gesamtes integriertes Styling liegt. Der Editor kennzeichnet Selektoren darauf als Fehler. Sie werden nicht leichtfertig geändert, da jeder bestehende Cart von ihnen abhängt, aber sie gehören dem Cart und sind kein Vertrag mit dir. Gestalte stattdessen über das `cart-external-*`-Pendant um.
* Andere `cart-*`-Klassen, die der Editor nicht erkennt, werden als Warnungen gekennzeichnet.

<Note>
  Du wirst `cart-internal-*`-Klassen im Markup sehen, auch im Standard-[Custom Template](/de/aftersell/cart/custom-templates) jedes Blocks. Das ist zu erwarten: Sie verleihen einem Block sein integriertes Aussehen. Die Regel hier betrifft **Selektoren, die du** in diesem Panel schreibst, nicht Klassennamen, die der Cart rendert.

  Wenn du ein Custom Template schreibst, das die DOM-Struktur eines Blocks ändert, findest du unter [Ein Custom Template gestalten](/de/aftersell/cart/custom-templates#styling-a-custom-template), welche Klassennamen du behalten und welche du weglassen solltest.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: der Cart ist eigenständig
</div>

Im Storefront wird der gesamte Cart in seinem eigenen **Shadow DOM** gerendert. Das bedeutet:

* Das CSS deines Themes kann nicht in den Cart eindringen, und das CSS des Carts kann nicht nach außen dringen — dein Custom CSS ist also automatisch auf den Cart begrenzt und kollidiert nicht mit dem Rest deiner Website.
* Deine Selektoren sollten Elemente und Klassen **innerhalb des Carts** referenzieren. Selektoren, die auf Seitenelemente außerhalb des Carts zielen, greifen nicht hinein.

Dieselbe Grenze gilt für JavaScript: `document.querySelector` kann ebenfalls nicht in den Drawer hineinsehen. Ein Skript, das auf ein Cart-Element zugreifen will, muss über [`shadowRoot`](/de/aftersell/cart/sdk-overview#shadowroot) gehen und spricht dieselben `cart-external-*`-Klassen an.

<div id="when-to-use-design-settings-instead">
  ## Wann du stattdessen Design-Einstellungen verwenden solltest
</div>

Für Farben, Radien, Abstände und Breite sind die integrierten [Design-Einstellungen](/de/aftersell/cart/design-settings) einfacher und sicherer — greife also nur für das zu Custom CSS, was sie nicht abdecken.

<div id="where-to-go-next">
  ## Wie es weitergeht
</div>

* **[Design-Einstellungen](/de/aftersell/cart/design-settings)**: die integrierten Styling-Steuerungen und das Erste, was du ausprobieren solltest.
* **[Custom Templates](/de/aftersell/cart/custom-templates)**: ersetze das Markup eines Blocks vollständig, wenn CSS allein nicht ausreicht.
* **[Cart SDK](/de/aftersell/cart/sdk-overview)**: für Verhalten statt Aussehen.