> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/header/suche/konfiguration.md).

# Konfiguration

***

### Suche anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche"

**Technischer Name**:\
`twt-header-search-show`

## Basiskonfiguration

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Eingabefeld (Standard)\
• Flyout-Suche\
• Vollbildsuche\
• Global-Suche @Desktop (nur verfügbar mit "Header 1.1")

**Beispiel Wert**:\
`Eingabefeld (Standard)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-search-type`

{% hint style="info" %}
**Eingabefeld (Standard)**\
Verfügbar in "Header 1.1" und "Header 1.2".

**Flyout-Suche / Vollbildsuche**\
Verfügbar in allen Headern.

Muss für "Header 2.1" und "Full-Width Sticky-Header" ausgewählt werden.

**Global-Suche**\
Verfügbar in "Header 1.1" im Desktop-Viewport. Nutzt die Farbe: "Layout" > "Hintergrundfarbe (Aktions-Buttons)".
{% endhint %}

***

### Ecken

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht abgerundet (Standard)\
• runde Ecken\
• individuelle Rundung

**Beispiel Wert**:\
`nicht abgerundet (Standard)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-search-input-corner-type`

{% hint style="info" %}
**abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}

***

### Abgerundete Ecken (individuelle Rundung)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-search-input-border-radius`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf Ecken-Konfiguration "individuelle Rundung".
{% endhint %}

## Farbkonfiguration

***

### Textfarbe (Input)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-search-input-color`

***

### Rahmenfarbe (Input)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e4e7ea`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-search-input-border-color`

***

### Hintergrundfarbe (Input)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-search-input-background-color`

***

### Iconfabe (Button)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-search-btn-icon-color`

***

### Rahmenfarbe (Button)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-search-btn-border-color`

***

### Hintergrundfarbe (Button)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-search-btn-background-color`

## Typografie

***

### Textausrichtung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• zentriert ausrichten\
• rechts ausrichten

**Beispiel Wert**:\
`links ausrichten`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-header-search-text-align`

## Darstellungsart 'Eingabefeld'

***

### Maximale Breite

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`500`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

**Technischer Name**:\
`twt-header-search-max-width`

{% hint style="info" %}
Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.
{% endhint %}

***

### Maximale Breite @Desktop (≥1200px)

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`100%`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

**Technischer Name**:\
`twt-header-search-width-desktop`

{% hint style="info" %}
Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.
{% endhint %}

## Darstellungsart 'Flyout-Suche'

***

### Breite

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Container-max-width (Full-width-boxed)\
• 100% (Full-width)

**Beispiel Wert**:\
`Container-max-width (Full-width-boxed)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

**Technischer Name**:\
`twt-header-search-flyout-container-width`

***

### Maximale Breite @Phone (Querformat) (≥576px)

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`500`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

**Technischer Name**:\
`twt-header-search-flyout-max-width`

{% hint style="info" %}
Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.
{% endhint %}

***

### Maximale Breite @Desktop (≥1200px)

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`100%`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

**Technischer Name**:\
`twt-header-search-flyout-max-width-desktop`

{% hint style="info" %}
Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.
{% endhint %}

***

### Innenabstand

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`15`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

**Technischer Name**:\
`twt-header-search-flyout-padding`

{% hint style="info" %}
Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.
{% endhint %}

***

### Hintergrundfarbe @Phone (<576px)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

**Technischer Name**:\
`twt-header-phone-search-flyout-background-color`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

**Technischer Name**:\
`twt-header-search-flyout-background-color`

{% hint style="info" %}
Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.
{% endhint %}

## Darstellungsart 'Vollbildsuche'

***

### Overlay-Farbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0.9)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

**Technischer Name**:\
`twt-header-search-fullscreen-backdrop-color`

{% hint style="info" %}
Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.

Die Option "Vollbildsuche" muss als "Darstellungsart" ausgewählt sein.
{% endhint %}

***

### Unschärfe-Effekt \[px] (Overlay)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

**Technischer Name**:\
`twt-header-search-fullscreen-backdrop-effect-blur`

{% hint style="info" %}
Gib die gewüschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doku.themeware.design/handbuch/header/suche/konfiguration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.