/**
 * CSS lässt sich nicht komplet isolieren denn es ist mit
 * z.B. mit Komponenten von vwe-menu eng verflochten ich habe
 * hier nur CSS ausgelagert die sicher zu Search-menu angehört.
 * Alles andere bedarf eine aufwendigere Aufarbeitung.
 */
#search-menu {
    flex-grow: 1;
    text-align: right;
    min-width: 0;
}
#search-menu .search-nav {
    display: flex;
    justify-content: center;
    top: 1rem;
}
#search-menu .header-container, #search-menu .filter-container {
    white-space: nowrap;
    margin: .25rem 0;
    padding: .5rem;
    background-color: var(--defaultBgColor);
    border: .0625rem solid var(--lightBorderColor);
    box-shadow: inset .1rem .1rem .5rem var(--mainMenuShadowColor02);
    border-radius: var(--defaultBorderRadius);
}
#search-menu .header-block {
    white-space: nowrap;
    width: 25.5rem;
}
#search-menu .header-block:first-child {
    margin-bottom: .25rem;
}
#search-menu .header-block label {
    text-align: right;
    margin-right: .25rem;
}
#search-menu .header-block form {
    display: inline-block;
}
#search-menu .header-block select {
    padding: .2rem;
    width: 14.2rem;
}
#search-menu .global-search {
    display: flex;
}
#search-menu .global-search label {
    width: 40%;
    margin-top: .3rem;
    margin-left: .4rem;
}
#search-menu .search-nav .separator-vertical {
    display:none;
}
#search-menu .header-block .ui-autocomplete-input {
    width: 12.2rem;
    padding: .25rem .5rem;
    font-size: 1rem;
    border: .0625rem solid var(--inputBorderColor);
    border-radius: var(--defaultBorderRadius);
    color: var(--inputTextColor);
    background-color: var(--defaultBgColor);
    cursor: pointer;
}
#ham {
    font-size: 2rem;
    background-color: transparent;
    color: var(--hamColor);
    border-radius: var(--defaultBorderRadius);
    border: .125rem solid var(--hamColor);
    margin-right: .5rem;
    position: relative;
}
#ham:hover {
    color: var(--defaultBgColor);
    background-color: var(--defaultContrastColor);
}
#ham:not([disabled]):hover, #ham:focus {
    outline: .125rem solid var(--accentLighterColor075);
    outline-offset: .1875rem;

    z-index: 2;
    border-color: var(--accentColor);
    box-shadow: inset 0 .0625rem .0625rem var(--shadowColor0075), 0 0 .5rem var(--accentColor);
}
#searchPattern {
    width: 12.21rem;
    padding: 0.27rem .5rem;
}
button#globalesuche-button{
    margin-top: 4px;
    height: unset;
}
@media screen and (min-width: 400px) {
    #search-menu, #menu-button { margin-right: 1rem; margin-top: .25rem; }
    #search-menu .search-nav .separator-vertical{ display:none; }
}

@media screen and (min-width: 800px) {
    #search-menu .search-nav { flex-wrap: nowrap;}
    #search-menu .header-container { display: flex; flex-direction: column; }
    #search-menu .header-block { margin: 0 .27rem; }
    #search-menu .search-nav .separator-vertical{ display:block; }
    #search-menu .search-nav { /* right: -2rem;  max-width: 31rem; */ }
}

@media screen and (min-width: 1060px) {
    #ham { display: none; }
    #search-menu .search-nav { margin-top: 0; padding: .25rem 0; display: flex; height: auto; justify-content: right; }
    #search-menu .header-container { margin-bottom: .25rem; }
    #search-menu .search-nav .separator-vertical{ display:block; }
}
@media screen and (min-width: 1300px) {
    /* ab hier Suchformular ausblenden*/
    #searchPattern {
        width: 16.05rem;
    }
    #search-menu .header-block { width: 32rem; }
    #search-menu .header-block .ui-autocomplete-input, #search-menu .header-block select { width: 18rem; }  /* max: 15.25rem (wegen Test Textabstaende*/
}