/*------------------------------------*\
  #KOPFSLIDER (boosim/kopfslider)
  Nachbau des MasterSlider-Kopfbereichs von privatbergfuehrer.de.
  Maße wie im Original: Bühne 1024 x 600 px, Textebene 1024 px breit,
  Textzeilen bei 160 / 210 px, Buttons bei 390 px (von oben).
  Unter 1024 px skaliert alles proportional mit (cqi = 1 % Containerbreite).
\*------------------------------------*/
.pbf-kopfslider {
	/* zentrale Stellschrauben */
	--pbf-ks-akzent: var(--pbf-blau, #3498db);
	/* Farbe der unteren Textzeile und von Button 1 */
	--pbf-ks-akzent-hover: var(--pbf-blau-dark, #2980b9);
	--pbf-ks-btn-dunkel: #555;
	--pbf-ks-btn-dunkel-hover: #333;
	--pbf-ks-tempo: 700ms;
	/* Dauer des Slide-Wechsels */

	position: relative;
	container-type: inline-size;
	overflow: hidden;
}

.pbf-kopfslider__swiper,
.pbf-kopfslider__slide {
	/* 1024:600 wie im Original, nach oben auf 600 px begrenzt */
	aspect-ratio: 1024 / 600;
}

.pbf-kopfslider__slide {
	position: relative;
	overflow: hidden;
}

.pbf-kopfslider__bild,
.pbf-kopfslider__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/*--- Textebene: 1024 px breite Bühne, mittig ---*/
.pbf-kopfslider__ebenen {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pbf-kopfslider__box {
	position: relative;
	width: 100%;
	max-width: 1024px;
	height: 100%;
	margin: 0 auto;
	padding-left: 15px;
}

.pbf-kopfslider__zeile,
.pbf-kopfslider__buttons {
	position: absolute;
	left: 15px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 2000ms cubic-bezier(.19, 1, .22, 1), transform 2000ms cubic-bezier(.19, 1, .22, 1);
}

.pbf-kopfslider__zeile {
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
	white-space: nowrap;
}

.pbf-kopfslider__zeile--oben {
	top: 26.667%;
	/* 160 von 600 */
	font-weight: 300;
	font-size: min(45px, 4.4cqi);
	line-height: min(67px, 6.54cqi);
	transition-delay: 700ms;
}

.pbf-kopfslider__zeile--unten {
	top: 35%;
	/* 210 von 600 */
	color: var(--pbf-ks-akzent);
	font-weight: 600;
	font-size: min(60px, 5.86cqi);
	line-height: min(90px, 8.79cqi);
	transition-delay: 1000ms;
}

.pbf-kopfslider__buttons {
	top: 65%;
	/* 390 von 600 */
	display: flex;
	flex-wrap: wrap;
	gap: min(15px, 1.46cqi);
	pointer-events: auto;
	transition-delay: 1300ms;
}

/*--- Einblenden, sobald der Slide steht ---*/
.swiper-slide-active .pbf-kopfslider__zeile,
.swiper-slide-active .pbf-kopfslider__buttons {
	opacity: 1;
	transform: none;
}

/*--- Buttons wie auf der Live-Seite ---*/
.pbf-kopfslider__btn {
	display: inline-block;
	padding: min(6px, .59cqi) min(13px, 1.27cqi);
	background: var(--pbf-ks-akzent);
	color: #fff;
	font-size: min(14px, 1.37cqi);
	line-height: min(22px, 2.15cqi);
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	white-space: nowrap;
}

.pbf-kopfslider__btn:hover,
.pbf-kopfslider__btn:focus-visible {
	background: var(--pbf-ks-akzent-hover);
	color: #fff;
}

.pbf-kopfslider__btn--dunkel {
	background: var(--pbf-ks-btn-dunkel);
}

.pbf-kopfslider__btn--dunkel:hover,
.pbf-kopfslider__btn--dunkel:focus-visible {
	background: var(--pbf-ks-btn-dunkel-hover);
}

/*--- Pfeile: rund, schwarz, erscheinen beim Überfahren ---*/
.pbf-kopfslider__nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 45px;
	height: 45px;
	margin-top: -22px;
	padding: 0;
	border: 3px solid rgb(255 255 255 / 40%);
	border-radius: 90px;
	background: #000 no-repeat center;
	opacity: 0;
	cursor: pointer;
	transition: opacity .3s ease, background-color .3s ease;
}

.pbf-kopfslider__prev {
	left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M10.5 1.5 4 8l6.5 6.5 1.2-1.2L6.4 8l5.3-5.3z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
}

.pbf-kopfslider__next {
	right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M5.5 1.5 12 8l-6.5 6.5-1.2-1.2L9.6 8 4.3 2.7z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
}

.pbf-kopfslider:hover .pbf-kopfslider__nav,
.pbf-kopfslider__nav:focus-visible {
	opacity: 1;
}

.pbf-kopfslider__nav:hover {
	background-color: #3d3d3d;
}

.pbf-kopfslider__nav.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/*--- Punkte: weiß mit schwarzem Rand, aktiver Punkt schwarz ---*/
.pbf-kopfslider__pagination {
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
	line-height: 0;
}

.pbf-kopfslider__pagination .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 4px;
	border: 3px solid rgb(0 0 0 / 44%);
	border-radius: 15px;
	background: #fff;
	opacity: 1;
	cursor: pointer;
}

.pbf-kopfslider__pagination .swiper-pagination-bullet-active {
	border-color: rgb(255 255 255 / 44%);
	background: #000;
}

@media (max-width: 991.98px) {
	.pbf-kopfslider__prev {
		left: 15px;
		background-size: 16px 16px;
	}

	.pbf-kopfslider__next {
		right: 15px;
		background-size: 16px 16px;
	}

	.pbf-kopfslider__nav {
		top: unset !important;
		width: 55px !important;
		height: 55px !important;
		bottom: 15px;
	}

	.pbf-kopfslider__btn {
		padding: 10px 15px;
		font-size: 18px;
		line-height: 1.6;
	}
}

@media (max-width: 767.98px) {
	.pbf-kopfslider__zeile--oben {
		top: 15%;
	}

	.pbf-kopfslider__zeile--unten {
		top: 22%;
	}

	.pbf-kopfslider__buttons {
		top: 50%;
	}
}

/*--- Mobil: Text nicht abschneiden ---*/
@media (max-width: 575.98px) {
	.pbf-kopfslider__btn {
		padding: 5px 10px;
		font-size: 16px;
	}
}

@container (max-width: 575px) {

	.pbf-kopfslider__zeile {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pbf-kopfslider__zeile,
	.pbf-kopfslider__buttons {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}
}