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

# Ihre Seite mit Custom CSS anpassen

> Erfahren Sie, wie Sie in LanderLab-Quizzen mit Custom CSS Schritte, Eingabefelder, Dropdowns und weitere Elemente über die eingebauten Design-Einstellungen hinaus gestalten.

Mit LanderLab gestalten Sie Quizze visuell. Wenn Sie mehr Kontrolle brauchen, können Sie Ihr Quiz mit **Custom CSS** über die eingebauten Einstellungen hinaus gestalten.

Das ist nützlich, wenn Sie das Erscheinungsbild von Quiz-Elementen feinjustieren oder Stile anwenden möchten, die im Editor nicht verfügbar sind.

***

## So funktioniert es

LanderLab bindet Ihr eigenes CSS in Ihren Ablauf ein. Ihr CSS wird automatisch auf den Wurzelcontainer `.ll-quiz` begrenzt, sodass die Stile nur Ihr Quiz betreffen und nie auf den Rest der Seite übergreifen.

### Wo Sie CSS einfügen

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/nZqgRHMCi_31GFLg/images/css.png?fit=max&auto=format&n=nZqgRHMCi_31GFLg&q=85&s=8817775ebae44849d4a54a2b12073a74" alt="Das Custom-CSS-Panel unter „Settings“ im LanderLab-Quiz-Editor" width="1920" height="989" data-path="images/css.png" />
</Frame>

Öffnen Sie in Ihrem LanderLab-Editor **Settings → Custom CSS** und fügen Sie dort Ihre Regeln ein. Jeder Selektor, den Sie schreiben, liegt bereits innerhalb von `.ll-quiz` – Sie müssen nichts voranstellen.

<Tip>
  Das Wurzelelement `.ll-quiz` selbst können Sie nicht gestalten (z. B. `background`, `font-family`). Diese Eigenschaften steuert die Theme-Engine. Sprechen Sie stattdessen die untergeordneten Elemente an.
</Tip>

## Regeln zur Begrenzung

Ihr gesamtes CSS liegt innerhalb von `.ll-quiz`. Theme-Variablen (etwa `--colorPrimary`) sind schreibgeschützt – sie werden von der Theme-Engine gesetzt und lassen sich nicht überschreiben. Um das Aussehen zu ändern, schreiben Sie normale CSS-Regeln für die in diesem Leitfaden beschriebenen Selektoren.

**✓ So geht es**

```text theme={null}
.ll-quiz-continue-button {
  background-color: #ff6600;
  color: #ffffff;
  border-radius: 50px;
}
```

**✗ So nicht – Variablen sind schreibgeschützt**

```text theme={null}
/* Das funktioniert NICHT */
.ll-quiz {
  --colorPrimary: #ff6600;
}
```

## Selektor-Referenz

Nutzen Sie diese Selektoren, um die gewünschten Elemente anzusprechen. Alle liegen automatisch innerhalb von `.ll-quiz`.

### Layout und Struktur

**.ll-quiz-step**

Alle Schritte (sichtbar und ausgeblendet)

**.ll-quiz-step\[data-active-step="true"]**

Nur der aktuell sichtbare Schritt

**.ll-quiz-header**

Fixierter Kopfbereich

**.ll-quiz-footer**

Fixierter Fußbereich

**.ll-quiz-block**

Jeder Block, unabhängig vom Typ

**.ll-quiz-block--\[type]**

Ein bestimmter Blocktyp (z. B. `--text-field`)

### **Eingabefelder**

**.ll-quiz-block\_\_input**

Alle Texteingaben und Auswahlfelder

**.ll-quiz-block\_\_input-wrapper**

Umschließendes div um Eingaben

**.ll-quiz-block\_\_label**

Feldbeschriftungen

**.ll-quiz-block\_\_decorator**

Präfix-/Suffix-Symbole oder -Texte

### **Schaltflächen**

**.ll-quiz-continue-button**

Continue-Schaltfläche

**.ll-quiz-previous-button**

