/* INPUT */
.search-input{
width: 100%;
padding: 14px 160px 14px 20px;
border-radius: 40px;
border: 1px solid #dcdcdc;
font-size: 16px;
box-sizing: border-box;
background: #f8f9fb;

outline: none;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
}


.search-input:focus{
border-color:#0b5ed7;
background:#fff;
box-shadow:0 0 0 3px rgba(11,94,215,0.15);
}


/* BUTTON */
.search-button{
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);

height: 40px;
padding: 0 22px;

border-radius: 30px;
border: none;

background: linear-gradient(180deg, #0a53c1, #0b5ed7);
color: #fff;

font-size: 15px;
font-weight: 600;
cursor: pointer;

transition: all 0.2s ease;
}

.search-button:hover{
background: linear-gradient(180deg, #1558b0, #083b7f);
transform: translateY(-50%) scale(1.03);
}

.search-button:active{
transform: translateY(-50%) scale(0.97);
}


.search-wrapper {
position: relative;
max-width: 600px;
margin: 0 auto;
}


/* =================================================
SEARCH BOX (IN CARD)
================================================= */

.search-box{
max-width:700px;
margin:0 auto;
}

/* Text oben */
.search-intro{
font-size:16px;
color:#666;
margin-bottom:20px;
text-align:center;
}

/* Formular */
.search-form{
width:100%;
}


.formular-box{
max-width:800px;
margin:0 auto;
padding:30px;
background:#fff;
border-radius:14px;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
}


/* AUTOCOMPLETE CONTAINER */
.ui-autocomplete {
border-radius: 14px;
overflow: hidden;
border: 1px solid #ddd;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
margin-top: 8px; /* Abstand zum Input */
}

/* LISTE */
.ui-menu {
border-radius: 14px;
padding: 6px 0;
}

/* EINTRÄGE */
.ui-menu-item-wrapper {
padding: 12px 16px;
transition: background 0.15s ease;
}

/* HOVER */
.ui-menu-item-wrapper:hover {
background: #f1f5ff;
}

/* AKTIV (Tastatur-Navigation) */
.ui-state-active {
background: #e7f0ff !important;
border: none !important;
color: #000 !important;
}


/* =================================================
MOBILE SEARCH LAYOUT
================================================= */

@media (max-width: 600px){

.search-wrapper{
display:flex;
flex-direction:column;
gap:10px;
}

/* Input wieder normale Breite (kein Platz für Button reservieren) */
.search-input{
padding:14px 20px;
}

/* Button unter das Input */
.search-button{
position:static;
transform:none;
width:100%;
height:45px;
border-radius:30px;
}

}