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

.container {
height: 100vh;
width: 100%;
position: relative;
opacity: 60%;
}

@keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}

img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
animation: fade 10.5s ease-in-out infinite alternate;
}

img:nth-of-type(1) {
animation-delay: 0s;
}

img:nth-of-type(2) {
animation-delay: 1.5s;
}

img:nth-of-type(3) {
animation-delay: 3s;
}

img:nth-of-type(4) {
animation-delay: 4.5s;
}

img:nth-of-type(5) {
animation-delay: 6s;
}

img:nth-of-type(6) {
animation-delay: 7.5s;
}

img:nth-of-type(7) {
animation-delay: 9s;
}

body, html {
width: 100%;
height: 100%;
object-fit: fill;
overflow: hidden;
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: rgba(0, 0, 0, 100);
}

.content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: white;
padding: 2rem;
}

.text-left {
position: absolute;
left: 3rem;
top: 2rem;
align-items: center;
justify-content: center;
text-align: left;
}

.text-left p {
font-size: 0.9vw;
max-width: 100%;
}

.text-bottom-right {
position: absolute;
right: 3rem;
bottom: 2rem;
}

.text-bottom-right p {
font-size: 0.9vw;
}

.text-bottom-left {
text-align: left;
position: absolute;
left: 3rem;
bottom: 1rem;
}

.text-bottom-left p {
font-size: 0.75vw;
max-width: 80%;
}

/* Mobile Optimierung */
@media (max-width: 800px) {
.text-left p {
font-size: 2.1vw;
max-width: 90%;
text-align: left;
}
}