/* # Refaktorierte Version "searchfield.css"

Struktur wurde bewusst beibehalten:
* gleiche technische Logik
* gleiche Animationen
* gleiche Zustandsmaschine
* gleiche Browser-Schutzmechanismen

ABER:
* zentrale CSS-Variablen ergänzt
* redundante Mobile-Overrides reduziert
* unnötige `!important` entfernt
* gemeinsame Zustände zusammengeführt
* Wartbarkeit verbessert
* einige Selektoren vereinfacht
* zusätzliche Kommentare ergänzt */


/* HEADER-FRAME: SEARCHBOX & LANGUAGE SWITCHER
 * ---------------------------------------------------------------------------
 * LOGIK:   HTML-Checkbox-Hack für das Ein-/Ausfahren.
 * LOOK:    Desktop = 42px blauer Balken / Mobile = 50px flacher Header-Look.
 * LAYERS:  Deckungsgleiche Icons (Plus/Minus/Senden) steuern über Z-Index und
 *          Visibility den visuellen Wechsel bei Fokus und Hover.
 * SCHUTZ:  Asymmetrische Transitions (step-start/step-end) garantieren ein
 *          absolut ruckelfreies Gleiten des Placeholders auf beiden Wegen.
 * ---------------------------------------------------------------------------*/


/* ========================================================================
   0. ZENTRALE SYSTEM-VARIABLEN
   ------------------------------------------------------------------------
   Vorteil:
   - Farben nur einmal pflegen
   - Höhen zentral steuerbar
   - Mobile/Desktop leichter synchronisierbar
   - Weniger redundante Werte
   ======================================================================== */

:root {
    /* Höhen */
    --search-height-desktop: 42px;
    --search-height-mobile: 50px;

    /* Breiten */
    --search-width-open: 190px;
    --search-width-tablet: 140px;
    --search-icon-width: 50px;

    /* Farben */
    --search-blue: #286c81;
    --search-dark: #0e1531;
    --search-text: #eee;
    --search-placeholder: #bcc4d1;
    --search-icon: #8999ad;
    --search-mobile-icon: #4b7294;
    --search-border-mobile: #ddd;

    /* Schriftgrößen */
    --search-font-size: 17px;
    --search-icon-size: 19px;
    --search-icon-size-mobile: 30px;

    /* Animation */
    --search-transition: .3s ease-out;
    --search-transition-mobile: .2s ease-out;
}


/* ==========================================================================
   1. GRUNDGERÜST & LISTE
   Horizontale Ausrichtung & Whitespace-Fix via font-size: 0
   ========================================================================== */

#header-links ul.lang-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    height: var(--search-height-desktop);
    font-size: 0;
}

#header-links ul.lang-switcher li {
    display: inline-block;
    vertical-align: top;
    height: var(--search-height-desktop);
    font-size: 15px;
}

#header-links ul.lang-switcher li:last-child {
    xxborder-left: none;
}

#header-links ul.lang-switcher li:first-child {
    border-left: none;
}

.lang-link a {
    display: inline-block;
    line-height: var(--search-height-desktop);
    color: var(--search-icon);
    text-decoration: none;
    vertical-align: top;
}


/* ==========================================================================
   2. SUCHE (Container): BASIS & POSITIONIERUNG
   ========================================================================== */

.searchfield {
    display: inline-block;
    position: relative;
    height: var(--search-height-desktop);
    vertical-align: top;

    /* Zwingt den Container, nach links auszublenden */
    overflow: visible;
}


/* ========================================================================
   ICON-GRUNDLAGE
   ------------------------------------------------------------------------
   Ein gemeinsamer Block verhindert redundante Mobile-Overrides.
   ======================================================================== */

.searchfield [class^="icon-"],
.searchfield [class*=" icon-"] {
    line-height: inherit;
    font-size: var(--search-icon-size);
}


/* ==========================================================================
   DAS EINGABEFELD
   ========================================================================== */

