.card-slider-item-layout-1 .sp-list-item-content-facts .material-symbols-outlined {
    color: white;
 }

  .card-slider-item-layout-1 .sp-list-item-content-facts {
    grid-template-columns: 1fr 1fr;
  }

/* nur ein Test */
.container-flex {
    display: flex;
    flex-direction: column;
    gap: 40px;
}



@media(min-width: 0px) {

    #filter-anwenden {display: none;}

    .sp-style {
        display: none;
    }

    .sp-filter-container {
        display: flex;
        justify-content: space-between;
        align-self: stretch;
        flex-direction: column;
    }

    .sp-filter {
        display: flex;
        flex-direction: column;
    }
    .sp-filter-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .sp-filter-group label {
        font-weight: bold;
        display: none; /* Verstecke die Labels */
    }


    .sp-filter-group select {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
        width: 200px;
    }

    .sp-filter-group select {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 250px;
        color: #999; /* Farbe für den Platzhaltertext */
    }

    .sp-filter-group select{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 20px;
        border-bottom: 1px solid rgba(9, 9, 9, 0.20);
    }


    .sp-filter-group select option:first-child {
        color: #999; /* Farbe für den Platzhaltertext */
    }

    .sp-filter-group select:focus {
        color: #333; /* Farbe für den ausgewählten Wert */
    }

    .sp-filter-group select option:not(:first-child) {
        color: #333; /* Farbe für die Optionen */
    }

    .sp-filter-group select {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 250px;
        color: #999; /* Farbe für den Platzhaltertext */
        font-size: 16px;
    }



    .sp-filter-group select:focus {
        color: #333; /* Farbe für den ausgewählten Wert */
        outline: none;
        border-color: var(--Red);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .sp-filter-group select option:not(:first-child) {
        color: #333; /* Farbe für die Optionen */
    }

    .sp-filter-group select {
        border: none;
        border-bottom: 1px solid rgba(9, 9, 9, 0.20);
        border-radius: 0px;
    }



    .sp-sort-container {
        display: flex;
        gap: var(--Spacing-Small-Spacing-2, 16px);
        flex-wrap: wrap;
    }



    .sp-list-container {
        flex-direction: column;
        gap: 10px;
    }

    .sp-list-container.kachel {
        gap: 20px;
    }

    #sp-list-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    #sp-list-table th {
        padding: 17px 16px;
        text-align: left;
    }

    #sp-list-table td {
        padding: 35px 16px;
        text-align: left;
    }

    #sp-list-table tbody tr:first-child{
        border-top: 10px solid #f6f6f6;
    }

    #sp-list-table th {
        background-color: #E7E8E8;
    }


    .sp-list-item td {
        padding: 10px;
    }

    #sp-list-table {
        display:none;
    }

    #sp-list-table .sp-list-item {
    padding: var(--Spacing-Small-Spacing, 24px);
    align-items: flex-start;
    gap: var(--Spacing-Mid-Spacing, 40px);
    align-self: stretch;
    border-bottom: 8px solid #f6f6f6;
        background-color: white;
    }



    .sp-list-item-image-container {
        display: flex;
        max-height: 100%;
    }

    .sp-list-item-image-container iframe {
        width: 100%;
        height: 100%;
    }

    .sp-list-item-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16/9;
        max-height: 300px;
    }

    .sp-list-item-content-container{
        display: flex;
        padding: 8px 0px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Spacing-Small-Spacing, 16px);
        flex: 1 0 0;
    }

    section.ce-color-3 .sp-list-item-content-container a{
        color: var(--Red);
    }

    .sp-list-item-content-facts {
        display: flex;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        align-items: flex-start;
        gap: var(--Spacing-Inner-Spacing, 16px);
        align-self: stretch;
        padding: 0;
        flex-direction: column;
    }

    .sp-list-item-content-facts .material-symbols-outlined {
        color: var(--Black);
    }

    .sp-list-item-content-facts li {
        display: flex;
        gap: 8px;
    }

    .sp-list-item-content-fact {padding-top: 2px;}

    .sp-list-item-content-container a{
        font-weight: 700;
    }


    #sp-list-cards{
        flex-direction: column;
    }

    #sp-list-cards {
        /* display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        */
        display: flex;
        gap: 20px;
    }
    #sp-list-cards .sp-list-item {
        display: flex;
        padding: var(--Spacing-Small-Spacing, 24px);
        gap: var(--Spacing-Mid-Spacing, 40px);
        align-self: stretch;
        background-color: white;
        flex-direction: column;
    }


}
@media(min-width: 576px) {}
@media(min-width: 768px) {
    .sp-list-item-content-facts {
        display: grid;
    }
}
@media(min-width: 992px) {
    #filter-anwenden {display: flex; align-items: center;align-self: baseline;}

    .sp-filter-container {gap: 40px;}
    .sp-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        flex-direction: row;
    }

    .sp-list-item-image-container {
        display: flex;
        max-width: 400px;
        max-height: 100%;
    }

    #sp-list-cards .sp-list-item {
        display: grid;
        padding: var(--Spacing-Small-Spacing, 24px);
        align-items: center;
        gap: var(--Spacing-Mid-Spacing, 100px);
        align-self: stretch;
        background-color: white;
        flex-direction: row;
        grid-template-columns: 2fr 3fr;
    }




    .sp-list-item-content-facts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Spacing-Inner-Spacing, 8px);
        align-self: stretch;
        padding: 0;
    }

    .sp-filter button {
        padding: 10px 20px;
        background-color:var(--Red);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    .sp-filter button:hover {
        background-color: var(--RedFillHover);
    }

    .sp-style {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .sp-style button {
        padding: 10px 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f0f0f0;
        cursor: pointer;
        font-size: 14px;
    }

    .sp-style button:hover {
        background-color: #ddd;
    }

    .sp-style button.aktiv {
        background-color: var(--Red);
        color: white;
        border-color: var(--Red);
    }


}
@media(min-width: 1200px) {
    .sp-filter-container {flex-direction: row;}

    .sp-list-item-content-facts {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        align-items: flex-start;
        gap: var(--Spacing-Inner-Spacing, 16px);
        align-self: stretch;
        padding: 0;
    }
}
@media(min-width: 1400px) {
    #sp-list-cards .sp-list-item {
        gap: var(--Spacing-Mid-Spacing, 150px);
    }
}
@media(min-width: 1920px) {}


@media(max-width: 1400px) {
.sp-list-item-content-container:has(+ .contact-container) .sp-list-item-content-facts {
    display: flex;
}
}


@media(min-width: 992px) {
#sp-list-cards .sp-list-item:has(> *:nth-child(3):last-child) {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}
}