---
type: reference
title: Das Widget mit CSS stylen
summary: Style die Widget-Hülle aus deinem eigenen Stylesheet, mit ::part()-Selektoren und den --cpt-skin-Custom-Properties, plus einer Referenz jedes Parts und jeder Variable.
---

Das Widget rendert in einer offenen Shadow Root und gibt dir zwei Wege, es von deiner eigenen Seite zu stylen: **Shadow-Parts** (ein Element mit `::part()` anvisieren) und **CSS-Custom-Properties** (eine Farbe mit `--cpt-skin-*` überschreiben). Für Farben und Wortlaut bevorzug [White-Labeling](/docs/widget-customization/white-label) (es ist dafür gebaut und reist mit jeder Einbettung); greif hier zur CSS-Fläche, wenn du eine seitenlokale Optimierung willst oder etwas, das White-Labeling nicht abdeckt.

Das ist nur die Widget-Hülle. Das Spiel läuft in einem separaten gesandboxten Frame, den du von der Seite nicht stylen kannst.

## Einen Part anvisieren

Wähl einen Part auf dem Element mit `::part(name)`:

```css
caputchin-widget::part(simple-checkbox) {
  border-radius: 1rem;
}

caputchin-game::part(game-frame) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
```

Ein paar praktische Hinweise:

- Die Shadow Root ist offen, also funktioniert `::part()` von deiner Seite in jedem modernen Browser.
- Einige strukturelle Parts (der Checkbox-Container, der Spiel-Frame) tragen Basis-Layout-Styles, die inline am Element angewendet werden. Um eine dieser Eigenschaften zu überschreiben, brauchst du eventuell `!important`, da ein Inline-Style eine normale `::part()`-Regel überrangt. Text- und Marken-Parts stylen sich sauber ohne ihn.
- Parts sind die Styling-Fläche; das Widget stellt seine internen Klassennamen nicht bereit, und sie können sich ändern. Style per Part, nicht durch Graben im Shadow-Tree.

## Parts auf dem Checkbox-Widget

Diese erscheinen auf `<caputchin-widget>` (und auf dem Pre-Game-Overlay von `<caputchin-game>`, das denselben Markenblock wiederverwendet).

| Part | Was es ist |
|---|---|
| `simple-checkbox` | Der äußere Checkbox-Container (Rand, Hintergrund, Padding). |
| `simple-shield-box` | Der Schild-Indikator, der den Verifizierungszustand zeigt. |
| `simple-shield-spinner` | Der Spinner-Bogen im Schild während der Verifizierung. |
| `simple-checkbox-label` | Der Zustandstext (Verify, Verifying, Verified, Failed). |
| `simple-brand` | Der Markenblock (Logo, Name und Tag zusammen). |
| `simple-brand-home` | Der Link, der Logo und Name umschließt und auf den Home-Link zeigt. |
| `simple-brand-logo` | Das Markenlogo-Bild. |
| `simple-brand-name` | Der Marken-Wordmark-Text. |
| `simple-brand-tag` | Die Marken-Tagline, ein Link, der auf den Rechtslink zeigt. |

## Parts auf dem Spiel-Widget

Diese erscheinen auf `<caputchin-game>`, um den gesandboxten Spiel-Frame herum.

| Part | Was es ist |
|---|---|
| `game-frame` | Der Chrome-Frame um das Spiel. |
| `game-iframe-slot` | Der Slot, der den gesandboxten Iframe des Spiels hält. |
| `game-slot` | Der Projektions-Container, in den das Spiel rendert. |
| `game-badge-slot` | Das Marken-Badge, das unter dem Spiel gezeigt wird. |
| `game-overlay-host` | Der Host des Pre-Game-Overlays (gezeigt, bevor das Spiel startet). |
| `game-overlay-checkbox` | Die Checkbox in diesem Overlay. |
| `game-overlay-dialog` | Der Overlay-Dialog, in Modal- und Fullscreen-Layouts. |
| `game-overlay-close` | Der Overlay-Schließen-Button, nur in Modal- und Fullscreen-Layouts. |

## Farb-Variablen

