/* Grundlegende Styles für die Flipcard */
.flip-card-container {
    perspective: 1000px;
    width: 300px;
    min-height: 300px;
    height: auto;
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    z-index: 1;
}

/* Spezielle Regeln für Container 1 */
#container1 .flip-card-container {
    flex: 1 1 auto;
    min-width: 250px;
    width: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
}

/* Hauptcontainer für Flipcard und Liste */
.content-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(15px, 3vw, 30px);
    margin: 20px 0;
    position: relative;
    width: 100%;
    overflow: visible;
    flex-wrap: wrap;
}

/* Container1 spezifische Content-Box */
#container1 .content-box {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}

.flip-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
}

/* Karte beim Hover drehen */
@media (hover: hover) {
    .flip-card-container:hover .flip-card {
        transform: rotateY(180deg);
    }

    .flip-card-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
}

/* Für Touch-Geräte - wird durch JS gesteuert */
.flip-card-container.flipped .flip-card {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    min-height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: clamp(15px, 2vw, 20px);
    box-sizing: border-box;
    overflow-y: auto;
}

/* Zusätzliche Anpassung für Listen innerhalb der Flipcard */
.flip-card-front .feature-list,
.flip-card-back .feature-list {
    width: 100%;
    padding-left: 10px;
    text-align: left;
    margin-bottom: 0;
}

.flip-card-front {
    background-color: #e0f7fa, #e8f5e9;
    color: #333;
    z-index: 2;
    border: 1px solid #e9ecef;
}

.flip-card-back {
    background: linear-gradient(135deg, #e0f7fa, #e8f5e9);
    transform: rotateY(180deg);
}

/* NEU: VOLLSTÄNDIG ÜBERARBEITETE Bilddarstellung mit besserer Skalierung und relativer Höhe */
.flip-card .image-container {
    width: 100%;
    height: calc(40% + 20px);
    /* Basis-Prozentwert der Flipcard-Höhe plus Puffer */
    min-height: 160px;
    /* Mindesthöhe für alle Bilder */
    max-height: 320px;
    /* Maximale Höhe für alle Bilder */
    margin: 10px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #f5f5f5;
}

.flip-card .image-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover-Effekt für Bilder */
.flip-card-front:hover .image-container img {
    transform: scale(1.05);
}

/* Überschriften in Flipcards */
.flip-card-front h3,
.flip-card-back h3,
.flip-card-front h2,
.flip-card-back h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: clamp(1.1rem, 1.3vw, 1.4rem);
    text-align: center;
    width: 100%;
}

.flip-card-front p,
.flip-card-back p {
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    line-height: 1.5;
    margin-bottom: 15px;
}

.flip-card-front .feature-list li,
.flip-card-back .feature-list li {
    margin-bottom: 8px;
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    line-height: 1.4;
}

.flip-card-back h3,
.flip-card-back h2 {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Liste und Flip-Karte in Container1 optimieren */
#container1 .list-container,
#container1 .flip-card-container {
    box-sizing: border-box;
    flex: 1 1 300px;
    min-height: 350px;
}

/* Sicherstellen, dass der Listen-Container die richtige Höhe hat */
#container1 .list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* RESPONSIVES LAYOUT FÜR FLIPCARD POSITION */

/* NEU: Ab 830px: Flipcard und Liste NEBENEINANDER */
@media (min-width: 830px) {
    #container1 .content-box {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    #container1 .list-container,
    #container1 .flip-card-container {
        flex: 0 0 48%;
        max-width: 48%;
    }

    /* Liste LINKS */
    #container1 .list-container {
        order: 1 !important;
    }

    /* Flipcard RECHTS */
    #container1 .flip-card-container {
        order: 2 !important;
    }

    /* NEU: Angepasste relative Bildgröße für größere Screens */
    .flip-card .image-container {
        height: calc(45% + 20px);
        /* Größerer Prozentwert für Desktop */
        min-height: 200px;
    }
}

/* KORRIGIERT: Ab 829px und kleiner: Flipcard IMMER UNTEN */
@media (max-width: 829px) {
    #container1 .content-box {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    #container1 .list-container,
    #container1 .flip-card-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* Liste OBEN - mit höherer Priorität */
    #container1 .list-container {
        order: 1 !important;
        margin-bottom: 30px !important;
    }

    /* Flipcard UNTEN - mit höherer Priorität */
    #container1 .flip-card-container {
        order: 2 !important;
    }

    /* Container1 klarer Abschluss für kein Überlappen */
    #container1 {
        margin-bottom: 40px !important;
        padding-bottom: 15px !important;
        position: relative !important;
        clear: both !important;
        overflow: visible !important;
    }
}

