body {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: #fff; /* Weißer Text für guten Kontrast */
    text-align: center;
    padding: 0;
    display: flex;
    flex-direction: row;
    height: 100vh;
    margin: 0;
}

/* Swiper-Container mit schwarzem Hintergrund und flexibler Ausrichtung */
.swiper-container {
    width: 85%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
   /* background-color: #000; /* Schwarzer Hintergrund für Konsistenz */
	perspective: 1200px; /* 3D-Perspektive für den Effekt */

}

/* Zusätzliche Klasse für Spaceflight-Effekt: animierter Sternenhintergrund */
.spaceflight-background {
    background: url('/images/starfield.jpg') repeat;
    animation: starfield 30s linear infinite;
}

/* Neue Regel für Slides im "Stars"-Effekt */
.swiper-slide.random-slide {
    /* Wir setzen eine Transition für transform mit einem cubic-bezier,
       der einen sanften Übergang (Beschleunigung und Abbremsung) simuliert */
    transition: transform 1.5s cubic-bezier(0.42, 0, 0.58, 1);
}
/* Container für den socialW-Effekt im Grid-Modus */
.swiper-container.socialW {
    width: 100vw;
    height: 100vh;
}

/* Jede Slide im Grid erhält eine feste Breite und Höhe:
   Wir rechnen so: Bei 3 Spalten und 2 Reihen mit 10px Zwischenraum */
.swiper-container.socialW .swiper-slide {
    width: calc((100vw - 20px) / 3);  /* 3 Spalten: 2 Zwischenräume à 10px */
    height: calc((100vh - 10px) / 2);   /* 2 Reihen: 1 Zwischenraum à 10px */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Standard-Styling für den Post (Bild + Text) innerhalb jeder Slide */
.swiper-container.socialW .swiper-slide .post {
    width: 90%;
    height: 90%;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

/* Bilder innerhalb der Posts: Begrenzung, damit Text sichtbar bleibt */
.swiper-container.socialW .swiper-slide .post img {
    max-width: 100%;
    max-height: 60%;
    object-fit: contain;
    margin: 0 auto;
}

video {
    max-width: -webkit-fill-available;
    max-height: -webkit-fill-available;
    object-fit: contain;
    margin: 0 auto;
}

/* Post-Beschreibung */
.swiper-container.socialW .swiper-slide .post .post-description {
    font-size: 1rem;
    padding: 5px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nicht-aktive Slides: kleiner skaliert, leichte Transparenz */
.swiper-container.socialW .swiper-slide:not(.swiper-slide-active) .post {
    transform: scale(0.8);
    opacity: 0.9;
}

/* Der aktive Slide wird hervorgehoben:
   Er wird absolut zentriert (innerhalb seines Slides) und vergrößert */
.swiper-container.socialW .swiper-slide.swiper-slide-active .post {
    position: relative;
    transform: scale(1.2);
    opacity: 1;
    z-index: 10;
}


@keyframes starfield {
    from { background-position: 0 0; }
    to { background-position: -1000px 0; }
}

/* Swiper-Slides zentral ausrichten */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-wrapper{

}
/* Post-Container stylen */
.post {
    width: auto;
    height: 100%;
    max-width: -webkit-fill-available; /* Maximalbreite für größere Bildschirme */
    max-height: -webkit-fill-available; /* Maximalbreite für größere Bildschirme */
    background-color: #111; /* Etwas hellerer Schwarzton für den Post-Hintergrund */
    /*border: 1px solid #333; /* Dezente graue Umrandung */*/
    border-radius: 10px;
  /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
        justify-content: center;

}

/* Bild innerhalb des Posts anpassen */
.slide-image {
    max-width: 90%;
    max-height: 80vh; /* 80% der Viewport-Höhe für ausreichend Platz */
    width: auto;
    height: auto;
    object-fit: contain; /* Erhalte das Seitenverhältnis ohne Zuschneiden */
    display: block;
    margin: 0 auto; /* Zentrierung */
}

/* Beschreibung stylen */
.post-description {
    width: 90%;
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
    margin-top: 10px;
    text-align: center;
}

/* Optional: Benutzername oder hervorgehobener Text */
.post-description strong {
    color: #fff; /* Weißer Text für Hervorhebungen */
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Verstecken, wenn die Beschreibung leer ist */
.post-description:empty {
    display: none;
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }
    .swiper-container {
        width: 100%;
        height: 70%;
    }
    .qr-code {
        width: 100%;
        height: 30%;
    }
    .post {
        max-width: 90%;
    }
    .slide-image {
        max-width: 100%;
        max-height: 60vh;
    }
    .post-description {
        width: 100%;
    }
}