@charset "UTF-8";
/* Team-/Mitglieder-Karten: Character-Select-Hover */

/* Mitglieder (Über uns) */
.mitglied-bild {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}


/* Mitglieder: Character-Select-Hover ("Meet the Players") */
.player-card {
    transition: transform .12s steps(2);
}

.player-card .mitglied-bild {
    filter: saturate(.35);
    transition: filter .2s steps(3);
}

.player-card::before {
    transition: transform .12s steps(2), background-color .12s steps(1);
}

.player-card:hover,
.player-card:focus-visible {
    transform: translateY(-8px);
    outline: none;
}

.player-card:hover::before,
.player-card:focus-visible::before {
    background: var(--neon-green);
    transform: translate(calc(var(--s) + 4px), calc(var(--s) + 4px));
}

.player-card:hover .mitglied-bild,
.player-card:focus-visible .mitglied-bild {
    filter: none;
}

.player-tag {
    position: absolute;
    top: .5rem;
    left: .75rem;
    z-index: 2;
    padding: 0 .4rem;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--black);
    background: var(--neon-green);
    visibility: hidden;
}

.player-card:hover .player-tag,
.player-card:focus-visible .player-tag {
    visibility: visible;
    animation: player-blink .8s steps(1) infinite;
}

@keyframes player-blink {
    50% { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .player-card:hover,
    .player-card:focus-visible {
        transform: none;
    }
    .player-card:hover .player-tag,
    .player-card:focus-visible .player-tag {
        animation: none;
    }
}


/* Hover-Bild (Foto 2, z.B. Pixel-Art) blendet beim Character-Select ein */
.player-bild {
    position: relative;
}

.player-bild .mitglied-bild-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .15s steps(3);
}

.player-card:hover .mitglied-bild-hover,
.player-card:focus-visible .mitglied-bild-hover {
    opacity: 1;
}


/* Alt: Overlay mit zweitem Bild (nur noch template/frontend/team.phtml) */
.bilder {
    position: relative;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}


.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background-color: #008CBA;
}

.bilder:hover .overlay {
    opacity: 1;
}