/* ==========================================================
   NaturGewürz – Gewürzlexikon
   Suchmodul
   ========================================================== */
    

/* ==========================================================
   01 – Grundbereich
   ========================================================== */

.ng-lexikon-suche {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 45px;

    font-family: 'Montserrat', sans-serif;
    font-style: normal;

    box-sizing: border-box;
}


/* ==========================================================
   02 – Hinweis
   ========================================================== */

.ng-lexikon-suche-hinweis {
    margin: -40px 0 80px;
    text-align: center;
}

.ng-lexikon-suche-hinweis p {
    margin: 0;
    padding: 0;
}


/* ==========================================================
   03 – Suchfelder
   ========================================================== */

.ng-lexikon-suche-felder {
    display: flex;

    width: 100%;

    gap: 50px;

    align-items: flex-start;
    
}


/* ==========================================================
   04 – Einzelnes Feld
   ========================================================== */

.ng-lexikon-suche-feld {
    position: relative;
   
    flex: 1;

    width: 50%;
    min-width: 0;
}


/* ==========================================================
   05 – Beschriftungen
   ========================================================== */

.ng-lexikon-suche-feld label {

    display: block;

    margin: 0 0 10px;

    font-family: 'Montserrat', sans-serif;

    font-size: 16px;

    font-weight: 600;

    color: #666;
}


/* ==========================================================
   06 – Suchfeld
   ========================================================== */

#ng-lexikon #ng-lexikon-search {
    display: block;

    width: 100%;
    height: 44px;

    padding: 12px 0;

    box-sizing: border-box;

    border: none;
    border-bottom: 1px solid #35ac02;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
    outline: none;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;

    color: #555;
}

#ng-lexikon #ng-lexikon-search::placeholder {
    color: #b5b5b5;
    opacity: 1;
}

#ng-lexikon #ng-lexikon-search:focus {
    border-bottom: 2px solid #35ac02;
}


/* ==========================================================
   Select – Informationsauswahl
   ========================================================== */


.ng-lexikon-auswahl {
    position: relative;
}


/* Select Grunddarstellung */

#ng-lexikon #ng-lexikon-modus {

    display: block;

    width: 100%;
    height: 38px;

    padding: 0 60px 0 0;

    box-sizing: border-box;

    border: none;
    border-bottom: 1px solid #35ac02;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
    outline: none;

    font-family: 'Montserrat', sans-serif;

    font-size: 16px;

    font-weight: 400;

    color: #555;

    cursor: pointer;
}


/* Fokus */

#ng-lexikon #ng-lexikon-modus:focus {

    border-bottom: 2px solid #35ac02;

}


/* ==========================================================
   07 – Auswahl
   ========================================================== */

.ng-lexikon-auswahl {
    position: relative;

}

#ng-lexikon #ng-lexikon-modus {
    display: block;

    width: 100%;
    height: 44px;

    padding: 12px 58px 12px 0;

    box-sizing: border-box;

    border: none;
    border-bottom: 1px solid #35ac02;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
    outline: none;

    /*appearance: none;
    -webkit-appearance: none;
    */

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;

    color: #555;

    cursor: pointer;
}



/* ==========================================================
   09 – Fehlermeldungen
   ========================================================== */

#ng-lexikon .ng-lexikon-fehler {

    min-height: 22px;

    margin: 8px 0 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;

    color: #cc0000 !important;
}

#ng-lexikon #ng-lexikon-search.ng-lexikon-fehlerfeld,
#ng-lexikon #ng-lexikon-modus.ng-lexikon-fehlerfeld {
    border-bottom-color: #cc0000 !important;
}

.ng-lexikon-keine-treffer {
    color: #cc0000 !important;
}


/* ==========================================================
   10 – Aktionen
   ========================================================== */

.ng-lexikon-suche-aktionen {
    display: flex;

    justify-content: flex-end;

    gap: 25px;

    width: 100%;

    margin-top: 35px;
}


/* ==========================================================
   11 – Buttons
   ========================================================== */

.ng-lexikon-suche-button,
.ng-lexikon-suche-loeschen {
    min-width: 185px;

    padding: 2px 25px 15px 25px;

    box-sizing: border-box;

    border: 0;
    border-radius: 3px;

    background: #749f31;
    color: #fff;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.2s ease;
}

.ng-lexikon-suche-button:hover {
    background: #777;
}


/* ==========================================================
   12 – Mobil
   ========================================================== */

@media (max-width: 768px) {

    .ng-lexikon-suche {
        max-width: 100%;
    }

    .ng-lexikon-suche-felder {
        flex-direction: column;

        gap: 20px;
    }

    .ng-lexikon-suche-feld {
        width: 100%;
    }

    .ng-lexikon-suche-aktionen {
        flex-direction: column;

        gap: 15px;
    }

    .ng-lexikon-suche-button {
        width: 100%;
    }

}

/* ==========================================================
   TEST A – Select Darstellung
   ========================================================== */


#ng-lexikon .ng-lexikon-auswahl select {

    width:100% !important;

    height:40px !important;

    padding:0 60px 0 0 !important;

    border:none !important;

    border-bottom:1px solid #35ac02 !important;

    background:transparent !important;

    font-family:'Montserrat', sans-serif !important;

    font-size:16px !important;

    font-weight:400 !important;

    color:#555 !important;

    /*appearance:none !important;
    -webkit-appearance:none !important;
    */
}


#ng-lexikon .ng-lexikon-auswahl::after {

    top:0 !important;

    right:0 !important;

    width:46px !important;

    height:40px !important;

}