Zurück-Schaltfläche

**.ll-quiz-submit-button**

Submit-Schaltfläche

**.ll-quiz-default-button**

Allgemeine Aktionsschaltfläche

**.ll-quiz-button-text**

Beschriftung innerhalb einer Schaltfläche

**.ll-quiz-button-description**

Unterzeile innerhalb einer Schaltfläche

### **Auswahl-Blöcke**

**.ll-choice-option**

Eine einzelne Multiple-Choice-Option

**.ll-choice-option:has(input:checked)**

Eine ausgewählte Option

**.ll-choice-option\_\_text**

Textbeschriftung innerhalb einer Option

**.ll-img-choice-option**

Eine Karte der Bildauswahl

**.ll-img-choice-option:has(input:checked)**

Ausgewählte Bildauswahl-Karte

**.ll-choice-label**

Gruppenbeschriftung des Auswahl-Blocks

### **Fortschritt und Rückmeldung**

**.ll-quiz-progress\_\_fill**

Der gefüllte Teil des Balkens

**.ll-quiz-header\_\_progress-fill**

Füllung des Fortschrittsbalkens im Kopfbereich

**.ll-quiz-block--has-error**

Ein Block, dessen Validierung fehlgeschlagen ist

**.ll-quiz-block-error**

Der Text der Fehlermeldung

**.ll-quiz-variable**

Dynamische Variablen im Text (z. B. Vorname)

## Eingabefelder

Alle Texteingaben, Auswahlfelder, Textareas und ähnliche Felder teilen dieselbe Klassenstruktur. Sprechen Sie `.ll-quiz-block__input` an, um sie alle auf einmal zu gestalten, oder grenzen Sie nach Blocktyp ein.

### **Alle Eingabefelder gestalten**

**CSS**

```text theme={null}
.ll-quiz-block__input {
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 16px;
}

.ll-quiz-block__input:hover {
  border-color: #aaa;
}

.ll-quiz-block__input:focus {
  border-color: #3366ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}
```

### Einen bestimmten Block über die ID ansprechen

Die Block-ID finden Sie in der URL, wenn Sie einen Block in LanderLab bearbeiten (z. B. `text-field-abc123`).

```text theme={null}
#text-field-abc123 .ll-quiz-block__input {
  font-size: 20px;
  border-color: #ff6600;
}
```

### Präfix-/Suffix-Decorators gestalten

```text theme={null}
.ll-quiz-block__decorator--prefix {
  color: #888;
  font-size: 14px;
}

.ll-quiz-block__decorator--suffix svg {
  width: 18px;
  height: 18px;
  fill: #18c085;
}
```

### Beschriftungen

```text theme={null}
.ll-quiz-block__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.ll-quiz-block__label-text {
  color: #555;
}
```

## Schaltflächen

Schaltflächen werden in LanderLab als `<a>`-Elemente gerendert, nicht als `<button>`. Nutzen Sie den passenden Selektor je Schaltflächentyp oder sprechen Sie alle auf einmal über eine gemeinsame Klasse an.

### Continue-Schaltfläche

```text theme={null}
.ll-quiz-continue-button {
  background-color: #18c085;
  color: #ffffff;
  border-radius: 50px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.ll-quiz-continue-button:hover {
  background-color: #14a872;
}
```

### Zurück-Schaltfläche

```text theme={null}
.ll-quiz-previous-button {
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
}

.ll-quiz-previous-button:hover {
  border-color: #aaa;
  color: #555;
}
```

### Submit-Schaltfläche

```text theme={null}
.ll-quiz-submit-button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ll-quiz-submit-button:hover {
  background-color: #e05a00;
}
```

### Alle Schaltflächen auf einmal gestalten

```text theme={null}
.ll-quiz-continue-button,
.ll-quiz-submit-button,
.ll-quiz-default-button {
  border-radius: 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
```

### Unterzeile der Schaltfläche (Beschreibung)

```text theme={null}
.ll-quiz-button-description {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}
```

