.animate-fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

.animate-fade-in-slow {
    animation: fadeIn 2.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.image-box {
    position: relative;
    width: 100%;
    padding-top: 68%; /* Bildverhältnis 4:3 */
    background-color: #000; /* Hintergrundfarbe für leere Bereiche */
    overflow: hidden;
    border-radius: 15px;
}

.image-box img.image-uniform {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zuschneiden und Ausfüllen des Bildes */
    object-position: center;
}

.image-hover {
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.image-hover:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.video-container,
.starMap-container {
    position: relative;
    width: 100%;
    max-width: 900px; /* Breite angepasst */
    aspect-ratio: 16 / 9;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.video-container:hover,
.starMap-container:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

.video-frame iframe,
.starMap-frame iframe {
    width: 100%;
    height: 32em;
    border: none;
}

.row.align-items-center {
    margin-top: 2rem;
}

.col-md-6 img {
    transition: transform 0.4s ease-in-out;
}

.col-md-6 img:hover {
    transform: scale(1.05);
}

section {
    padding: 2rem 0;
}

section.border-top {
    padding-top: 3rem;
}

section.border-bottom {
    padding-bottom: 3rem;
}

.sternbild-img {
    width: 100%;
    height: 360px;
    object-fit: unset;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.end-star {
    width: 100%;
    text-align: center;
}