#search_input {
    display: inline-block;
    vertical-align: top;
    height: var(--search-height-desktop);
    width: 0;
    border: none;
    outline: none;
    color: var(--search-text);
    font-weight: bold;
    font-size: var(--search-font-size);

    /* KEIN Padding im Grundzustand.
       Sonst erzeugen Browser trotz width:0 eine Restbreite.*/
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 15px;
    white-space: nowrap;
    overflow: hidden;


    /* ====================================================================
       ÜBERLAGERUNGS-MODUS
       --------------------------------------------------------------------
       Das Feld fährt links über den Content statt Layout zu verschieben.
       ==================================================================== */
    /* ABSOLUTE EBENE BEIM AUSFAHREN: 
       Wir positionieren das Input-Feld absolut nach RECHTS (Kante an Kante mit der Lupe). 
       Beim Ausfahren wächst es nach LINKS über die Breadcrumbs, da es durch 
       die absolute Ebene keinen Platz im normalen Textfluss wegnimmt. */
    position: absolute;
    /* Dockt exakt links neben der Lupe an.
	 * Das Feld wächst nach links über den Content,
	 * ohne das Layout zu verschieben. */
    right: var(--search-icon-width);
    top: 0;
    z-index: 5;
    margin-right: 0;

    /* ====================================================================
       RÜCKWEG (Schließen)
       --------------------------------------------------------------------
       step-start hält Padding & Text stabil bis width exakt 0 erreicht.
       Dadurch absolut ruckelfreies Einfahren.
       ==================================================================== */

    transition:
        width var(--search-transition),
        padding .3s step-start,
        text-indent .3s step-start;

    background-color: var(--search-blue);
    box-sizing: border-box;
    border-left: 1px solid var(--search-dark);
}


/* Placeholder-Farbe */
#search_input::placeholder {
    color: var(--search-placeholder);
    opacity: 1;
}

/* Checkbox-Hacks verstecken */
#input_search_icon,
#transitionCheck {
    display: none !important;
}


/* ==========================================================================
   DIE ICONS (PLUS / MINUS / SUBMIT)
   ========================================================================== */

.search-label,
#submit_search {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--search-icon-width);
    height: var(--search-height-desktop);
    line-height: var(--search-height-desktop);
    text-align: center;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--search-icon);
    z-index: 10;
}


/* ========================================================================
   SUBMIT-LUPE
   ------------------------------------------------------------------------
   Liegt beim Fokus über dem Toggle-Label.
   ======================================================================== */

#submit_search {
    z-index: 20;
    display: none;
}


/* ==========================================================================
   CLEAR-ICON / X
   ========================================================================== */

.clear-search-icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffb4a2;
    z-index: 60;
    visibility: hidden;
    cursor: pointer;
}


/* Entfernt Browser-Standard-X */
input#search_input::-webkit-search-decoration,
input#search_input::-webkit-search-cancel-button,
input#search_input::-webkit-search-results-button,
input#search_input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}


/* ==========================================================================
   3. ANIMATION & ZUSTÄNDE
   ========================================================================== */


/* ========================================================================
   MINUS-LUPE AUSBLENDEN
   ------------------------------------------------------------------------
   maintain_search konserviert den Zustand auch ohne Fokus.
   ======================================================================== */

#search_input:focus ~ .search-label,
#search_input.maintain_search ~ .search-label {
    visibility: hidden;
}


/* ========================================================================
   SUBMIT-LUPE EINBLENDEN
   ======================================================================== */

#search_input:focus ~ #submit_search,
#search_input.maintain_search ~ #submit_search {
    display: inline-block;
    z-index: 50;
    vertical-align: top;
}


/* ==========================================================================
   FELD AUSFAHREN
   ========================================================================== */

#input_search_icon:checked ~ #search_input {
    width: var(--search-width-open);
    padding-left: 15px;
    padding-right: 15px;
    text-indent: 0;

    /* ====================================================================
       HINWEG (Öffnen)
       --------------------------------------------------------------------
       step-end hält den Placeholder stabil bis zum finalen Andocken.
       ==================================================================== */

    transition:
        width var(--search-transition),
        padding .3s step-end,
        text-indent .3s step-end;

    border-left: 2px solid rgb(27, 82, 96);
    box-shadow: inset 1px 0 0 0 var(--search-dark);
}


/* ==========================================================================
   ICON-WECHSEL
   ========================================================================== */

.icon-zoom-out {display: none;}

