:root {
    --fade-duration: 1.8s;
    --translate-duration: 1s;
    --rotate-degrees: 75deg;
    --translate-x: 200px;
    --translate-y: 100px;
}

/* Definiere die Startposition des Elements */
.fade-in-from-bottom {
    opacity: 0;
    transform: translateY(var(--translate-y, 100px));
    transition: opacity var(--fade-duration, 0.8s) ease, transform var(--translate-duration, 1s) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.fade-in-from-bottom.show {
    opacity: 1;
    transform: translateY(0);
}


/* Für die Animation "fade-in-from-left" */
.fade-in-from-left {
    opacity: 0;
    transform: translateX(calc(var(--translate-x) * -1)); /* Startposition links */
    transition: opacity var(--fade-duration, 0.8s) ease, transform var(--translate-duration, 1s) ease;
}

.fade-in-from-left.show {
    opacity: 1;
    transform: translateX(0); /* Endposition (zentriert) */
}

/* Definiere die Startposition des Elements */
.fade-in-from-right {
    opacity: 0;
    transform: translateX(var(--translate-x, 200px));
    transition: opacity var(--fade-duration, 0.8s) ease, transform var(--translate-duration, 1s) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.fade-in-from-right.show {
    opacity: 1;
    transform: translateX(0);
}


/* Definiere die Startposition des Elements */
.fade-in-from-top {
    opacity: 0;
    transform: translateY(calc(var(--translate-y, 100px) * -1));
    transition: opacity var(--fade-duration, 0.8s) ease, transform var(--translate-duration, 1s) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.fade-in-from-top.show {
    opacity: 1;
    transform: translateY(0);
}


/* Definiere die Startposition des Elements */
.rotate-from-bottom-left {
    opacity: 0;
    transform: translateX(var(--translate-x)) rotate(var(--rotate-degrees));
    transform-origin: bottom left;
    transition: opacity var(--fade-duration) ease, transform var(--translate-duration) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.rotate-from-bottom-left.show {
    opacity: 1;
    transform: translateX(0) rotate(0);
}


/* Definiere die Startposition des Elements */
.rotate-from-bottom-right {
    opacity: 0;
    transform: translateX(var(--translate-x)) rotate(calc(var(--rotate-degrees) * -1));
    transform-origin: bottom right;
    transition: opacity var(--fade-duration) ease, transform var(--translate-duration) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.rotate-from-bottom-right.show {
    opacity: 1;
    transform: translateX(0) rotate(0);
}


/* Definiere die Startposition des Elements */
.rotate-from-top-left {
    opacity: 0;
    transform: translateX(var(--translate-x)) rotate(var(--rotate-degrees));
    transform-origin: top left;
    transition: opacity var(--fade-duration) ease, transform var(--translate-duration) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.rotate-from-top-left.show {
    opacity: 1;
    transform: translateX(0) rotate(0);
}


/* Definiere die Startposition des Elements */
.rotate-from-top-right {
    opacity: 0;
/*    transform: translateX(var(--translate-x)) rotate(calc(var(--rotate-degrees) * -1));*/
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(var(--rotate-degrees));
    transform-origin: top right;
    transition: opacity var(--fade-duration) ease, transform var(--translate-duration) ease;
}

/* Definiere die Endposition des Elements, wenn es sichtbar ist */
.rotate-from-top-right.show {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0);
}