> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revoq.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widerrufsformular mit eigenem CSS anpassen

**Mit Custom CSS kannst du das Revoq Widerrufs-Formular optisch an dein Shop-Design anpassen. Das ist hilfreich, wenn dein Shop eine eigene Designsprache hat oder eine Agentur das Formular genauer an Brand-Vorgaben angleichen möchte.**

Das Custom CSS gilt global für dein Storefront-Formular. Es ist also nicht an einzelne Sprachen gekoppelt.

## Verfügbarkeit

Custom CSS ist ab dem Essential-Plan verfügbar.

* Free / Starter: gesperrt
* Essential: verfügbar
* Professional: verfügbar

|| Wenn du später auf einen Plan ohne Formular-Editor wechselst, bleibt dein gespeichertes CSS in Revoq erhalten, wird aber nicht mehr in die Storefront veröffentlicht.

## Wo du Custom CSS findest

Öffne in Revoq:

**App → Formular-Editor → Custom CSS**

Dort kannst du dein CSS einfügen, speichern oder wieder leeren.

Das CSS wird auf diese Elemente angewendet:

* Inline-Formular auf deiner Widerrufsseite
* Popup-Formular
* Popup-Trigger als Section Button
* Floating Button
* Mobile-Ansichten über Media Queries

## Was du anpassen kannst

Du kannst praktisch alle sichtbaren Formularbereiche gestalten, zum Beispiel:

* Formular-Container
* Hintergrund, Rahmen, Radius und Abstände
* Schriftart, Schriftgröße und Textfarben
* Eingabefelder, Selects und Textareas
* Primäre Submit-Buttons
* Schritt-Pillen, z. B. „1 · Details“
* Status-Chips und Statuszeilen
* Produktzeilen im Artikel-Auswahlschritt
* Erfolgsansicht
* Fehlermeldungen
* Popup-Dialog und Overlay
* Section Trigger Button
* Floating Button, auch speziell auf Mobile

| Nutze möglichst gezielte Revoq-Selektoren wie `.widerruf-form-card` oder `.widerruf-trigger-button--floating`, damit dein CSS nicht zu breit wirkt.

## Wichtige Selektoren

Am einfachsten ist es, wenn du zuerst die großen Bereiche anpasst und danach einzelne Details verfeinerst.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/0/a/9d0aebb43b89f800/chatgpt-image-7-juni-2026-1743_16at7ps.png =1066xauto)


| Selektor | Was du damit anpasst |
| ---- |
| `.widerruf-form-card` | Äußerer Formular-Container: Hintergrund, Rahmen, Radius, Schatten, Padding und maximale Breite |
| `.widerruf-form-card__header` | Kopfbereich des Formulars, vor allem im Popup |
| `.widerruf-form-card__title` | Formular-Titel, z. B. „Withdrawal form“ |
| `.widerruf-form` | Inneres Formular-Layout, z. B. Abstände zwischen den Bereichen |
| `.widerruf-form-steps` | Container der Schritt-Anzeige |
| `.widerruf-form-step-pill` | Einzelne Schritt-Pillen, z. B. „1 · Details“ |
| `.widerruf-form-step-pill[aria-current="step"]` | Aktuell aktive Schritt-Pille |
| `.widerruf-form__field` | Einzelne Formularfeld-Gruppe inklusive Label, Input und Hinweistext |
| `.widerruf-form__label` | Feld-Beschriftungen wie Name, E-Mail oder Bestellnummer |
| `.widerruf-form__hint` | Kleine Hilfs- und Hinweistexte unter Feldern |
| `.widerruf-form__input` | Eingabefelder, Selects und Textareas |
| `.widerruf-required` | Sternchen für Pflichtfelder |
| `.widerruf-primary-button` | Primärer Weiter-/Absenden-Button im Formular |
| `.widerruf-primary-button:hover` | Hover-Zustand des primären Buttons |
| `.widerruf-button--link` | Sekundäre Link-Buttons, z. B. Zurück |
| `.widerruf-form__privacy-notice` | Datenschutz-Hinweis im Formular |
| `.widerruf-form__error` | Fehlermeldungen im Formular |
| `.widerruf-form__success` | Erfolgsbereich nach abgeschicktem Widerruf |
| `.widerruf-form__success-icon` | Icon im Erfolgsbereich |
| `.widerruf-form__success-title` | Titel im Erfolgsbereich |

