/* =========================================================
   TRUENTO SHOP-OVERVIEW – HERO

   Der äußere Satzspiegel entspricht exakt dem Header:
   width: 100%
   max-width: var(--truento-content-width)
   margin-left/right: auto
   ========================================================= */


/* =========================================================
   SATZSPIEGEL
   ========================================================= */

.truento-overview-shell.container {
	width: 100%;
	max-width: var(--truento-content-width);

	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;

	padding-right: 15px;
	padding-left: 15px;

	box-sizing: border-box;
}


/* =========================================================
   HERO – GRUNDLAYOUT
   ========================================================= */

.truento-overview-hero {
	position: relative;

	--overview-red:
		var(--truento-rot);

	--overview-dark:
		var(--truento-anthrazit-dunkel);

	--overview-text:
		var(--truento-text-hell);

	display: grid;
	grid-template-columns:
		minmax(0, 39fr)
		minmax(0, 61fr);

	width: 100%;
	min-width: 0;
	min-height: 375px;

	margin: 0;
	padding: 0;

	box-sizing: border-box;
	overflow: visible;

	background: var(--truento-weiss);
}


/* =========================================================
   HERO – INHALTSBEREICH

   Links kein Innenabstand:
   Textbeginn = linke Kante der Produktdetailseite.
   ========================================================= */

.truento-overview-hero__content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;
	min-width: 0;

	padding:
		28px
		30px
		28px
		0;

	box-sizing: border-box;

	background: var(--truento-weiss);
}


/*
 * Weicher Übergang vom weißen Inhaltsbereich ins Bild.
 */
.truento-overview-hero__content::after {
	position: absolute;
	top: 0;
	right: -300px;
	bottom: 0;

	width: 300px;

	content: "";
	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			var(--truento-weiss-100) 0%,
			var(--truento-weiss-98) 32%,
			var(--truento-weiss-90) 52%,
			var(--truento-weiss-68) 70%,
			var(--truento-weiss-36) 86%,
			var(--truento-weiss-00) 100%
		);
}


/* =========================================================
   HERO – TEXT
   ========================================================= */

.truento-overview-hero__eyebrow {
	position: relative;
	z-index: 3;

	margin: 0 0 14px;

	color: var(--overview-red);

	font-size: 13px;
	font-weight: 700;
	letter-spacing: .15em;
	line-height: 1.4;
	text-transform: uppercase;
}


.truento-overview-hero__title {
	position: relative;
	z-index: 3;

	max-width: 560px;
	margin: 0 0 18px;

	color: var(--overview-dark);

	font-family:
		var(--truento-font-heading);

	font-size:
		clamp(40px, 3.6vw, 60px);

	font-weight: 400;
	letter-spacing: -.035em;
	line-height: 1.05;
	text-transform: none;
}


.truento-overview-hero__description {
	position: relative;
	z-index: 3;

	max-width: 540px;
	margin: 0 0 28px;

	color: var(--overview-text);

	font-size:
		clamp(16px, 1.1vw, 18px);

	line-height: 1.6;
}


/* =========================================================
   HERO – MERKMALE
   ========================================================= */

.truento-overview-hero__features {
	position: relative;
	z-index: 3;

	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 22px;

	width: 100%;
	margin-top: 4px;
}


.truento-overview-hero__feature {
	display: flex;
	gap: 12px;
	align-items: flex-start;

	min-width: 0;
}


.truento-overview-hero__feature-icon {
	display: block;

	flex: 0 0 34px;

	width: 34px;
	max-width: 34px;
	height: 34px;

	margin: 0;

	background-color:
		var(--overview-red);

	-webkit-mask-image:
		var(--truento-feature-icon);
	mask-image:
		var(--truento-feature-icon);

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-size: contain;
	mask-size: contain;
}


.truento-overview-hero__feature-text {
	display: flex;
	flex-direction: column;
	gap: 2px;

	min-width: 0;
}


.truento-overview-hero__feature-text strong {
	display: block;

	color: var(--overview-dark);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}


.truento-overview-hero__feature-text span {
	display: block;

	color: var(--overview-text);

	font-size: 13px;
	line-height: 1.4;
}


/* =========================================================
   HERO – BILDBEREICH

   Rechte Bildkante = rechte Kante des Satzspiegels.
   ========================================================= */

.truento-overview-hero__media {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: stretch;

	width: 100%;
	min-width: 0;
	min-height: 375px;

	margin: 0;
	padding: 0;

	box-sizing: border-box;
	overflow: hidden;

	background: var(--truento-weiss);
}


.truento-overview-hero__image {
	display: block;

	width: 100%;
	max-width: 100%;
	height: 375px;

	margin: 0;
	padding: 0;

	object-fit: cover;
	object-position: center;
}




/* =========================================================
   DESKTOP – FULL-BLEED HERO
   ========================================================= */

@media screen and (min-width: 850px) {

	/*
	 * Das Bild bleibt in seiner bisherigen Grid-Spalte,
	 * wird rechts aber bis an den Browserrand verlängert.
	 */
	.truento-overview-hero__media {
		width:
			calc(
				100%
				+ max(
					0px,
					(100vw - var(--truento-content-width)) / 2
				)
				+ 15px
			);

		max-width: none;
	}


	/*
	 * Horizontale Trennlinie über die komplette
	 * Browserbreite, ohne zusätzliches HTML/Grid-Element.
	 */
	.truento-overview-hero::after {
		position: absolute;
		right: auto;
		bottom: 0;
		left: 50%;

		z-index: 5;

		width: 100vw;
		height: 1px;

		content: "";
		pointer-events: none;

		background:
			var(--truento-linie-anthrazit-12);

		transform:
			translateX(-50%);
	}


	/*
	 * Der zuvor testweise in der PHP eingefügte Divider
	 * wird nicht benötigt.
	 */
	.truento-overview-hero
	.top-divider,
	.truento-overview-hero__divider {
		display: none !important;
	}
}


/* =========================================================
   TABLET / MOBIL
   Entspricht der Produktdetailseite mit 15 px Seitenabstand.
   ========================================================= */

@media screen and (max-width: 849px) {

	.truento-overview-shell {
		width: 100%;
		max-width: none;

		margin: 0 auto;
		padding-right: 15px;
		padding-left: 15px;
	}


	.truento-overview-hero {
		grid-template-columns: 1fr;

		min-height: 0;
	}


	.truento-overview-hero__content {
		order: 2;

		padding:
			38px 22px 44px;
	}


	.truento-overview-hero__content::after {
		display: none;
	}


	.truento-overview-hero__media {
		order: 1;

		min-height: 390px;
	}


	.truento-overview-hero__image {
		height: 390px;
	}


	.truento-overview-hero__features {
		grid-template-columns: 1fr;
		gap: 16px;
	}


	.truento-overview-hero__feature {
		align-items: center;
	}
}


@media screen and (max-width: 549px) {

	.truento-overview-hero__media {
		min-height: 270px;
	}


	.truento-overview-hero__image {
		height: 270px;
	}


	.truento-overview-hero__content {
		padding:
			34px 18px 40px;
	}


	.truento-overview-hero__title {
		font-size:
			clamp(38px, 11vw, 50px);
	}


	.truento-overview-hero__description {
		font-size: 16px;
	}
}