/* =========================================================
   Lizard Group – Sektionen, Banner, Wave Layer
   Struktur:
   - Bannercontainer: .lg-banner_box
   - Wave-HTML-Widget: CSS-Klasse lg-wave-widget
   - Text-HTML-Widget: enthält .lg-banner-text
   ========================================================= */


/* =========================================================
   Loop-Grid / Snap Fix
   ========================================================= */

.e-loop-item > .e-con{
	scroll-snap-align: always !important;
}

/* TO BE OPTIMIZED
.e-loop-item > .e-con{
	scroll-snap-align: none !important;
}

.e-loop-item.lg-snap-on > .e-con{
	scroll-snap-align: always !important;
}
*/ 



/* =========================================================
   Globale Basis
   ========================================================= */

html,
body{
	scroll-behavior: smooth;
}

#team{
	scroll-margin-top: var(--header-height);
}


/* =========================================================
   Banner-Typografie
   ========================================================= */

.lg-banner-eyebrow{
	font-size: clamp(1rem, 0.2vw + 1rem, 1.4rem);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.8;
	margin-bottom: 0.8rem;
	color: rgb(var(--lg-white-01-rgb) / 0.86);
}

.lg-banner_box h1{
	margin: 0 0 0.8rem;
	color: var(--lg-c-text-bright) !important;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 10px rgba(0,0,0,.18);
	hyphens: manual;
	text-wrap: pretty;
}

.lg-banner_box h2{
	margin: 0;
	color: rgb(var(--lg-white-01-rgb) / 0.92) !important;
	line-height: 1.45;
	font-weight: 400;
	text-shadow: 0 1px 8px rgba(0,0,0,.12);
	hyphens: manual;
	text-wrap: pretty;
}

.lg-banner-break{
	display: inline;
}


/* =========================================================
   Banner-Grundstruktur
   ========================================================= */

.lg-banner{
	position: relative;
	display: flex;
	align-items: center;
}

.lg-banner_box{
	position: relative;
}

/* Gemeinsamer Banner-Container */
.lg-banner_box > .e-con-inner{
	position: relative;
	overflow: hidden;
}

/* Direkte Widgets in der Bannerbox */
.lg-banner_box > .e-con-inner > .elementor-element{
	position: relative;
	z-index: 2;
	margin: 0 !important;
}


/* =========================================================
   Wave-Hintergrund
   ========================================================= */

/* Wave-Widget füllt die ganze Bannerfläche */
.lg-wave-widget{
	position: absolute !important;
	inset: 0;
	z-index: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

/* Elementor-Wrappers im Wave-Widget */
.lg-wave-widget > .elementor-widget-container{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* Innerer Wellen-Layer */
.wave-layer{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

/* Canvas */
.wave-canvas{
	display: block;
	width: 100%;
	height: 100%;
}


/* =========================================================
   Text über der Welle
   ========================================================= */

.lg-banner-text{
	position: relative;
	z-index: 2;
}


/* =========================================================
   Leseschutz-Gradient
   ========================================================= */

.lg-banner_box > .e-con-inner::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(10,20,40,0.34) 0%,
		rgba(10,20,40,0.18) 32%,
		rgba(10,20,40,0.06) 52%,
		rgba(10,20,40,0) 70%
	);
}


/* =========================================================
   Desktop / Large
   ========================================================= */

@media (min-width: 992px){

	html,
	body{
		scroll-snap-type: y mandatory;
		scroll-padding-top: var(--header-height);
	}

	body .height-stretch-on{
		min-height: calc(100vh - var(--header-height));
	}

	.lg-banner{
		min-height: calc(100vh - var(--header-height));
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Abstand ober-/unterhalb der Bannerfläche */
	.lg-banner_box > .e-con-inner{
		padding-top: clamp(48px, 8vh, 48px) !important;
		padding-bottom: clamp(72px, 10vh, 72px) !important;

		opacity: 1;
		background:
			var(--lg-banner-highlight),
			var(--lg-banner-surface);
		border: 1px solid var(--lg-banner-border);
		border-radius: 0px;
		box-shadow: var(--lg-banner-shadow);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.lg-banner_box h1{
		font-size: clamp(2.6rem, 4vw, 4.2rem);
	}

	.lg-banner_box h2{
		font-size: clamp(1.1rem, 1.45vw, 1.45rem);
	}

	.lg-banner-text{
		padding: clamp(2rem, 2.8vw, 3.25rem)
		         clamp(2rem, 4vw, 4.5rem);
		padding-right: 6%;
	}

	.lg-section{
		padding-top: 5% !important;
		padding-bottom: 5% !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.lg-footer{
		padding-top: 5% !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}


/* =========================================================
   Tablet und Mobile
   ========================================================= */

@media (max-width: 991px){

	html,
	body{
		scroll-snap-type: none;
		scroll-padding-top: var(--header-height);
	}

	.lg-section{
		padding-top: 120px !important;
		padding-bottom: 0 !important;
	}

	.lg-banner{
		min-height: 25vh;
	}

	.lg-banner_box > .e-con-inner{
		padding-top: 24px !important;
		padding-bottom: 32px !important;

		opacity: 1;
		background:
			var(--lg-banner-highlight),
			linear-gradient(
				135deg,
				rgb(var(--lg-blue-01-rgb) / 0.96) 0%,
				rgb(var(--lg-blue-01-rgb) / 0.88) 55%,
				rgb(var(--lg-cool-01-rgb) / 0.92) 100%
			);
		border: 1px solid rgb(var(--lg-white-01-rgb) / 0.08);
		border-radius: 0px;
		box-shadow: 0 12px 30px rgba(0,0,0,.22);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	.lg-banner_box h1{
		font-size: clamp(2rem, 7vw, 2.7rem);
		line-height: 1.08;
		margin-bottom: 0.65rem;
		text-shadow: 0 2px 8px rgba(0,0,0,.18);
	}

	.lg-banner_box h2{
		font-size: clamp(1rem, 3.8vw, 1.2rem);
		line-height: 1.45;
		text-shadow: 0 1px 6px rgba(0,0,0,.10);
	}

	.lg-banner-eyebrow{
		margin-bottom: 0.65rem;
		letter-spacing: 0.12em;
	}

	.lg-banner-break{
		display: none;
	}

	body .banner-height-stretch-on{
		min-height: 25vh;
	}

	.lg-footer{
		padding-top: 120px !important;
	}

	.lg-banner-text{
		padding: 1.5rem 1.25rem;
	}
}


/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 575px){

	.lg-banner{
		min-height: calc(64vh - var(--header-height));
	}

	.lg-banner_box > .e-con-inner{
		padding-top: 16px !important;
		padding-bottom: 24px !important;
		border-radius: 0px;
	}

	.lg-banner_box h1{
		font-size: clamp(1.75rem, 8vw, 2.2rem);
	}

	.lg-banner_box h2{
		font-size: clamp(0.98rem, 4vw, 1.08rem);
	}

	.lg-banner-eyebrow{
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

	.lg-banner-text{
		padding: 1.25rem 1rem;
	}
}