.ms-slidermoment-container {
    width: 100vw; /* Container über die gesamte Breite */
    position: relative; /* Ermöglicht es, den Titel relativ zum Container zu positionieren */
	padding-top: 70px; /* Abstand zum oberen Rand */
    padding-bottom: 60px; 
}

.ms-slidermoment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0; /* kannst du anpassen */
}


.slidermoment-headline {
	display: inline-block;
    text-align: left;
    font-size: 2.8em;
    text-transform: uppercase; /* Alles in Großbuchstaben */
    letter-spacing: -0.5px; /* Engerer Buchstabenabstand */
    font-weight: 400; /* Weniger fette Schrift */
    color: white; /* Setzt die Überschrift auf Schwarz */
    padding-bottom: 10px; 
	padding-left: 30px;
	margin: 0px;
}

.ms-slidermoment-container hr {
    border: 0.5px solid white;  /* Fügt eine graue Linie hinzu */
    margin-bottom: 10px;   /* Fügt oben und unten einen Abstand hinzu */
	margin-top: 0px;
	margin-left: 30px;
	margin-right: 30px;
	width: calc(100% - 60px);  /* Subtrahiere Margin-Werte */
}


.ms-moment-name {
  text-align: left;
  font-size: 2em;
  font-weight: 400;
  padding-left: 30px;
  padding-bottom: 40px; 
  color: white;
}




/* Swiper Container */
.moment-swiper-container {
    width: 100%;
    overflow: hidden;
	width: calc(100% - 60px);  /* Subtrahiere Margin-Werte */
	padding-right: 30px;
	margin-left: 30px;
	position: relative;
	display: flex;
}


/* Swiper Wrapper */
.ms-slidermoment .swiper-wrapper {
    display: flex;
}

/* Swiper Slide */
.ms-slidermoment .swiper-slide {
   
    position: relative;
    overflow: hidden;
    background-color: transparent;
	flex: 0 0 calc(100% - 80px); /* Lässt rechts Platz für das nächste Bild */
 
}



/* Container für die Pfeile */
.moment-arrow-container {
    position: absolute;
    right: 30px; /* Abstand zum rechten Rand */
    display: flex;
    justify-content: flex-end; /* Pfeile rechts ausrichten */
    align-items: center; /* Pfeile vertikal ausrichten */
    gap: 10px;
	top: 85px;
}


.moment-swiper-button-left,
.moment-swiper-button-right {
    display: inline-block;
    width: 38px;  /* Breite der Pfeile */
    height: 38px; /* Höhe der Pfeile */
    border: 1px solid white; /* Dünner schwarzer Rahmen */
	color: white;
    border-radius: 50%; /* Kreisform */
    background-color: transparent; /* Hintergrundfarbe des Rahmens */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    transition: background-color 0.3s ease; /* Sanfter Übergang bei Hover */
}

.ms-moment-slidermoment-item {
    flex: 0 0 auto;
    width: 300px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    background-color: white;
    border-radius: 1.5rem;
    margin: 1em;
	padding: 1em;
}



/* Container für Bilder */
.ms-moment-slidermoment-image {
    width: 90%; /* etwas kleiner machen, damit Platz entsteht */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 3%;
    left: 5%;
    transition: transform 0.3s ease-in-out;
    padding-top: 90%; /* angepasst, damit das Bild quadratisch bleibt */
}


/* Infos unter dem Bild */
.ms-moment-slidermoment-info {
    padding-top: 10px;
    width: 100%;
    
}

.ms-moment-date {
	padding-top: 20px;
    font-size: 1.4rem;
    color: #EC5836;
    margin: 0;
	text-transform: uppercase;
	font-weight: 600;

}

.ms-moment-title {
    font-size: 1.3em; /* Beispiel: Größe des Titels */
    font-weight: 600; /* Titel fett anzeigen */
    color: black; /* Titel in Weiß */
    margin: 20px 0;
	
}

.ms-moment-title a {
    color: black; /* Titel in Weiß */

}

