/* CSS für die Bühne auf der Homepage der Portale */
/***********************
** BEGINN Bild-Slider. 3 Varianten:
 * Bild im Vordergrund (.homepage-slider.image)
 * Bild als Hintergrund (.homepage-slider.overlay)
 * nur Text (.homepag)e-slider.text-only)
/**********************/
.bg-slider {
	background-color: var(--hintergrundzwei);
	color: var(--schrift);
	padding: 0;
	margin: 0;
}

.slider-padding {
	display: flex;
	flex-wrap: wrap; /* unklar, ob es bei einer Variante / in einer Größe benötigt wird */
	width: 100%;
	padding: 0 0 15px;
	margin: 0 auto;
}

.slider-padding.jumbo {
	padding: 15px 0;
}

/* .carousel {
	margin: 0 auto;
	padding: 0;
	width: 100%;
} */

.carousel {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
}

.carousel .carousel-inner {
	padding: 0;
	margin: 0;
}

.homepage-slider.image .carousel-item {
	/* mit .carousel-indicators.numbers im gap */
	min-height: 535px;
}

.homepage-slider.image .carousel-fade .carousel-item.active {
	z-index: 0; /* in Bootstrap z-index: 1;, aber dann kommt es im Bild-Slider beim scale-Rollover zu scharzen Strichen am Rand */
	opacity: 1;
}

.homepage-slider.image .carousel-item.single {
	/* ohne .carousel-indicators.numbers */
	min-height: 480px;
}

.homepage-slider.overlay .carousel-item {
	min-height: 360px;
	padding-bottom: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 0.5rem;
}

.homepage-slider.text-only .carousel-item {
	min-height: 360px;
}

.homepage-slider .carousel-item .item-content,
.homepage-slider.image .carousel-item.single .item-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.homepage-slider.image .carousel-item .item-content {
	display: flex;
	flex-direction: column;
	/* 1, 2, 3-Buttons werden im gap platziert */
	gap: 65px;
}

.homepage-slider.image .carousel-item .slider-image {
	width: 100vw;
	height: 50vw;
	aspect-ratio: 2 / 1;
}

.homepage-slider.image .carousel-item .slider-image a {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	max-width: 720px;
	max-height: 360px;
	aspect-ratio: 2 / 1;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

.homepage-slider.image .carousel-item .slider-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: 720px;  /* damit das Bild auf sehr großen Bildschirmen nicht zu groß wird */
	max-height: 360px;
	aspect-ratio: 2 / 1;
	transition: .5s ease all;
	transform: translateZ(0);
}

.homepage-slider.image .carousel-item .slider-image .image-caption,
.homepage-slider.image .carousel-item .slider-image a:is(:hover,:focus,:active) .image-caption {
	color: var(--schrift);
	background-color: var(--hintergrund);
	font-size: 1rem;
	text-decoration: none;
	padding: 0 8px;
	opacity: 0.7;
	margin-top: -1.5em;
	display: block;
	float: right;
}

.homepage-slider.image .carousel-item .slider-image img:hover {
	transform: scale(1.03);
}

.homepage-slider.image .carousel-item .slider-text {
	padding: 0 15px;
}

.carousel :is(h1,h2),
.jumbo :is(h1, h2) {
	font-weight: 300;
	font-size: 2.2rem;
	line-height: 1.2;
	hyphens: manual;
	margin-bottom: 0.5rem;
}

.jumbo :is(h1,h2) {
	margin-bottom: 1rem;
	flex-grow: 1;
}

.homepage-slider.overlay .carousel-item .item-content  {
	min-height: 360px;
	padding: 1rem;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 0;
	background: #e9f2f7bb;
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5);
	color: var(--schrift);
}

.homepage-slider.overlay .carousel-item .item-content .text {
	margin-bottom: 1rem;
	flex-grow: 2;
}

.homepage-slider.text-only .carousel-item .slider-text {
	width: 100%;
	max-width: 600px;
	margin: auto auto;
	display: flex;
	flex-direction: column;
}

.homepage-slider .carousel-item p.button {
	margin-bottom: 0;
}

.jumbo .jumbotron p {
	margin-bottom: 1rem;
	line-height: 1.2;
}

.jumbo .jumbotron p:first-of-type {
	font-size: 1.25rem;
	font-weight: 300;
}

.jumbo p.button {
	flex-grow: 0;
}

.homepage-slider.overlay .carousel-indicators.numbers,
.homepage-slider.text-only .carousel-indicators.numbers {
	position: relative;
	top: 0;
	right: auto;
	left: auto;
	bottom: auto;
}