### Selektoren für Artikel-Auswahl und Status

Diese Selektoren werden vor allem im zweiten Formularschritt relevant, wenn Kundinnen oder Kunden Artikel auswählen können.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/0/a/9d0aebb43b89f800/chatgpt-image-7-juni-2026-1749_1np8qyc.png =1099xauto)


| Selektor | Was du damit anpasst |
| ---- |
| `.widerruf-form-statusline` | Statuszeile über der Artikelauswahl |
| `.widerruf-form-statusline__badge` | Badge mit Anzahl ausgewählter Artikel |
| `.widerruf-status-chip` | Allgemeiner Status-Chip |
| `.widerruf-status-chip--success` | Erfolgs-Chip |
| `.widerruf-status-chip--warning` | Warn-Chip |
| `.widerruf-status-chip--neutral` | Neutraler Status-Chip |
| `.widerruf-items` | Liste der Artikel |
| `.widerruf-item` | Einzelne Artikelzeile |
| `.widerruf-item.is-excluded` | Artikel, der nicht widerrufen werden kann |
| `.widerruf-item__checkbox` | Checkbox zur Artikelauswahl |
| `.widerruf-item__media` | Produktbild-Container |
| `.widerruf-item__image` | Produktbild |
| `.widerruf-item__title` | Produkttitel |
| `.widerruf-item__meta` | Produkt-Metadaten |
| `.widerruf-item__notice` | Hinweistext bei ausgeschlossenen Artikeln |
| `.widerruf-item__quantity-button` | Plus-/Minus-Buttons für Mengen |
| `.widerruf-item__quantity-input` | Mengenfeld |

### Selektoren für Popup, Section Button und Floating Button

| Selektor | Was du damit anpasst |
| ---- |
| `.widerruf-popup-modal` | Gesamtes Popup-Overlay |
| `.widerruf-popup-modal.is-open` | Geöffnetes Popup |
| `.widerruf-popup-modal__backdrop` | Hintergrundfläche hinter dem Popup |
| `.widerruf-popup-modal__dialog` | Popup-Dialog: Breite, Position, maximale Höhe |
| `.widerruf-popup-modal__close` | Schließen-Button im Popup |
| `.widerruf-trigger-button` | Popup-Trigger, sowohl Section Button als auch Floating Button |
| `.widerruf-trigger-button:hover` | Hover-Zustand des Triggers |
| `.widerruf-trigger-button--full` | Trigger in voller Breite |
| `.widerruf-trigger-button--floating` | Floating Button allgemein |
| `.widerruf-trigger-button--floating-left` | Floating Button, wenn er links positioniert ist |
| `.widerruf-trigger-button--floating-right` | Floating Button, wenn er rechts positioniert ist |

| Wenn du nur den Section Button anpassen möchtest, nutze `.widerruf-trigger-button:not(.widerruf-trigger-button--floating)`. Wenn du nur den Floating Button anpassen möchtest, nutze `.widerruf-trigger-button--floating`.

## Empfohlene CSS-Variablen

Für einfache Brand-Anpassungen kannst du Revoq CSS-Variablen nutzen. Das ist oft stabiler als viele einzelne Klassen zu überschreiben.

```css
.widerruf-form-card {
  --revoq-text-color: #111827;
  --revoq-text-secondary: #64748b;

  --revoq-card-bg: #f7fbf8;
  --revoq-card-border-color: #14532d;
  --revoq-card-border-width: 2px;
  --revoq-card-border-radius: 18px;

  --revoq-input-bg: #ffffff;
  --revoq-input-radius: 10px;

  --revoq-button-bg: #14532d;
  --revoq-button-bg-hover: #166534;
  --revoq-button-border-color: #14532d;
  --revoq-button-text: #ffffff;
}
```

Für Trigger und Floating Button gibt es eigene Variablen:

```css
.widerruf-trigger-button {
  --revoq-trigger-bg: #14532d;
  --revoq-trigger-bg-hover: #166534;
  --revoq-trigger-text: #ffffff;
  --revoq-trigger-border-color: #14532d;
  --revoq-trigger-radius: 999px;
  --revoq-trigger-font-size: 15px;
}

.widerruf-trigger-button--floating {
  --revoq-floating-bottom: 24px;
  --revoq-floating-side: 20px;
}
```