.ms-moment-action {
    display: inline-block;
  padding: 0.4em 1em;
  color: black;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.ms-moment-action a {
    color: white;
}

/* Wenn nötig, Hover für die 'LESEN' Text */
.ms-moment-action:hover {
    transform: scale(1.05);
}

/* Wenn nötig, Hover für die 'LESEN' Text */
.ms-moment-action:hover {
    text-decoration: none;
}



/* Desktop und Tablet: 3 Elemente nebeneinander */
@media (min-width: 768px) {
	
	/* Swiper Container */
.moment-swiper-container {
    width: 100vw;
    overflow: hidden;
	width: calc(100% - 30px);  /* Subtrahiere Margin-Werte */
	margin-left: 30px;
	position: relative;
	display: flex;
}
	
	
    .ms-moment-slidermoment-item {
    width: 33%; /* 3 nebeneinander */
    padding-top: 31%;
    }
	

	
	.ms-moment-slidermoment-title {
    font-size: 1.8em; /* Beispiel: Größe des Titels */
    color: white; /* Titel in Weiß */
}
	.ms-slidermoment-container hr {
	margin-left: 30px;
	margin-right: 30px;
	width: calc(100% - 60px);  /* Subtrahiere Margin-Werte */
	}
}

/* Mobile Devices: 2 Elemente nebeneinander */
@media (max-width: 767px) {
    .moment-swiper-container {
    	width: calc(100% - 30px);  /* Subtrahiere Margin-Werte */
		margin-right: 0px;
    }
	

	
    .ms-moment-slidermoment-item {
        width: 50%; /* 2 nebeneinander */
        padding-top: 50%;
	
    }
	
	
	
	.ms-moment-slidermoment-image {
        width: 88%;
        top: 4%;
        left: 6%;
        padding-top: 92%;
    }
	
	
	.ms-moment-title {
    font-size: 1.5em; /* Beispiel: Größe des Titels */
    color: white; /* Titel in Weiß */
}
	
	.ms-slidermoment-container hr {
	margin-left: 30px;
	margin-right: 30px;
	width: calc(100% - 60px);  /* Subtrahiere Margin-Werte */
}
	
	.ms-moment-slidermoment-hover-info {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    font-weight: normal;
    color: white;
    font-size: 13px;
}
	
.moment-swiper-button-left,
	.tracks-swiper-button-right {
    width: 35px;  /* Breite der Pfeile */
    height: 35px; /* Höhe der Pfeile */
}
	
	.ms-moment-date {
    font-size: 1.2rem;
   }
	
}


/* Bei sehr kleinen Bildschirmen (z.B. Smartphones im Hochformat) */
@media (max-width: 481px) {
	
	.ms-slidermoment {
    display: flex;
    justify-content: flex-start;
    width: 100%; /* Benutze 100%, um sicherzustellen, dass der Container auf mobilen Geräten korrekt skaliert */
    margin-left: 0;
    margin-right: 0;
    }
	
	.moment-swiper-container {

	width: calc(100% - 10px);  /* Subtrahiere Margin-Werte */
	padding-right: 10px;
	margin-left: 10px;
}
	
    .ms-moment-slidermoment-item {
        width: 100%; 
        padding-top: 100%; 
    }
	
	 .ms-moment-slidermoment-item {
        width: 100%; 
        padding-top: 100%; 
    }
	
	.ms-slidermoment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px; /* kannst du anpassen */
}
	
	.slidermoment-headline {
    font-size: 2em;
    letter-spacing: -0.8px; /* Engerer Buchstabenabstand */
	padding-left: 10px;
	}
	
	.ms-moment-name {
  font-size: 1.5em;
  padding-left: 10px;
}
	
	.moment-swiper-button-left,
	.moment-swiper-button-right {
    width: 25px;  /* Breite der Pfeile */
    height: 25px; /* Höhe der Pfeile */
	}
	
	.moment-swiper-button-left,
	.moment-swiper-button-right {
    width: 25px;  /* Breite der Pfeile */
    height: 25px; /* Höhe der Pfeile */
	}
	
	.moment-arrow-container {
    position: absolute;
    right: 10px; /* Abstand zum rechten Rand */
	top: 77px;
}
	
	.ms-moment-slidermoment-image {
        width: 94%;
        top: 3%;
        left: 3%;
        padding-top: 94%;
    }
	
	.ms-moment-title {
    font-size: 1.8em; /* Beispiel: Größe des Titels */
	}
	
	.ms-slidermoment-container hr {
	margin-left: 10px;
	margin-right: 10px;
	width: calc(100% - 20px);  /* Subtrahiere Margin-Werte */
}
	
	.ms-moment-date {
    font-size: 1.1rem;
   }
	
}