.aw-textmedia-wrapper {
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

/* Neues 33% / 66% Grid mit Flexbox */

.aw-textmedia-wrapper .text ul{
 padding-left:30px;
}
.aw-textmedia-wrapper.flex-33-66 {
    display: flex;
    flex-wrap: wrap;
}

.aw-textmedia-wrapper.flex-33-66 .text {
    width: 33%;
    flex-shrink: 0;
}

.aw-textmedia-wrapper.flex-33-66 .media {
    width: 66%;
    flex-shrink: 0;
}

/* Reihenfolge tauschen (Text rechts, Bild links) */
.aw-textmedia-wrapper.flex-33-66.reverse {
    flex-direction: row-reverse;
}

/* Image above / below bleibt flex-direction: column */
.aw-textmedia-wrapper.image-above,
.aw-textmedia-wrapper.image-below {
    flex-direction: column;
}

/* Text-Breite je nach Image-Width */
.aw-textmedia-wrapper.image-width-100 .text {
    width: 100%;
}

.aw-textmedia-wrapper.image-width-30 .media {
    width: 30%;
}

.aw-textmedia-wrapper.image-width-30 {
    align-items: center;
}
.aw-textmedia-wrapper.image-width-30 .text {
    width: 70%;
    display: flex;
    flex-direction: column; 
   
    justify-content: center; 
}

.aw-textmedia-wrapper.image-width-50 .media,
.aw-textmedia-wrapper.image-width-50 .text {
    width: 50%;
}

.aw-textmedia-wrapper.image-width-70 .media {
    width: 70%;
}

.aw-textmedia-wrapper.image-width-70 .text {
    width: 30%;
}

.aw-textmedia-wrapper .media {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aw-textmedia-wrapper.image-right .media img {
    max-width: 100%;
    height: auto;
}

.aw-textmedia-wrapper.image-left {
    flex-direction: row-reverse;
}

.aw-textmedia-wrapper.image-above {
    flex-direction: column-reverse;
}

.aw-textmedia-wrapper.image-above .text,
.aw-textmedia-wrapper.image-above .media,
.aw-textmedia-wrapper.image-below .text,
.aw-textmedia-wrapper.image-below .media {
    width: 100%;
}

/* Mehrspaltige Media-Galerien */
.aw-textmedia-wrapper .media.col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.aw-textmedia-wrapper .media.col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.aw-textmedia-wrapper .media.col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* Button Area */
.aw-textmedia-button-area {
    display: flex;
    margin-top: calc(var(--section-margin-bottom) / 2);
}

.aw-textmedia-button-area.left {
    justify-content: flex-start;
}

.aw-textmedia-button-area.center {
    justify-content: center;
}

.aw-textmedia-button-area.right {
    justify-content: flex-end;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (width < 64rem) {
    .aw-textmedia-wrapper {
        gap: 1.5rem;
    }
}

/* Auf Mobile wird 33/66 zu 100% */
@media (width < 48rem) {
    .aw-textmedia-wrapper {
        flex-direction: column;
    }

    .aw-textmedia-wrapper.image-left {
        flex-direction: column-reverse;
    }

    .aw-textmedia-wrapper.image-width-30 .text,
    .aw-textmedia-wrapper.image-width-30 .media,
    .aw-textmedia-wrapper.image-width-50 .media, 
    .aw-textmedia-wrapper.image-width-50 .text,
    .aw-textmedia-wrapper.image-width-70 .media, 
    .aw-textmedia-wrapper.image-width-70 .text,
    .aw-textmedia-wrapper.flex-33-66 .text,
    .aw-textmedia-wrapper.flex-33-66 .media {
        width: 100%;
    }
}

/* Weitere mobile Optimierungen */
@media (width < 40rem) {
    .aw-textmedia-wrapper .media.col-2,
    .aw-textmedia-wrapper .media.col-3,
    .aw-textmedia-wrapper .media.col-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}