Das Widget schreibt seine aufgelösten Hüllen-Farben auf das Host-Element als CSS-Custom-Properties namens `--cpt-skin-<token>`, und seine eigenen Styles lesen sie. Du kannst eine einzelne Farbe aus deinem Stylesheet überschreiben, indem du die Eigenschaft auf dem Element setzt:

```css
caputchin-widget {
  --cpt-skin-primary: #7c3aed !important;
  --cpt-skin-surface_bg: #faf5ff !important;
}
```

Das `!important` zählt: das Widget setzt diese Eigenschaften inline am Host, während es den Skin auflöst, und ein Inline-Wert überrangt eine normale Stylesheet-Regel, sodass ein schlichter Override ignoriert wird. Das sind nur die Farben der Hülle; sie erreichen das Spiel im Frame nicht.

Das ist die seitenlokale Notausgang. Um Farben über jede Einbettung zu ändern, setz stattdessen einen [Skin im White-Labeling](/docs/widget-customization/white-label); es nutzt dieselben Token-Namen.

| Variable | Was es färbt |
|---|---|
| `--cpt-skin-primary` | Die primäre Aktionsfarbe: das aktive Schild, der Fokusring und der Verifiziert-Zustand. |
| `--cpt-skin-primary_hover` | Die Hover-Variante der Primärfarbe. |
| `--cpt-skin-surface_bg` | Der Hintergrund des Widgets. |
| `--cpt-skin-text_primary` | Der Haupttext. |
| `--cpt-skin-text_label` | Der Zustandslabel-Text (Verify, Verifying und so weiter). |
| `--cpt-skin-text_muted` | Sekundärtext, einschließlich des Marken-Tags. |
| `--cpt-skin-text_passive` | Der Schild-Umriss, während das Widget wartet. |
| `--cpt-skin-separator` | Der Trenner zwischen Marken-Teilen im kompakten Layout. |
| `--cpt-skin-border` | Der Rand des Widgets. |
| `--cpt-skin-glyph` | Das Häkchen- oder Warn-Glyph, das im Schild gezeichnet wird. |
| `--cpt-skin-error` | Die Fehlerzustands-Farbe. |
| `--cpt-skin-shadow` | Der Schlagschatten des Widgets. |
| `--cpt-skin-modal_backdrop` | Der Hintergrund hinter dem Spiel-Overlay im Modal-Layout. |
| `--cpt-skin-fullscreen_backdrop` | Der Hintergrund hinter dem Spiel-Overlay im Fullscreen-Layout. |
| `--cpt-skin-close_btn_bg` | Der Hintergrund des Schließen-Buttons im Fullscreen-Overlay. |
| `--cpt-skin-brand_text` | Die Textfarbe des Marken-Links. |
| `--cpt-skin-brand_text_hover` | Die Farbe des Marken-Links beim Hover. |

Das Markenlogo ist ein separater Skin-Token (ein Bild, keine Farbe), also wird es per [White-Labeling](/docs/widget-customization/white-label) getauscht, nicht per CSS. Dieselben Token-Namen und ihre hellen und dunklen Standards sind in der [Schema-Referenz](/docs/references/customization-schema).

Diese `--cpt-skin-*`-Variablen tragen nur den Skin der **Widget-Hülle**. Ein **Spiel** empfängt seinen eigenen Skin als Werte, die an seinen Code gereicht werden (nicht als CSS-Variablen, und du kannst ein Spiel nicht von deiner Seite stylen); sieh dir [Den Skin eines Spiels anpassen](/docs/game-customization/skin#how-a-skin-value-reaches-the-game) an.

## Siehe auch

- [Das Widget per White-Label anpassen](/docs/widget-customization/white-label): Wortlaut, Farben und Links auf dem unterstützten Weg ändern.
- [Wie das Widget seine Sprache und seinen Skin auflöst](/docs/widget-customization/resolution): was die Hülle rendert, bevor du sie stylst.
- [Unsere Philosophie](/docs/understanding-caputchin/philosophy): warum diese Styling-Fläche offen und in jedem Tarif kostenlos ist.