/* ==========================================================================
   LIEPS COMPONENT – HERO
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

/* ==========================================================================
   Scroll-Sperre während des Ladens der Canvas-Sequenz
   ========================================================================== */

html.is-sequence-loading,
html.is-sequence-loading body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

html.is-sequence-loading {
	height: 100%;
}

html.is-sequence-loading body {
	height: 100%;
	touch-action: none;
}

/* Optional: Mauszeiger zeigt den Ladevorgang an */
html.is-sequence-loading,
html.is-sequence-loading * {
	cursor: wait !important;
}


/* ==========================================================================
   Display 1 // Hero Captions
   ========================================================================== */

.header-center h1,
.display_1_hero_caption {
	font-family: var(--font-family-headings);
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.05;
	color: var(--brand-color-mirage);
	margin-bottom: 2rem;
}

/* sm >= 576px */
@media (min-width: 576px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 4rem;
	}
}

/* md >= 768px */
@media (min-width: 768px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 5rem;
	}
}

/* lg >= 992px */
@media (min-width: 992px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 6rem;
	}
}

/* xl >= 1200px */
@media (min-width: 1200px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 7rem;
	}
}

/* xxl >= 1400px */
@media (min-width: 1400px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 8rem;
	}
}


/* ==========================================================================
   Display 2 // Hero Captions
   ========================================================================== */

.header-center h2,
.display_2_hero_caption {
	font-family: var(--font-family-standard);
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.1;
	color: var(--brand-color-mirage);
	margin-bottom: 2rem;
}

/* sm >= 576px */
@media (min-width: 576px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 2.6rem;
	}
}

/* md >= 768px */
@media (min-width: 768px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 3.3rem;
	}
}

/* lg >= 992px */
@media (min-width: 992px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 4rem;
	}
}

/* xl >= 1200px */
@media (min-width: 1200px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 4.8rem;
	}
}

/* xxl >= 1400px */
@media (min-width: 1400px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 5.6rem;
	}
}

/* ==========================================================
   Animierte Canvas-Bildsequenz
   ========================================================== */

.animated-image {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #fff;
	isolation: isolate;
}

/*
 * Das vorhandene TYPO3-Bild bleibt sichtbar,
 * bis der erste Canvas-Frame tatsächlich gezeichnet wurde.
 */
.animated-image>.ce-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.animated-image>.ce-image figure,
.animated-image>.ce-image picture {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.animated-image>.ce-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Der Canvas ist zunächst transparent.
 * Erst nach dem erfolgreichen Laden und Zeichnen von Frame 0
 * wird er eingeblendet.
 */
.animated-image__canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Wird durch JavaScript nach dem ersten erfolgreichen Zeichnen gesetzt. */
.animated-image.is-sequence-ready .animated-image__canvas {
	opacity: 1;
}

.animated-image.is-sequence-ready>.ce-image {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Zweite Hero-Szene – layoutschonende Ergänzungen
   ========================================================================== */

.animated-image #c16 {
	z-index: 4;
}

/*
 * Das Logo behält seine von TYPO3 erzeugte Struktur.
 * Keine Änderungen an .ce-row, .ce-column oder .ce-gallery.
 */
.animated-image #c12 figure {
	margin: 0;
}

.animated-image #c12 picture,
.animated-image #c12 img {
	display: block;
	max-width: 100%;
}

.animated-image #c12 img {
	width: 100%;
	height: auto;
}

.animated-image #c14,
.animated-image #c15 {
	white-space: nowrap;
}

@media (max-width: 767.98px) {

	.animated-image #c14,
	.animated-image #c15 {
		max-width: calc(60% - 2rem);
		white-space: normal;
	}

	.animated-image #c14 {
		text-align: left;
	}

	.animated-image #c15 {
		text-align: right;
	}
}

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

	.animated-image #c16,
	.animated-image #c12,
	.animated-image #c13,
	.animated-image #c14,
	.animated-image #c15,
	.animated-image .display_1_hero_caption,
	.animated-image .display_2_hero_caption {
		will-change: auto;
	}
}


/* ==========================================================================
   #c10 Darstellung
   ========================================================================== */
#c10 {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 40;
	flex-direction: column-reverse;
	flex-wrap: wrap;
	align-content: center;
}

#c10 h1.display_1_hero_caption,
#c10 h2.display_2_hero_caption {
	line-height: 1 !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Squash-Wortanimation
   ========================================================================== */

#c10 {
	cursor: default;
}

.display_center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
 * Die vorhandene TYPO3-Überschrift bleibt bestehen.
 */
#c10 h1.display_1_hero_caption {
	position: relative;
	display: block;

	width: 100%;
	max-width: none;

	margin: 0;

	overflow: visible;

	user-select: none;
	-webkit-user-select: none;

	/*
	 * Vertikales Scrollen bleibt auf Mobilgeräten möglich.
	 * Horizontale Bewegungen verarbeitet das JavaScript.
	 */
	touch-action: pan-y;
}


/* Bühne der wechselnden Wörter */

#c10 .squash-caption__stage {
	position: relative;

	display: inline-block;

	overflow: hidden;
	vertical-align: bottom;

	isolation: isolate;
	contain: layout paint;
}


/* Aktuelles und hereinkommendes Wort */

#c10 .squash-caption__word {
	position: absolute;
	top: 0;
	left: 50%;

	display: block;

	width: max-content;

	white-space: nowrap;
	pointer-events: none;

	transform-origin: center center;
	will-change: transform, opacity, filter;
}


/* Während des horizontalen Ziehens */

#c10.squash-caption.is-dragging {
	cursor: default;
}


/* Mobile Geräte */

@media (hover: none),
(pointer: coarse) {
	#c10 {
		cursor: default;
	}
}


/* Reduzierte Bewegungen respektieren */

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

	#c10,
	#c10.squash-caption.is-dragging {
		cursor: default;
	}

	#c10 .squash-caption__word {
		will-change: auto;
	}
}


/* ==========================================================================
   header-center
   ========================================================================== */

.header-center {
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	align-items: flex-start;
}

.overlay:has(.header-center) {

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	justify-content: center;
}