# 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 %}