## Auswahl-Blöcke

Multiple-Choice- und Bildauswahl-Optionen lassen sich in ihrem Standard-, Hover- und Auswahlzustand gestalten.

### Optionen gestalten

```text theme={null}
.ll-choice-option {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  background: #ffffff;
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.ll-choice-option:hover {
  transform: scale(1.02);
  border-color: #18c085;
}

/* Ausgewählter Zustand */
.ll-choice-option:has(input:checked) {
  background-color: #e6f9f3;
  border-color: #18c085;
}
```

### Karten der Bildauswahl

```text theme={null}
.ll-img-choice-option {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.ll-img-choice-option:has(input:checked) {
  border-color: #18c085;
  box-shadow: 0 0 0 3px rgba(24, 192, 133, 0.15);
}
```

### Das Radio-/Checkbox-Symbol ausblenden

```text theme={null}
.ll-choice-option__custom-input {
  display: none;
}
```

## Fortschrittsbalken

Es gibt zwei Positionen für Fortschrittsbalken – einen inline in den Schritten und einen im Kopfbereich. Gestalten Sie sie unabhängig voneinander oder gemeinsam.

### Inline-Fortschrittsbalken

```text theme={null}
/* Spur */
.ll-quiz-progress--bar {
  background-color: #e8e8e8;
  border-radius: 99px;
  height: 8px;
}

/* Füllung */
.ll-quiz-progress__fill {
  background-color: #18c085;
  border-radius: 99px;
  transition: width 0.4s ease;
}
```

### Fortschrittsbalken im Kopfbereich

```text theme={null}
.ll-quiz-header__progress {
  background-color: #f0f0f0;
  height: 4px;
}

.ll-quiz-header__progress-fill {
  background-color: #3366ff;
  transition: width 0.4s ease;
}
```

## Responsives Design

LanderLab nutzt **CSS-Container-Queries**, keine Media-Queries. Verwenden Sie immer die unten gezeigte Container-Syntax – herkömmliche `@media`-Queries funktionieren innerhalb des Quiz-Containers nicht wie erwartet.

Der Breakpoint liegt bei **490 px**: Alles Breitere gilt als Desktop, alles Schmalere als Mobil.

**Syntax der Container-Query**

```text theme={null}
/* Desktop (breiter als 490px) */
@container quiz-container (inline-size > 490px) {
  .ll-quiz-continue-button {
    font-size: 18px;
    padding: 16px 40px;
  }
}

/* Mobil (490px und schmaler) */
@container quiz-container (inline-size <= 490px) {
  .ll-quiz-continue-button {
    width: 100%;
    font-size: 15px;
  }

  /* Einen Block auf Mobilgeräten ausblenden */
  #my-block-id {
    display: none;
  }
}
```

**Keine @media-Queries verwenden**

Nutzen Sie `@container quiz-container (...)` statt `@media (...)`. Das Quiz ist eine Container-Komponente, und Media-Queries spiegeln seine tatsächliche Breite nicht wider.

## Zustände und Validierung

Schlägt die Validierung eines Feldes fehl, erhält es die Klasse `.ll-quiz-block--has-error`. Nutzen Sie sie, um Fehlerzustände passend zu Ihrem Design zu gestalten.

### Gestaltung von Fehlern

```text theme={null}
/* Den Eingabe-Wrapper hervorheben */
.ll-quiz-block--has-error .ll-quiz-block__input-wrapper {
  border-color: #EA7A74;
  box-shadow: 0 0 0 3px rgba(234, 122, 116, 0.15);
}

/* Das Eingabefeld selbst gestalten */
.ll-quiz-block--has-error .ll-quiz-block__input {
  color: #c0392b;
}

/* Den Text der Fehlermeldung gestalten */
.ll-quiz-block-error {
  font-size: 13px;
  color: #EA7A74;
  margin-top: 6px;
  font-weight: 500;
}
```

### Dynamische Textvariablen

