/* Bilderband: dezenter Eye-Catcher – flach, volle Breite, wandernde Ausschnitte, sanftes Überblenden */
.hlq-bilderband {
	--hlq-bb-h: clamp(220px, 24vw, 340px);
	--hlq-bb-fade: 1.6s;
	position: relative;
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--50) !important;
	height: var(--hlq-bb-h);
	overflow: hidden;
	background: var(--wp--preset--color--sand);
	isolation: isolate;
	touch-action: pan-y;
}
@media (max-width: 600px) { .hlq-bilderband { --hlq-bb-h: clamp(170px, 52vw, 230px); } }

.hlq-bb-stage {
	position: absolute;
	inset: 0;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	outline: none;
}
.hlq-bb-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--wp--preset--color--forest); z-index: 3; }

.hlq-bb-slide {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	transition: opacity var(--hlq-bb-fade) ease;
	overflow: hidden;
}
.hlq-bb-slide.is-active { opacity: 1; z-index: 1; }

.hlq-bb-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: var(--hlq-bb-x, 50%) var(--hlq-bb-y, 50%);
	border-radius: 0 !important;
	transform: scale(var(--hlq-bb-s0, 1.25)) translate(var(--hlq-bb-tx0, 0), var(--hlq-bb-ty0, 0));
	transform-origin: center;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
}
/* langsame Kamerafahrt über das Bild, solange es sichtbar ist */
.hlq-bb-slide.is-moving .hlq-bb-img {
	transform: scale(var(--hlq-bb-s1, 1.12)) translate(var(--hlq-bb-tx1, 0), var(--hlq-bb-ty1, 0));
	transition: transform var(--hlq-bb-pan, 9s) linear;
}

/* weicher Übergang in Kopf und Seite */
.hlq-bilderband::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(246, 250, 243, 0.35) 0%, rgba(246, 250, 243, 0) 22%, rgba(246, 250, 243, 0) 70%, rgba(246, 250, 243, 0.55) 100%);
	box-shadow: inset 0 1px 0 rgba(46, 58, 44, 0.06), inset 0 -1px 0 rgba(46, 58, 44, 0.06);
}

/* Bedienelemente: zurückhaltend, erscheinen beim Darüberfahren */
.hlq-bb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.78);
	color: var(--wp--preset--color--forest);
	font-size: 1.45rem;
	line-height: 1;
	display: grid;
	place-items: center;
	padding: 0 0 0.12rem;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.2s ease;
	z-index: 4;
}
.hlq-bb-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.hlq-bb-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.hlq-bilderband:hover .hlq-bb-nav,
.hlq-bilderband:focus-within .hlq-bb-nav { opacity: 1; }
.hlq-bb-nav:hover { background: #fff; }
@media (hover: none) { .hlq-bb-nav { display: none; } }

.hlq-bb-bar {
	position: absolute;
	right: clamp(0.75rem, 2.5vw, 1.75rem);
	bottom: 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	z-index: 4;
}
.hlq-bb-dots { display: flex; gap: 0.35rem; }
.hlq-bb-dot {
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 0 0 1px rgba(46, 58, 44, 0.12);
	cursor: pointer;
	transition: width 0.4s ease, background-color 0.4s ease;
}
.hlq-bb-dot[aria-current="true"] { width: 1.2rem; background: var(--wp--preset--color--sunset); }
.hlq-bb-pause {
	width: 1.3rem;
	height: 1.3rem;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--forest);
	opacity: 0.8;
}
.hlq-bb-pause span { width: 7px; height: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; }
.hlq-bilderband.is-paused .hlq-bb-pause span { width: 0; height: 0; border: 0; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 2px; }

@media (prefers-reduced-motion: reduce) {
	.hlq-bb-slide { transition-duration: 0.01s; }
	.hlq-bb-slide.is-moving .hlq-bb-img { transition: none; }
}

/* Punkte: kleine Optik, aber 24 px Tippfläche */
.hlq-bb-dot { position: relative; }
.hlq-bb-dot::after { content: ""; position: absolute; inset: -9px -4px; }