/* ==========================
   Reset
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================
   Grundlayout
========================== */

html,
body{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    background:#000;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    opacity:0;
    animation:fadeIn 1.2s ease forwards;
}

@keyframes fadeIn{
    to{
        opacity:1;
    }
}

/* ==========================
   Hintergrundvideo
========================== */

.video-container{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
    transform:scale(1.02);
}

/* ==========================
   Overlay
========================== */

.overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.10),
        rgba(0,0,0,.35)
    );

    z-index:-1;
}

/* ==========================
   Social Icons
========================== */

.socials{

    position:absolute;

    left:40px;
    bottom:40px;

    display:flex;
    gap:18px;

    opacity:0;

    transform:translateY(20px);

    animation:showSocials .9s ease forwards;
    animation-delay:2s;

    padding-bottom:env(safe-area-inset-bottom);

}

@keyframes showSocials{

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.socials a{

    width:58px;
    height:58px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(20px);

    transition:all .35s ease;

}

.socials a:hover{

    transform:translateY(-5px) scale(1.08);

    box-shadow:
        0 0 20px rgba(255,255,255,.25),
        0 0 50px rgba(255,255,255,.08);

    background:rgba(255,255,255,.15);

}

.socials svg{

    width:24px;
    height:24px;

    fill:#fff;

}

/* ==========================
   Große Monitore
========================== */

@media (min-width:1600px){

    .socials{
        left:60px;
        bottom:60px;
        gap:24px;
    }

    .socials a{
        width:72px;
        height:72px;
    }

    .socials svg{
        width:30px;
        height:30px;
    }

}

/* ==========================
   Tablets
========================== */

@media (max-width:1024px){

    .socials{
        left:30px;
        bottom:30px;
        gap:16px;
    }

    .socials a{
        width:54px;
        height:54px;
    }

}

/* ==========================
   Smartphones
========================== */

@media (max-width:768px){

    video{
        transform:scale(1.18);
    }

    .socials{

        left:50%;
        bottom:24px;

        transform:translateX(-50%) translateY(20px);

        gap:14px;

        justify-content:center;

        width:auto;

    }

    @keyframes showSocials{

        to{

            opacity:1;
            transform:translateX(-50%) translateY(0);

        }

    }

    .socials a{
        width:52px;
        height:52px;
    }

    .socials svg{
        width:22px;
        height:22px;
    }

}

/* ==========================
   Kleine Smartphones
========================== */

@media (max-width:480px){

    .socials{

        bottom:18px;

        gap:10px;

    }

    .socials a{

        width:46px;
        height:46px;

    }

    .socials svg{

        width:18px;
        height:18px;

    }

}