/* ==========================================================================
   LIEPS – Carousel-/Header-Bild
   Responsive <picture> + optionaler Container-Hintergrund
   ========================================================================== */

.carouselimage__picture {
	display: block;
	width: 100%;
}

.carouselimage--inline {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

/*
 * Die Positionsauswahl gilt auch für das normale responsive Bild.
 * Das Wrapper-Element bleibt 100 % breit; positioniert wird das verkleinerte
 * <picture> innerhalb dieses Wrappers.
 */
.carouselimage--inline[data-carouselimage-position="left"],
.carouselimage--inline[data-carouselimage-position="left top"],
.carouselimage--inline[data-carouselimage-position="left bottom"] {
	justify-content: flex-start;
}

.carouselimage--inline[data-carouselimage-position="right"],
.carouselimage--inline[data-carouselimage-position="right top"],
.carouselimage--inline[data-carouselimage-position="right bottom"] {
	justify-content: flex-end;
}

.carouselimage--inline .carouselimage__picture--inline {
	flex: 0 0 auto;
	width: min(var(--carouselimage-max-size, 100%), 200%);
	max-width: none;
	transform:
		rotate(var(--carouselimage-rotation, 0deg))
		scaleX(var(--carouselimage-flip-x, 1))
		scaleY(var(--carouselimage-flip-y, 1));
	transform-origin: var(--carouselimage-position, center);
}

.carouselimage__picture--inline .carouselimage__image {
	display: block;
	width: 100%;
	height: auto;
}

.carouselimage[data-carouselimage-flip="horizontal"] {
	--carouselimage-flip-x: -1;
}

.carouselimage[data-carouselimage-flip="vertical"] {
	--carouselimage-flip-y: -1;
}

.carouselimage[data-carouselimage-flip="both"] {
	--carouselimage-flip-x: -1;
	--carouselimage-flip-y: -1;
}

/*
 * Hintergrundmodus
 * ----------------
 * Das Bild bleibt bewusst ein echtes <picture>/<img>. Dadurch funktionieren
 * srcset/sizes, WebP-Auswahl, fetchpriority und Browser-Image-Priorisierung –
 * im Gegensatz zu CSS background-image/image-set wesentlich sauberer.
 *
 * Der direkt umgebende Bootstrap-/Header-Container wird zum Bezugssystem.
 */
:is(.header-center, .container, .container-fluid, .section):has(> .frame-type-carouselimage > .carouselimage--background) {
	position: relative;
	isolation: isolate;
}

:is(.header-center, .container, .container-fluid, .section):has(> .frame-type-carouselimage > .carouselimage--background)
	> .frame-type-carouselimage:has(> .carouselimage--background) {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none;
}

:is(.header-center, .container, .container-fluid, .section):has(> .frame-type-carouselimage > .carouselimage--background)
	> :not(.frame-type-carouselimage) {
	position: relative;
	z-index: 1;
}

.carouselimage--background,
.carouselimage--background .carouselimage__picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.carouselimage--background .carouselimage__picture {
	transform:
		rotate(var(--carouselimage-rotation, 0deg))
		scaleX(var(--carouselimage-flip-x, 1))
		scaleY(var(--carouselimage-flip-y, 1));
	transform-origin: var(--carouselimage-position, center);
	scale: var(--carouselimage-max-size, 100%);
}

.carouselimage--background .carouselimage__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: var(--carouselimage-fit, cover);
	object-position: var(--carouselimage-position, center);
}

/* ==========================================================================
   CAROUSELIMAGE – HÖHE VOM GESCHWISTERELEMENT
   ========================================================================== */

/*
 * JS setzt --carouselimage-sibling-height auf dem TYPO3-Frame und ergänzt
 * .is-carouselimage-height-synced.
 *
 * Im Inline-Modus wird die synchronisierte Höhe bis zum <img> weitergegeben.
 * object-fit: contain verhindert Verzerrungen; Bildbreite/Position/Rotation/
 * Flip bleiben weiterhin über die bestehenden Optionen steuerbar.
 */
.frame-type-carouselimage.is-carouselimage-height-synced {
	height: var(--carouselimage-sibling-height) !important;
	min-height: 0;
}

.frame-type-carouselimage.is-carouselimage-height-synced > .carouselimage--inline {
	height: 100%;
	min-height: 0;
}

.frame-type-carouselimage.is-carouselimage-height-synced
	.carouselimage__picture--inline {
	height: 100%;
	max-height: 100%;
}

.frame-type-carouselimage.is-carouselimage-height-synced
	.carouselimage__picture--inline .carouselimage__image {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: var(--carouselimage-position, center);
}

/*
 * Hintergrundmodus besitzt bereits absolute 100%-Geometrie. Wenn dort die
 * Synchronisierung aktiviert wird, bekommt der umgebende TYPO3-Frame dieselbe
 * Zielhöhe; die bestehende Background-Logik bleibt davon unberührt.
 */

/* ==========================================================================
   CAROUSELIMAGE – STICKY HEADING ÜBER BILD
   --------------------------------------------------------------------------
   Eine transformierte Bild-/Picture-Ebene erzeugt einen eigenen
   Stacking-Context. Eine Sticky-Headline, die per translateX in die
   Nachbarspalte hineinragt, kann deshalb trotz z-index:10 unter dem Bild
   landen, wenn die Bildspalte später im DOM gezeichnet wird.

   Lösung:
   Nicht nur die Headline selbst, sondern die beiden Bootstrap-Spalten werden
   auf derselben Stacking-Ebene geordnet.
   ========================================================================== */

.row:has(> [class*="col-"] .sticky-heading)
	:where(> [class*="col-"]) {
	position: relative;
}

/* Die gesamte Zeile bildet einen lokalen Stacking-Kontext. */
.row:has(> [class*="col-"] .sticky-heading)
	:has(> [class*="col-"] .frame-type-carouselimage) {
	position: relative;
	isolation: isolate;
	overflow: visible;
}

/* Text-/Sticky-Spalte liegt über der Bildspalte. */
.row:has(> [class*="col-"] .sticky-heading)
	> [class*="col-"]:has(.sticky-heading) {
	z-index: 2;
	overflow: visible;
}

/* Carousel-Spalte bleibt darunter. */
.row:has(> [class*="col-"] .sticky-heading)
	> [class*="col-"]:has(.frame-type-carouselimage) {
	z-index: 1;
}

/* Die verschobene Überschrift selbst bekommt innerhalb ihrer Spalte
   ausreichend Priorität. */
.row:has(> [class*="col-"] .sticky-heading)
	.sticky-heading :is(h1, h2, h3, h4, h5, h6) {
	z-index: 20;
}