Textblöcke können Live-Variablen wie `{{firstName}}` enthalten, die sich während der Eingabe aktualisieren. Sie werden als `.ll-quiz-variable`-Spans gerendert.

```text theme={null}
.ll-quiz-variable {
  color: #18c085;
  font-weight: 600;
}
```

## Vollständige Beispiele

Fügen Sie eines dieser Beispiele in Ihr Custom-CSS-Panel ein, um schnell zu starten.

### Beispiel 1 – Klares, minimalistisches Theme

```text theme={null}
/* Eingabefelder */
.ll-quiz-block__input {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  padding: 11px 14px;
}
.ll-quiz-block__input:focus {
  border-color: #333;
  background: #fff;
  outline: none;
}

/* Continue-Schaltfläche */
.ll-quiz-continue-button {
  background-color: #111;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}
.ll-quiz-continue-button:hover {
  background-color: #333;
}

/* Auswahloptionen */
.ll-choice-option {
  border: 1.5px solid #eee;
  border-radius: 8px;
}
.ll-choice-option:has(input:checked) {
  border-color: #111;
  background: #f5f5f5;
}
```

### Beispiel 2 – Rundes, farbenfrohes Theme

```text theme={null}
/* Eingabefelder */
.ll-quiz-block__input {
  border: 2px solid #e0e7ff;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 15px;
}
.ll-quiz-block__input:focus {
  border-color: #6366f1;
  outline: none;
}

/* Continue- und Submit-Schaltflächen */
.ll-quiz-continue-button,
.ll-quiz-submit-button {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
}

/* Fortschritt */
.ll-quiz-progress__fill,
.ll-quiz-header__progress-fill {
  background-color: #6366f1;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ausgewählte Option */
.ll-choice-option:has(input:checked) {
  background-color: #eef2ff;
  border-color: #6366f1;
}
```

### Beispiel 3 – Mobile-First-Layout-Anpassungen

```text theme={null}
@container quiz-container (inline-size <= 490px) {
  /* Schaltflächen über die volle Breite auf Mobilgeräten */
  .ll-quiz-continue-button,
  .ll-quiz-submit-button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* Größere Tippflächen für Auswahloptionen */
  .ll-choice-option {
    padding: 14px 16px;
    min-height: 52px;
  }

  /* Etwas größerer Eingabetext */
  .ll-quiz-block__input {
    font-size: 16px; /* verhindert das Zoomen unter iOS beim Fokussieren */
  }
}
```

## Klassenliste der Blocktypen

Nutzen Sie diese Modifikatoren an `.ll-quiz-block`, um einzelne Blocktypen anzusprechen.

| **Modifikator-Klasse**               | **Blocktyp**          |
| :----------------------------------- | :-------------------- |
| `.ll-quiz-block--text-field`         | Texteingabe           |
| `.ll-quiz-block--email-field`        | E-Mail-Eingabe        |
| `.ll-quiz-block--phone-number-field` | Telefoneingabe        |
| `.ll-quiz-block--number-field`       | Zahleneingabe         |
| `.ll-quiz-block--textarea-field`     | Textarea              |
| `.ll-quiz-block--select-field`       | Dropdown-Auswahl      |
| `.ll-quiz-block--date-field`         | Datumsauswahl         |
| `.ll-quiz-block--checkbox-field`     | Checkbox              |
| `.ll-quiz-block--range-slider`       | Range Slider          |
| `.ll-quiz-block--multiple-choice`    | Multiple Choice       |
| `.ll-quiz-block--image-choice`       | Bildauswahl           |
| `.ll-quiz-block--continue`           | Continue-Schaltfläche |
| `.ll-quiz-block--submit`             | Submit-Schaltfläche   |
| `.ll-quiz-block--headline`           | Überschriftentext     |
| `.ll-quiz-block--paragraph`          | Absatztext            |
| `.ll-quiz-block--progress`           | Fortschrittsbalken    |
| `.ll-quiz-block--accordion`          | Accordion             |
| `.ll-quiz-block--countdown`          | Countdown-Timer       |