@import url("colordef.css");

.visitenkarte {
    width: 85vw;
    height: 55vw;
    max-width: 800px;
    max-height: 517px;
    margin: auto;
    perspective: 1000px;
    margin-top: 30vh;
    margin-bottom: 20vh;
    background-color: transparent;
}

.visitenkarte-fill {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
}

.visitenkarte-inner {
    width: 100%;
    height: 100%;
    box-shadow: 10px 10px 40px 2px var(--secondary);
    transition: transform 0.4s cubic-bezier(.47, 1.64, .41, .8);
    transform-style: preserve-3d;
    transform: rotateZ(-5deg);
    background-color: var(--primary);
}

.visitenkarte:hover .visitenkarte-inner {
    transform: rotateY(180deg) rotateZ(-5deg) scale(1.05);
}

.visitenkarte-vorn,
.visitenkarte-hinten {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.visitenkarte-vorn * {
    position: absolute;
    text-align: center;
    font-size: 1vw;
    background-color: var(--primary);
}

.visitenkarte-hinten {
    transform: rotateY(180deg);
}

.visitenkarte-hinten * {
    position: absolute;
    text-align: center;
    font-size: 1vw;
}

.visitenkarte-logo-vorn {
    width: 80%;
    left: 10%;
    top: 5%;
}

.visitenkarte-img-vorn {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
}

.visitenkarte-vorn_A {
    width: 100%;
    left: 0;
    top: 55%;
    font-size: 1.5vw;
    font-weight: bold;
    color: var(--secondary);
}

.visitenkarte-img-hinten {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
}

.visitenkarte-bg-hinten {
    width: 50%;
    height: 60%;
    right: 0;
    top: 10%;
    background-color: #333333;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}

.visitenkarte-pers-hinten {
    width: 20%;
    right: 10%;
    top: 15%;
    object-fit: cover;
    border-radius: 50%;
}

.visitenkarte-hinten_F {
    left: 55%;
    top: 60%;
    font-size: 2.8vw;
    color: var(--background);
    background-color: transparent;
}

.visitenkarte-hinten_G {
    left: 55%;
    top: 50%;
    font-size: 2.8vw;
    color: var(--background);
    background-color: transparent;
}

@media screen and (min-width: 941px) {
    .visitenkarte-hinten_F {
        font-size: 27px;
    }
    
    .visitenkarte-hinten_G {
        font-size: 27px;
    }
}