.nausys-filter-form, .nausys-filter-form-min {
    background-color: var(--main-color-2); /* Hintergrundfarbe Main 2 */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: white;
}

.nausys-filter-form h2, .nausys-filter-form-min h2 {
    margin-top: 0;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.nausys-filter-form p, .nausys-filter-form-min p {
    color: white;
    margin-bottom: 20px;
    font-size: 16px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.filter-item {
    flex: 1 1 calc(33.333% - 10px); /* Drei Spalten am Desktop */
    position: relative;
}

/* Spezifische Anpassung für die verkürzte Form */
.nausys-filter-form-min .filter-item {
    flex: 1 1 calc(50% - 10px); /* Zwei Spalten am Desktop */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .filter-item, .nausys-filter-form-min .filter-item {
        flex: 1 1 100%; /* Eine Spalte auf mobilen Geräten */
    }
}

/* Styles für Dropdowns */
.filter-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: white; /* Weißer Hintergrund */
    color: #002E5D;
    appearance: none; /* Entfernt Standard-Styling */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23002E5D" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>'); /* Eigener Dropdown-Pfeil */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* Styles für Datepicker */
.filter-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: white !important; /* Weißer Hintergrund für Datepicker */
    color: #002E5D;
    appearance: none; /* Entfernt das Standard-Styling */
    position: relative; /* Für Positionierung des Icons */
}

/* WebKit-spezifisches Styling für den Datepicker */
.filter-input::-webkit-calendar-picker-indicator {
    opacity: 1; /* Macht das Icon sichtbar */
    position: absolute; /* Korrigiert die Position des Icons */
    right: 10px; /* Position des Icons im Feld */
    pointer-events: all; /* Ermöglicht das Klicken auf das Icon */
    cursor: pointer; /* Ändert den Cursor auf Pointer für bessere UX */
}

/* Positionierung der Icons */
.filter-item i {
    position: absolute;
    right: 35px; /* Abstand rechts vom Icon zum Dropdown Pfeil */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #002E5D;
}

/* Styles für den Button */
.filter-button {
    background-color: var(--main-color-1)!important; /* Hauptfarbe Main 1 */
    color: white;
    padding: 10px 20px;
    border: 2px solid var(--main-color-1)!important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, text-decoration 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Button über die gesamte Breite */
}

.filter-button i {
    margin-right: 8px;
}

.filter-button .fa-regular {
    color: #fff!important;
}

.filter-button:hover {
    background-color: transparent!important; /* Hintergrundfarbe auf transparent bei Hover */
    color: white; /* Text bleibt weiß */
    text-decoration: underline; /* Text unterstreichen bei Hover */
    border: 2px solid var(--main-color-1)!important;
}

/* Link "Erweiterte Suche" */
.advanced-search-link {
    color: #002E5D;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: right; /* Rechtsbündig */
    display: block;
}

.advanced-search-link:hover {
    color: white; /* Schriftfarbe auf Weiß bei Hover */
    text-decoration: underline;
}

.filter-item #start_date, .filter-item #start_date_min {
    z-index: 998!important;
    position: relative;
}

.filter-item .fa-regular {
    z-index: 998!important;
}

/* Datepicker Styles */
.ui-datepicker-header.ui-widget-header {
    /* Hintergrundfarbe anpassen, wenn gewünscht */
}

.ui-datepicker-week-end:not(.ui-state-disabled) .ui-state-default {
    background-color: var(--main-color-2) !important;
    color: #fff !important;
}

.ui-datepicker-week-end:not(.ui-state-disabled) .ui-state-default:hover {
    background-color: var(--main-color-1) !important;
    color: #fff !important;
}

/* Styling für den Platzhalter-Text */
#start_date::placeholder {
    color: #002E5D!important; /* Farbe des Platzhalters */
    font-size: 16px;
    opacity: 1; /* Opazität sicherstellen */
    
}

/* Styling für den ausgefüllten Text im Datepicker-Feld */
#start_date {
    color: #002E5D!important;
    font-size: 16px; /* Schriftgröße */
    padding: 5px; /* Innenabstand für das Feld */
    border: 1px solid #ccc; /* Rahmen für das Eingabefeld */
    border-radius: 4px; /* Abgerundete Ecken */
    background-color: #f9f9f9; /* Hintergrundfarbe des Eingabefeldes */
    transition: border-color 0.3s ease; /* Übergang für den Rahmen bei Fokus */
    padding-left:10px!important;
}

/* Styling bei Fokus auf das Eingabefeld */
#start_date:focus {
    border-color: #0073aa; /* Rahmenfarbe bei Fokus */
    outline: none; /* Kein Umriss bei Fokus */
}