.viewSingleCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    height: 85dvh;
    background: white;
    padding: 5rem 0;
    border-radius: 1.8rem;
    overflow: auto;
    z-index: 1000;

    &.fire {
        box-shadow: inset 0 0 20px #f08030, inset 0 0 10px rgba(0, 0, 0, 0.1);
        background-image: url("../assets/img/fire.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.water {
        box-shadow: inset 0 0 20px #6890f0, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/water1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.grass {
        box-shadow: inset 0 0 20px #78c850, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/grass.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.electric {
        box-shadow: inset 0 0 20px #f8d030, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/electrik.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.poison {
        box-shadow: inset 0 0 20px #a040a0, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/poison.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.normal {
        box-shadow: inset 0 0 20px #a8a878, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/normal.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.ground {
        box-shadow: inset 0 0 20px #e0c068, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/ground.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.bug {
        box-shadow: inset 0 0 20px #a8b820, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/bug.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.rock {
        box-shadow: inset 0 0 20px #b8a038, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/rock.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.ghost {
        box-shadow: inset 0 0 20px #705898, inset 0 0 10px rgba(0, 0, 0, 0.1);
    }

    &.steel {
        box-shadow: inset 0 0 20px #b8b8d0, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/steel.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.psychic {
        box-shadow: inset 0 0 20px #f85888, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/psychic.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.ice {
        box-shadow: inset 0 0 20px #98d8d8, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/ice.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.dragon {
        box-shadow: inset 0 0 20px #7038f8, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/dragon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.dark {
        box-shadow: inset 0 0 20px #705848, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/dark.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.fairy {
        box-shadow: inset 0 0 20px #f0b6bc, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/fairy.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    &.fighting {
        box-shadow: inset 0 0 20px #c03028, inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-image: url("../assets/img/fighting.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    /* 3. Hover-Effekt: Verstärkung des Inset-Glows */

    &:hover {
        transform: scale(1.02);

        &.fire {
            box-shadow: inset 0 0 35px #f08030;
        }

        &.water {
            box-shadow: inset 0 0 35px #6890f0;
        }

        &.grass {
            box-shadow: inset 0 0 35px #78c850;
        }

        &.electric {
            box-shadow: inset 0 0 35px #f8d030;
        }

        &.poison {
            box-shadow: inset 0 0 35px #a040a0;
        }

        &.normal {
            box-shadow: inset 0 0 35px #a8a878;
        }

        &.flying {
            box-shadow: inset 0 0 35px #a890f0;
        }

        &.ground {
            box-shadow: inset 0 0 35px #e0c068;
        }

        &.bug {
            box-shadow: inset 0 0 35px #a8b820;
        }

        &.rock {
            box-shadow: inset 0 0 35px #b8a038;
        }

        &.ghost {
            box-shadow: inset 0 0 35px #705898;
        }

        &.steel {
            box-shadow: inset 0 0 35px #b8b8d0;
        }

        &.psychic {
            box-shadow: inset 0 0 35px #f85888;
        }

        &.ice {
            box-shadow: inset 0 0 35px #98d8d8;
        }

        &.dragon {
            box-shadow: inset 0 0 35px #7038f8;
        }

        &.dark {
            box-shadow: inset 0 0 35px #705848;
        }

        &.fairy {
            box-shadow: inset 0 0 35px #f0b6bc;
        }

        &.fighting {
            box-shadow: inset 0 0 35px #c03028;
        }
    }

    @media (max-width: 520px) {
        max-width: 400px;
    }

    @media (max-width: 430px) {
        width: 95dvw;
        height: 70dvh;
        margin-top: 5rem;
        margin-bottom: 2rem;
    }
}