/* Stile FÜR DIE TABELLE */
.gear-table {
    width: 100%; /* Tabelle nimmt die volle Breite des Containers ein */
    border-collapse: collapse; /* Rahmen werden zusammengeführt für ein einheitliches Erscheinungsbild */
    margin-top: 20px; /* Abstand nach oben */
    background-color: rgba(255, 255, 255, 0.7); /* Weißer, transparenter Hintergrund */
    border-radius: 8px; /* Abgerundete Ecken */
    overflow: hidden; /* Verhindert, dass innere Elemente die abgerundeten Ecken überlappen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefeneffekt */
}

/* Stil für Tabellenkopfzellen */
.gear-table th {
    background-color: rgba(233, 147, 43, 0.9); /* Orangefarbener, transparenter Hintergrund */
    color: #333; /* Dunkelgraue Textfarbe */
    text-align: left; /* Text linksbündig ausrichten */
    padding: 12px 15px; /* Innenabstand für Zellen */
    border: 1px solid rgba(0, 0, 0, 0.3); /* Dunkler, transparenter Rahmen */
}

/* Stil für Tabellendatenzellen */
.gear-table td {
    padding: 10px 15px; /* Innenabstand für Zellen */
    border: 1px solid rgba(0, 0, 0, 0.3); /* Dunkler, transparenter Rahmen */
    background-color: rgba(255, 255, 255, 0.5); /* Mittlerer transparenter weißer Hintergrund */
}

/* Stil für Tabellenzeilen - Hintergrund transparent setzen */
.gear-table tr {
    background-color: transparent !important; /* Transparenter Hintergrund für Zeilen */
}

/* Hover-Effekt für Tabellenzeilen - bleibt transparent */
.gear-table tr:hover {
    background-color: transparent !important; /* Bleibt transparent beim Überfahren mit Maus */
}

/* Stil für die Quantity-Spalte */
.quantity {
    text-align: center; /* Zentriert den Text in der Quantity-Spalte */
}

/* Filter-Stile */
/* Container für Filter-Elemente */
.filter-container {
    display: flex; /* Flexbox-Layout für Anordnung der Filter */
    flex-wrap: wrap; /* Erlaubt Umbruch der Filter-Elemente */
    gap: 15px; /* Abstand zwischen den Filter-Elementen */
    margin-bottom: 20px; /* Abstand nach unten */
    background-color: rgba(51, 51, 51, 0.85); /* Dunkler, transparenter Hintergrund */
    padding: 15px; /* Innenabstand */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefeneffekt */
}

/* Stil für einzelne Filter-Gruppen */
.filter-group {
    flex: 1; /* Flexible Breite, um verfügbaren Platz auszufüllen */
    min-width: 200px; /* Minimale Breite der Filter-Gruppen */
}

/* Stil für Filter-Beschriftungen */
.filter-group label {
    display: block; /* Blockelement für volle Breite */
    margin-bottom: 5px; /* Abstand nach unten */
    color: #F7EB95; /* Hellgelbe Textfarbe */
    font-weight: bold; /* Fettgedruckter Text */
}

/* Stil für Filter-Dropdowns */
.filter-group select {
    width: 100%; /* Volle Breite des Containers */
    padding: 10px; /* Innenabstand für bessere Bedienbarkeit */
    border-radius: 4px; /* Leicht abgerundete Ecken */
    border: 1px solid #ccc; /* Hellgrauer Rahmen */
    background-color: white; /* Weißer Hintergrund */
}

/* Stil für den Filter-Zurücksetzen-Button */
.reset-filters {
    background-color: #e9932b; /* Orangefarbener Hintergrund */
    color: white; /* Weiße Textfarbe */
    border: none; /* Kein Rahmen */
    padding: 10px 15px; /* Innenabstand */
    border-radius: 4px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger-Cursor beim Überfahren */
    margin-top: 25px; /* Abstand nach oben */
    font-weight: bold; /* Fettgedruckter Text */
}

/* Hover-Effekt für den Filter-Zurücksetzen-Button */
.reset-filters:hover {
    background-color: #d17e1f; /* Dunkleres Orange beim Überfahren */
}

/* Stil für Statusmeldungen (z.B. "Keine Ausrüstung gefunden") */
.status-message {
    text-align: center; /* Zentrierter Text */
    padding: 20px; /* Innenabstand */
    color: #e9932b; /* Orangefarbener Text */
    font-weight: bold; /* Fettgedruckter Text */
}