/* Kleine Bildschirme (unter 769px) */
@media (max-width: 768px) {
    .flip-card-container {
        width: 100%;
        min-height: 320px;
    }

    .flip-card-front,
    .flip-card-back {
        padding: 15px;
    }

    .flip-card-front h3,
    .flip-card-back h3,
    .flip-card-front h2,
    .flip-card-back h2 {
        font-size: 1.1rem;
    }

    .flip-card-front p,
    .flip-card-back p,
    .flip-card-front .feature-list li,
    .flip-card-back .feature-list li {
        font-size: 0.9rem;
    }

    /* NEU: Angepasste relative Bildgröße für mobile Geräte */
    .flip-card .image-container {
        height: calc(40% + 20px);
        min-height: 180px;
    }

    /* WICHTIG: Sicherstellen, dass Container1 genügend Abstand hat */
    #container1 {
        margin-bottom: 50px !important;
        overflow: visible !important;
    }

    /* WICHTIG: Reihenfolge nochmal explizit festlegen */
    #container1 .list-container {
        order: 1 !important;
    }

    #container1 .flip-card-container {
        order: 2 !important;
    }
}

/* Sehr kleine Mobilgeräte */
@media (max-width: 480px) {
    .flip-card-container {
        width: 100%;
        min-height: 300px;
    }

    /* NEU: Angepasste relative Bildgröße für sehr kleine Bildschirme */
    .flip-card .image-container {
        height: calc(35% + 15px);
        min-height: 160px;
    }

    /* Sicheres Padding für den Abschluss */
    #container1 {
        padding-bottom: 20px;
    }
}

/* Mittlere Bildschirme (Laptops, Desktops) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .flip-card-container {
        width: 320px;
        min-height: 320px;
    }

    /* NEU: Proportionale Bildgröße für Desktops */
    .flip-card .image-container {
        height: calc(45% + 25px);
        min-height: 220px;
    }
}

/* Größere Bildschirme (größere Desktops) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .flip-card-container {
        width: 340px;
        min-height: 340px;
    }

    .flip-card-front h3,
    .flip-card-back h3,
    .flip-card-front h2,
    .flip-card-back h2 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .flip-card-front p,
    .flip-card-back p,
    .flip-card-front .feature-list li,
    .flip-card-back .feature-list li {
        font-size: 1rem;
    }

    /* NEU: Proportionale Bildgröße für große Desktops */
    .flip-card .image-container {
        height: calc(50% + 30px);
        min-height: 250px;
    }
}

/* Sehr große Bildschirme (4K und größer) */
@media (min-width: 1920px) {
    .flip-card-container {
        width: 380px;
        min-height: 380px;
    }

    .flip-card-front,
    .flip-card-back {
        padding: 25px;
    }

    .flip-card-front h3,
    .flip-card-back h3,
    .flip-card-front h2,
    .flip-card-back h2 {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }

    .flip-card-front p,
    .flip-card-back p,
    .flip-card-front .feature-list li,
    .flip-card-back .feature-list li {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .content-box {
        gap: 40px;
    }

    /* NEU: Maximale proportionale Bildgröße für 4K Displays */
    .flip-card .image-container {
        height: calc(55% + 35px);
        min-height: 280px;
    }
}

/* Für kleine Mobilgeräte */
@media (max-width: 380px) {
    .flip-card-container {
        width: 100%;
        min-height: 280px;
    }

    /* NEU: Kleinere proportionale Bildgröße für Smartphones */
    .flip-card .image-container {
        height: calc(30% + 10px);
        min-height: 150px;
    }
}

/* Verbesserte Fokus-Zustände für Barrierefreiheit */
.flip-card-container:focus {
    outline: 2px solid #3498db;
    outline-offset: 4px;
}

/* Zusätzliche Stile für verschiedene Farb-Themes */
.flip-card-theme-green .flip-card-back {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.flip-card-theme-purple .flip-card-back {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.flip-card-theme-orange .flip-card-back {
    background: linear-gradient(135deg, #e67e22, #d35400);
}

.flip-card-theme-red .flip-card-back {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* Icon-Anpassungen für Flip-Indikatoren */
.flip-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
    z-index: 3;
    transition: all 0.3s ease;
}

.flip-card-back .flip-indicator {
    color: rgba(255, 255, 255, 0.7);
}

.flip-card-container:hover .flip-indicator {
    transform: rotate(180deg);
}

/* Spezielle Animation für mobile Geräte */
@media (max-width: 768px) {
    .flip-indicator {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            opacity: 0.5;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.2);
        }

        100% {
            opacity: 0.5;
            transform: scale(1);
        }
    }
}

/* Absolute Positionierung für Flipcard-Seiten */
.flip-card-front,
.flip-card-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
}

.flip-card-back {
    transform: rotateY(180deg) !important;
}

/* NEU: Bessere Bildanpassung für Inline-Bilder */
.flip-card-front .image-container[style],
.flip-card-back .image-container[style] {
    height: auto !important;
    /* Überschreibt inline Styles */
    min-height: 180px !important;
    max-height: none !important;
    flex: 1 1 auto !important;
}

.flip-card .image-container[style] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Extra Hack: Verstärkung der Positionierung für unterhalb 830px */
@media (max-width: 829px) {

    /* Dieses Display-Flexbox überschreibt alles andere */
    #container1 .content-box {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Zusätzliche CSS-Regeln für absolute Sicherheit */
    #container1 {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Hier wird die Ordnung nochmals durchgesetzt */
    #container1 .list-container {
        display: block !important;
        width: 100% !important;
        order: 1 !important;
        margin-bottom: 30px !important;
    }

    #container1 .flip-card-container {
        display: block !important;
        width: 100% !important;
        order: 2 !important;
        margin-top: 20px !important;
    }
}