/* --- Tabelle Grundstruktur --- */
.member-container {
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto !important;
    border-collapse: collapse !important;
    border: none !important;
}

.member-container tr {
    display: flex !important;
    width: 100% !important;
    border-bottom: 1px solid #eee !important;
    align-items: center !important;
}

/* Wechselnde Richtung (Bild links/rechts) */
.member-container tr:nth-child(even) {
    flex-direction: row-reverse !important;
}

.member-container td {
    width: 50% !important;
    padding: 20px !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
}

/* --- Bild-Container & Flip-Effekt --- */
.image-wrapper {
    position: relative !important; /* Wichtig für absolute Positionierung der Bilder */
    width: 150px !important;      /* Gleiche Breite wie die Bilder */
    height: 150px !important;     /* Gleiche Höhe wie die Bilder */
    margin: 0 auto !important;    /* Zentrierung in der Zelle */
    perspective: 1000px !important; /* Erzeugt den 3D-Raum */
}

.image-wrapper img {
    position: absolute !important; /* Bilder liegen exakt übereinander */
    top: 0 !important;
    left: 0 !important;
    width: 150px !important;
    height: 150px !important;
    object-fit: contain !important;
    transition: transform 0.6s !important;
    backface-visibility: hidden !important; /* Versteckt die Rückseite beim Drehen */
    display: block !important;
}

/* Das normale Bild (Vorderseite) - In deinem PHP das zweite <img> */
.image-wrapper img:last-child {
    z-index: 2 !important;
    transform: rotateY(0deg) !important;
}

/* Die Maske (Rückseite) - In deinem PHP das erste <img> */
.image-wrapper img:first-child {
    z-index: 1 !important;
    transform: rotateY(180deg) !important;
}

/* Hover-Effekt: Beide Bilder drehen */
.image-wrapper:hover img:last-child {
    transform: rotateY(-180deg) !important;
}

.image-wrapper:hover img:first-child {
    transform: rotateY(0deg) !important;
}

/* --- Text-Styling --- */
.text-wrapper {
    text-align: left !important;
}

.text-wrapper p {
    margin: 4px 0 !important;
}

.text-wrapper strong, 
.text-wrapper b {
    font-weight: 900 !important; 
    -webkit-font-smoothing: antialiased !important;
    display: inline-block !important;
    color: red !important; /* Deine Farbvorgabe für strong */
}