body
{
    background-color: #000;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.bg-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

.bg
{
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .bg01
    {
        aspect-ratio: 825 / 223;
        background-image: url('../images/bg01.jpg');
    }

    .bg02
    {
        aspect-ratio: 150 / 71;
        background-image: url('../images/bg02.jpg');
    }

    .person
    {
        position: relative;
        margin-top: 6%;
        aspect-ratio: 100 / 33;
        background-image: url('../images/bg_person_wide.png');
        animation: pulse 3s infinite ease-in-out;
    }

    .person::after {
        content: ""; /* Pseudo-Element benötigt ein Content */
        position: absolute;
        left: 0;
        right: 0;
        top: 100%; /* Platziert die Reflexion unterhalb des Bildes */
        width: 100%;
        aspect-ratio: 100 / 33;
        background-image: url('../images/bg_person_wide.png'); /* Dein Bild */
        background-size: cover; /* Bild skalieren, um den Container zu füllen */
        transform: scaleY(-1); /* Spiegeln des Bildes */
        opacity: 0.7; /* Die Reflexion soll sichtbar sein, aber nicht zu stark */
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none; /* Verhindert, dass die Reflexion interaktiv ist */
        
        /* Maskenverlauf für das sanfte Auslaufen der Reflexion */
        mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 4%);
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);

        /* Schatten für die Reflexion */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Sanfter Schatten unter der Reflexion */
        animation: pulse_shadow 3.5s infinite ease-in-out;
    }

    @keyframes pulse {
        0% {
            opacity: 1;  /* Bild vollständig sichtbar */

        }
        10% {
            opacity: 0.95;  /* Bild wird leicht transparent */
        }
        20% {
            opacity: 1;  /* Bild kehrt zur vollen Sichtbarkeit zurück */
        }
        30% {
            opacity: 0.9;  /* Weitere leichte Transparenz */
        }
        40% {
            opacity: 1;  /* Bild wieder vollständig sichtbar */
        }
        /* Weitere Anpassungen können hier hinzugefügt werden */
    }

    @keyframes pulse_shadow {
        0% {
            opacity: 0.7;  /* Bild vollständig sichtbar */
        }
        10% {
            opacity: 0.9;  /* Bild wird leicht transparent */
        }
        20% {
            opacity: 0.7;  /* Bild kehrt zur vollen Sichtbarkeit zurück */
        }
        30% {
            opacity: 0.6;  /* Weitere leichte Transparenz */
        }
        40% {
            opacity: 0.7;  /* Bild wieder vollständig sichtbar */
        }
        /* Weitere Anpassungen können hier hinzugefügt werden */
    }

    .bg03
    {
        aspect-ratio: 1100 / 281;
        background-image: url('../images/bg03.jpg');
    }

#overlay {
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

.logo
{
    padding-top: 1%;
    width: 30%;
}

@media (max-width: 768px) {
    .logo
    {
        padding-top: 0;
        width: 35%;
    }