.blt-grid {
    --blt-columns: 4;
    --blt-card-bg: #1a4d8f;
    --blt-card-text: #ffffff;
    --blt-button-bg: #ffffff;
    --blt-button-text: #1a4d8f;
    --blt-radius: 18px;
    --blt-gap: 24px;
    --blt-font-family: inherit;

    display: grid;
    grid-template-columns: repeat(var(--blt-columns), 1fr);
    gap: var(--blt-gap);
}

@media (max-width: 900px) {
    .blt-grid {
        grid-template-columns: repeat(var(--blt-columns-tablet, 3), 1fr);
        --blt-gap: 18px;
    }
}

@media (max-width: 640px) {
    .blt-grid {
        grid-template-columns: repeat(var(--blt-columns-mobile, 2), 1fr);
        --blt-gap: 14px;
    }
}

.blt-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--blt-card-bg);
    color: var(--blt-card-text);
    border-radius: var(--blt-radius);
    padding: 14px;
    font-family: var(--blt-font-family);
}

.blt-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: calc(var(--blt-radius) - 8px);
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 16px;
}

.blt-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.blt-img-front {
    opacity: 1;
}

.blt-img-hover {
    opacity: 0;
}

/* Desktop mit Maus: klassischer Hover-Crossfade */
@media (hover: hover) and (pointer: fine) {
    .blt-card:hover .blt-img-front {
        opacity: 0;
    }

    .blt-card:hover .blt-img-hover {
        opacity: 1;
    }
}

/* Touch-Geräte: automatischer Crossfade, gesteuert per JS-Klasse (siehe blt-frontend.js) */
.blt-card.blt-is-swapped .blt-img-front {
    opacity: 0;
}

.blt-card.blt-is-swapped .blt-img-hover {
    opacity: 1;
}

.blt-name {
    margin: 0 0 8px;
    font-size: var(--blt-name-font-size, 1.1em);
    font-weight: var(--blt-name-font-weight, 800);
    font-family: var(--blt-name-font-family, var(--blt-font-family));
    line-height: 1.25;
    color: var(--blt-card-text);
}

.blt-role {
    margin: 0 0 16px;
    font-size: var(--blt-role-font-size, 0.92em);
    font-weight: var(--blt-role-font-weight, 400);
    font-family: var(--blt-role-font-family, var(--blt-font-family));
    color: var(--blt-card-text);
    opacity: 0.92;
    line-height: 1.45;
}

.blt-email {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 12px 20px;
    background: var(--blt-button-bg);
    color: var(--blt-button-text);
    border-radius: calc(var(--blt-radius) * 0.45);
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
}

.blt-email:hover {
    opacity: 0.88;
    color: var(--blt-button-text);
}

.blt-empty {
    color: #5a5a5a;
}