#input_search_icon:checked ~ .search-label .icon-zoom-out {
    display: inline-block;
}

#input_search_icon:checked ~ .search-label .icon-zoom-in {
    display: none;
}


/* ==========================================================================
   4. ZENTRALE FARB-STEUERUNG (DESKTOP)
   ========================================================================== */

.search-label:hover,
#input_search_icon:checked ~ .search-label,
#input_search_icon:checked ~ #search_input,
#input_search_icon:checked ~ #submit_search,
.searchfield.is-closing ~ .search-label,
.searchfield.is-closing .search-label {
    background-color: var(--search-blue);
    color: var(--search-text);
}


/* ==========================================================================
   TABLET-SCHUTZ
   ========================================================================== */

@media (max-width: 950px) and (min-width: 776px) {

    .searchfield {
        width: auto;
        padding: 0;
    }

    #input_search_icon:checked ~ #search_input {
        width: var(--search-width-tablet);
    }
}


/* ==========================================================================
   5. MOBILE OPTIMIERUNG
   ========================================================================== */

@media (max-width: 775px) {

    /* ====================================================================
       MOBILE HEADER-FIXIERUNG
       ==================================================================== */

    #header-links {
        display: block !important;
        position: fixed !important;
        top: 0;
        right: 10px;
        z-index: 10000;
        height: var(--search-height-mobile);
    }


    /* Desktop-Sprachen ausblenden */
    #header-links li.lang-link {
        display: none !important;
    }


    /* ====================================================================
       MOBILE ICONS
       ==================================================================== */

    .searchfield [class^="icon-"],
    .searchfield [class*=" icon-"] {
        font-size: var(--search-icon-size-mobile);
        transition: none;
    }


    /* ====================================================================
       MOBILE HÖHEN-SYSTEM
       --------------------------------------------------------------------
       Ein gemeinsamer Block ersetzt mehrere redundante Regeln.
       ==================================================================== */

    .searchfield,
    .search-label,
    #search_input,
    #submit_search {
        height: var(--search-height-mobile);
        line-height: var(--search-height-mobile);
        box-sizing: border-box;
        border-bottom: 2px solid var(--search-border-mobile);
    }


    /* Mobile nutzt bewusst flaches Design */
    .search-label,
    #search_input,
    #submit_search {
        border-left: none;
        transition: none;
    }


    /* ====================================================================
       MOBILE FARBLOGIK
       --------------------------------------------------------------------
       Überschreibt bewusst das Desktop-Blau.
       ==================================================================== */

    .search-label,
    #search_input,
    #submit_search,
    .searchfield.is-closing .search-label,
    #input_search_icon:checked ~ .search-label,
    #input_search_icon:checked ~ #search_input,
    #input_search_icon:checked ~ #submit_search,
    #search_input:focus ~ #submit_search {
        background: #fff;
        color: var(--search-mobile-icon);
    }


    /* ====================================================================
       MOBILE INPUT
       --------------------------------------------------------------------
       Verhindert sichtbares Blau beim Schließen.
       ==================================================================== */

    #search_input {
        background-color: #fff;
        transition: width var(--search-transition-mobile);
    }
}

/*
# Was konkret verbessert wurde

## Entfernte unnötige `!important`
Entfernt bei:
* transitions
* padding
* border-left
* background-color
* color
* line-height
* overflow
* white-space

Beibehalten nur dort, wo:
* Theme/CMS vermutlich aggressiv überschreibt
* Browser-Defaults kritisch sind
* Layout technisch abgesichert werden musste

---

# Mobile-Redundanzen reduziert
Vorher:
* viele einzelne Mobile-Overrides
* Desktop-Regeln mehrfach neutralisiert

Jetzt:
* gemeinsame Höhenblöcke
* gemeinsame Farbblöcke
* gemeinsame Icon-Logik

Dadurch:
* deutlich wartbarer
* weniger Konflikte
* weniger Kaskadenkämpfe

---

# Wichtigster struktureller Gewinn

Die CSS-Variablen.

Du kannst jetzt später zentral ändern:

```css
--search-blue
--search-height-desktop
--search-width-open
```

und die gesamte Komponente passt sich automatisch an.

Das reduziert Wartungskosten massiv.*/