.artikel-iggywoo .kachel_wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: var(--absatz_abstand);
    padding-right: var(--absatz_abstand);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--absatz_abstand);
    /* align-items: flex-end; -- Dies würde alle Elemente der Reihe ausrichten, nicht nur spezifische */
}

/* Die erste Kachel (25% Breite) */
.artikel-iggywoo .kachel_wrapper > *:nth-child(1) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(25% - var(--absatz_abstand));
    -ms-flex: 0 0 calc(25% - var(--absatz_abstand));
    flex: 0 0 calc(25% - var(--absatz_abstand));
    max-width: calc(25% - var(--absatz_abstand));
    box-sizing: border-box;
    align-self: flex-end; /* Nur dieses Element am unteren Ende ausrichten */
}

/* Die zweite Kachel (50% Breite) */
.artikel-iggywoo .kachel_wrapper > *:nth-child(2) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(50% - var(--absatz_abstand));
    -ms-flex: 0 0 calc(50% - var(--absatz_abstand));
    flex: 0 0 calc(50% - var(--absatz_abstand));
    max-width: calc(50% - var(--absatz_abstand));
    box-sizing: border-box;
}

/* Die dritte Kachel (25% Breite) */
.artikel-iggywoo .kachel_wrapper > *:nth-child(3) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(25% - var(--absatz_abstand));
    -ms-flex: 0 0 calc(25% - var(--absatz_abstand));
    flex: 0 0 calc(25% - var(--absatz_abstand));
    max-width: calc(25% - var(--absatz_abstand));
    box-sizing: border-box;
    align-self: flex-end; /* Nur dieses Element am unteren Ende ausrichten */
}

/* Kacheln ab der vierten Position (alle 25% Breite) */
.artikel-iggywoo .kachel_wrapper > *:nth-child(n+4) {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(25% - var(--absatz_abstand));
    -ms-flex: 0 0 calc(25% - var(--absatz_abstand));
    flex: 0 0 calc(25% - var(--absatz_abstand));
    max-width: calc(25% - var(--absatz_abstand));
    box-sizing: border-box;
}

/* Media Queries */
@media screen and (max-width: 1024px) {
    .artikel-iggywoo .kachel_wrapper {
        display: grid; /* Wechsel zu Grid */
        grid-template-columns: 1fr 1fr 1fr; /* Drei gleich große Spalten */
        gap: var(--absatz_abstand); /* Behält den Abstand bei */

        /* Flexbox-Eigenschaften für den Übergang zu Grid zurücksetzen/überschreiben */
        -webkit-box-orient: unset;
        -webkit-box-direction: unset;
        -webkit-flex-direction: unset;
        -ms-flex-direction: unset;
        flex-direction: unset;
        -webkit-flex-wrap: wrap; /* Beibehalten, falls Elemente weiterhin umbrechen sollen */
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: unset; /* Grid übernimmt die Verteilung */
        align-items: unset; /* Reset der Ausrichtung des Containers */
    }

    .artikel-iggywoo .kachel_wrapper > *,
    .artikel-iggywoo .kachel_wrapper > *:nth-child(1),
    .artikel-iggywoo .kachel_wrapper > *:nth-child(2),
    .artikel-iggywoo .kachel_wrapper > *:nth-child(3),
    .artikel-iggywoo .kachel_wrapper > *:nth-child(n+4) {
        /* Alle Kacheln im Grid auf gleiche Größe setzen und Flexbox-Eigenschaften zurücksetzen */
        width: auto !important; /* Breite vom Grid übernehmen lassen */
        max-width: unset !important; /* Max-Breite vom Grid übernehmen lassen */
        -webkit-box-flex: unset !important;
        -webkit-flex: unset !important;
        -ms-flex: unset !important;
        flex: unset !important;
        align-self: unset !important; /* Individuelle Ausrichtung zurücksetzen */
    }
}

@media screen and (max-width: 800px) {
    .artikel-iggywoo .kachel_wrapper {
        grid-template-columns: 1fr 1fr ; /* Drei gleich große Spalten */
    }
}

@media screen and (max-width: 600px) {
    .artikel-iggywoo .kachel_wrapper {
        grid-template-columns: 1fr ; /* Drei gleich große Spalten */
    }
}