/* Property/static/css/objektliste.css */

body,
html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%;
    background-color: #f0f0f0;
}

.objektliste-container {
    align-items: stretch;
    justify-content: center;
    /* Zentriert die Inhalte horizontal im Container */
    padding-top: 4rem;
    background-color: #ffffff;
    border-radius: 8px;
    color: #000000;
    margin-left: auto;
    /* Zentriert den Container horizontal */
    margin-right: auto;
    /* Zentriert den Container horizontal */
}

.main-content-container {
    flex-grow: 1;
    /* Lässt den Hauptinhalt den verbleibenden Raum ausfüllen */
    box-sizing: border-box;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    align-items: self-end;
    padding-bottom: 1rem;
}

.header h2 {
    margin: 0;
}

.sort-options {
    display: flex;
    align-items: center;
}

.sort-options label {
    margin-right: 10px;
}

.main-content {
    box-sizing: border-box;
}

/* Media Queries für kleinere Bildschirme */
@media (max-width: 768px) {
    .objektliste-container {
        padding-top: 1rem;
        flex-direction: column;
        /* Stapelt die Sidebar und den Hauptinhalt untereinander */
        min-width: 0;
        /* Entfernt die Mindestbreite, um auf kleinen Bildschirmen besser zu passen */
    }

    .sidebar,
    .main-content-container {
        width: 100%;
        /* Lässt die Sidebar und den Hauptinhalt die gesamte Breite einnehmen */
    }

    .header {
        display: grid;
        row-gap: .5rem;
    }
}

@media (max-width: 480px) {
    .objektliste-container {}
}


.settings-container {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 1rem;
    margin-bottom: 2rem;
}

.settings-container>form {
    display: flex;
    height: 100%;
    column-gap: 1rem;
}

.settings-container>form>input {
    height: 100%;
}

.custom-modal {
    z-index: 1050;
    /* Höher als die meisten Standardwerte */
}

.custom-modal-dialog {
    z-index: 1060;
    /* Etwas höher als das Modal selbst */
}