## Beispiel: Formular an Brand-Farben anpassen

```css
.widerruf-form-card {
  border: 2px solid #14532d;
  background: #f7fbf8;
  padding: 24px;
  border-radius: 18px;
}

.widerruf-primary-button {
  background-color: #14532d;
  border-color: #14532d;
  color: #ffffff;
}

.widerruf-primary-button:hover {
  background-color: #166534;
}
```

## Beispiel: Schriftart und Typografie anpassen

```css
.widerruf-form-card {
  font-family: Inter, Arial, sans-serif;
  color: #111827;
}

.widerruf-form-card__title {
  font-size: 26px;
  font-weight: 750;
}

.widerruf-form__label {
  font-size: 15px;
  font-weight: 700;
}

.widerruf-form__hint {
  font-size: 13px;
}
```

|| Externe Fonts können in Custom CSS nicht per `@import` oder `url(...)` geladen werden. Verwende eine Schriftart, die dein Theme bereits lädt, oder eine Systemschrift.

## Beispiel: Schritt-Pillen stylen

```css
.widerruf-form-step-pill {
  border-radius: 8px;
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.widerruf-form-step-pill[aria-current="step"] {
  background: #3730a3;
  border-color: #3730a3;
  color: #ffffff;
}
```

## Beispiel: Status-Chips anpassen

```css
.widerruf-status-chip {
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0;
}

.widerruf-status-chip--success {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.widerruf-status-chip--warning {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}
```

## Beispiel: Popup breiter machen

```css
.widerruf-popup-modal__dialog {
  width: min(920px, 100%);
}
```

## Beispiel: Floating Button auf Mobile anpassen

```css
@media (max-width: 640px) {
  .widerruf-trigger-button--floating {
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    min-height: 54px;
    border-radius: 14px;
    font-size: 15px;
  }
}
```

## Beispiel: Floating Button kompakt anzeigen

```css
@media (max-width: 640px) {
  .widerruf-trigger-button--floating {
    right: 14px;
    left: auto;
    bottom: 14px;
    width: 56px;
    min-width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
  }

  .widerruf-trigger-button--floating::after {
    content: "↩";
    font-size: 22px;
    line-height: 1;
  }
}
```

## Beispiel: Section Trigger Button anders stylen

```css
.widerruf-trigger-button:not(.widerruf-trigger-button--floating) {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0f172a;
  border-radius: 10px;
  min-height: 48px;
  padding-inline: 22px;
}
```

## Sicherheit und Grenzen

Custom CSS wird serverseitig geprüft. Nicht erlaubt sind:

* HTML-Ausbruch mit `<`
* `@import`
* `url(...)`
* `javascript:`
* `vbscript:`
* `data:`
* `expression(...)`
* `behavior:`
* `-moz-binding`

Das Limit liegt bei 20.000 Zeichen.

||| Blende keine Pflichtfelder, Rechtshinweise, Fehlermeldungen, Honeypot-Felder oder Submit-Buttons aus. CSS sollte nur das Design anpassen, nicht die Formularlogik verändern.

## Warum dein Theme-CSS nicht betroffen ist

Revoq rendert das Formular in isolierten Storefront-Bereichen. Dein Custom CSS wird in die Revoq Formularoberfläche geladen und nicht als allgemeines Theme-CSS auf der gesamten Seite veröffentlicht.

Das bedeutet:

* dein Theme wird nicht global überschrieben
* andere Bereiche deines Shops werden nicht gestylt
* Inline-Formular und Popup erhalten das CSS separat
* der Floating Button und der Section Trigger werden ebenfalls über die Revoq-Selektoren angesprochen

## Hinweise zum Testen

Teste nach dem Speichern am besten:

* Inline-Formular auf Desktop
* Inline-Formular auf Mobile
* Popup-Formular
* Section Trigger Button
* Floating Button links oder rechts
* Floating Button auf Mobile
* Schritt 2 mit Artikel-Auswahl
* Erfolgsansicht nach einem Test-Widerruf

Wenn du CSS wieder entfernen möchtest, öffne den Custom-CSS-Tab und klicke auf **CSS leeren**.