/* Intro Animation Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#preloader.final-phase {
    /* Keine Änderung an Opacity/Visibility, nur die inneren Elemente transformieren */
}

/* Logo-Container für die Animations-Elemente */
.intro-logo-container {
    position: relative;
    width: 1170px;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-diamond {
    position: absolute;
    width: 970px;
    height: 700px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.intro-diamond svg {
    width: 100%;
    height: 100%;
}

.intro-diamond.show {
    opacity: 1;
    transform: scale(1);
}

.intro-logo-text {
    position: absolute;
    width: 570px;
    opacity: 0;
    transform: scale(0.8); 
    top: 50%; 
    left: 50%;
    margin-top: -225px;
    margin-left: -285px;
    transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.intro-logo-text svg {
    width: 100%;
    height: 100%;
}

.intro-logo-text.show {
    opacity: 1;
    transform: scale(1);
}

/* Final phase animation */
#preloader.final-phase .intro-logo-container {
    transform: scale(1.5);
}

#preloader.final-phase .intro-diamond {
    transform: scale(10);
    opacity: 0;
    transition: all 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 3; 
}

#preloader.final-phase .intro-logo-text {
    transform: scale(0);
    opacity: 0;
    transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Stellen Sie sicher, dass der Seiteninhalt versteckt ist, bis die Animation abgeschlossen ist */
#page-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in, visibility 1s ease-in;
}