#kaartentrek-container {
        max-width: 600px;
        margin: 20px auto;
        text-align: center;
    }

    #card-display {
        position: relative;
        width: 300px;
        height: 400px;
        margin: 0 auto 50px;
        perspective: 1000px;
    }

    .kaart-achterkant, .kaart-voorkant {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        transition: transform 0.6s;
        transform-style: preserve-3d;
        cursor: pointer;
    }

    .kaart-achterkant img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
    }

    .kaart-voorkant {
        background: none;
        padding: 0;
        box-sizing: border-box;
        transform: rotateY(180deg);
    }

    .kaart-achterkant.flipped {
        transform: rotateY(-180deg);
    }

    .kaart-voorkant.flipped {
        transform: rotateY(0deg);
    }

    .click-indicator {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 0.7; }
        50% { opacity: 1; }
        100% { opacity: 0.7; }
    }

    .kaart-afbeelding img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
    }

    #kaart-info {
        margin: 20px auto;
        text-align: center;
    }

    .kaart-titel {
        margin: 0 0 15px 0;
        font-size: 1.5em;
        font-weight: bold;
    }

    .kaart-beschrijving {
        font-size: 1em;
        line-height: 1.6;
        text-align: left;
    }

    #loading {
        font-style: italic;
        margin: 10px 0;
    }