/* Position zwischen Bild und Text */
.homepage-slider.image .carousel-indicators.numbers {
	position: absolute;
	top: 50vw;
	right: auto;
	left: auto;
	bottom: auto;
}


@media (min-width: 576px) {
	.carousel :is(h1, h2), .jumbo :is(h1, h2) {
		font-size: 2.2rem;
	}
	
	.homepage-slider.image .carousel-item {
		min-height: 510px;
	}
	
	.homepage-slider.overlay .carousel-item,
	.homepage-slider.text-only .carousel-item {
		min-height: 300px;
	}
	
	.homepage-slider.overlay .carousel-item .item-content,
	.homepage-slider.text-only .carousel-item .item-content {
		min-height: 300px;
	}
	
	.homepage-slider.image .carousel-item .slider-text {
		/* min-height: 260px; */
		min-height: 220px;
	}
}


@media (min-width: 768px) {
	.slider-padding,
	.slider-padding.jumbo {
		max-width: 690px;
		padding: 30px 0;
	}
	
	.homepage-slider.image .carousel-item {
		min-height: 520px;
	}
	
	.homepage-slider.overlay .carousel-item,
	.homepage-slider.text-only .carousel-item {
		min-height: 300px;
	}
	
	.homepage-slider.overlay .carousel-item .item-content {
		padding: 1rem 0;
	}
	
	.homepage-slider.image .carousel-item .slider-image {
		width: 690px;
		height: 345px;
	}
	
	/* Homepage: Variante der Bühne mit Overlay */
 	.jumbo .jumbotron .text {
		 hyphens: none;
	}
	
	.homepage-slider.image .carousel-item .slider-text {
		padding: 0;
	}
	
	.carousel :is(h1,h2),
	.jumbo :is(h1, h2) {
		font-size: 2.4rem;
	}
	
	/* Position zwischen Bild und Text */
	.homepage-slider.image .carousel-indicators.numbers {
		position: absolute;
		top: 345px;
		right: auto;
		left: 0;
		bottom: auto;
	}
}


@media (min-width: 992px) {
	.bg-slider {
		margin-top: 0;
	}

	.slider-padding,
	.slider-padding.jumbo {
		max-width: 100%;
		padding: 30px 0;
	}

	.text-only .carousel .carousel-inner {
		padding-bottom: 0;
	}

	.homepage-slider.image .carousel-item,
	.homepage-slider.image .carousel-item.single {
		min-height: unset;
	}

	.homepage-slider.image .carousel-item .item-content,
	.homepage-slider.image .carousel-item.single .item-content {
		display: flex;
		flex-direction: row-reverse;
		justify-content: stretch;
		gap: 30px;
	}

	.homepage-slider.image .carousel-item .slider-image {
		flex: 0 0 calc(50% - 15px);
		width: 100%;
		height: auto;
		aspect-ratio: unset;
	}

	.homepage-slider.image .carousel-item .slider-text {
		flex: 0 0 calc(50% - 15px);
		/* notwendig, um den Text innerhalb seines Containers rechts auszurichten */
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.homepage-slider.image .carousel-item .slider-text .slider-text-inner {
		width: 450px;
	}
	
	.homepage-slider.overlay .carousel-item .item-content .text {
		 margin-bottom: 1rem;
		 flex-grow: 2;
		 width: 75%;
		 max-width: 720px;
	}
	
	.homepage-slider.overlay .carousel-item .jumbotron p:first-of-type {
		font-size: 1.5rem;
	}
	
	/* ab dieser Größe gleiche Position wie bei den anderen Slider-Varianten */
	.homepage-slider.image .carousel-indicators.numbers {
		position: relative;
		top: 0;
		right: auto;
		left: auto;
		bottom: auto;
	}
}


@media (min-width: 1200px) {
	.homepage-slider.image .carousel-item .slider-text .slider-text-inner {
		/* damit der Text linksbündig mit der Navigation ist */
		width: 540px;
	}
	
	.homepage-slider.image .carousel-item .slider-text :is(h1,h2) {
		 /* sorgt für Zeilenumbruch */
		 max-width: 330px;
	}
	
	.homepage-slider .slider-text .button {
		padding-top: 30px;
	}
}


@media (prefers-color-scheme: dark), (inverted-colors: inverted) {
	.bg-slider {
		background-color: #000;
	}
	
	.homepage-slider.overlay .carousel-item .item-content {
		background: #000c;
		-webkit-backdrop-filter: blur(1.5px) brightness(0.5);
		backdrop-filter: blur(1.5px) brightness(0.5);
	}
}