.paragraph--type--slider-home {
	position: relative;
	background: #005F3A;
}

.paragraph--type--slider-home div:first-child {
	position: relative;
	max-width: 100%;
	/*min-height: 200px;*/
	max-height: 541px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	aspect-ratio: 1920 / 541;
}

.paragraph--type--slider-home div img {
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	object-position: right center;
}

@media (min-width: 1920px) {
	/* Kleiner Hack für sehr breite Bildschirme.
		Bei einer Breite über 1920px würde ansonsten das Bild
		zu klein angezeigt.
		Kauf dir einen normalen Bildschirm. */
	.paragraph--type--slider-home div:first-child {
		aspect-ratio: unset;
	}
}


.paragraph--type--slider-home div:last-child {
	color: white;
	font-weight: bold;
	font-size: clamp(28px, 4vw, 70px);
	line-height: 1.1;
	background: #005F3A;
	padding: 10px 30px;
}

@media (min-width: 555px) {
	.paragraph--type--slider-home div:first-child::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(0,0,0,.2) 0%, transparent 100%);
		left: 0;
	}
	.paragraph--type--slider-home div:last-child {
		background: transparent;
		padding: 0;
		
		--spacing: 70px;
		--content-width: min(1520px, var(--glide-arrows-width));

		/* Lass uns darauf hoffen dass ich die Funktion der Formeln nicht
			vergesse. */
		width: calc(var(--content-width) / 2 - var(--spacing));
		position: absolute;
		left: calc((100% - var(--content-width)) / 2 + var(--spacing));
		top: 50%;
		transform: translateY(-50%);
	}
}

/* min-width ist --content-width + padding-left */
@media (min-width: 1930px) {
	.paragraph--type--slider-home div:last-child {
		padding-left: 60px;
		--spacing: 0px;
		--content-width: 1756px;
	}
}

#slider-home{
  margin-bottom: 50px;
}

@media (min-width: 992px) {
	#slider-home{
  		margin-bottom: 90px;
	}
}