.element-stage {
	--stage-height: auto;
	--stage-radius: var(--radius-3xl);

	--stage-content-gap: var(--gap-sm);
	--stage-padding-y: var(--padding-xxs);
	--stage-padding-x: var(--padding-xs);

	--stage-claim-font-size: var(--fs-xl);
	--stage-bottom-margin: var(--size-8);

	--stage-element-grid-rows: 1fr
		calc(var(--stage-padding-y) + var(--lh-hero-lg) * 0.5) auto;

	--stage-title-max-line: 6;

	position: relative;
	width: 100%;
	margin-bottom: var(--stage-bottom-margin);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--stage-element-grid-rows);

	&.size-3 {
		.stage-title {
			font-size: var(--font-size-hero);
			line-height: var(--lh-hero);
		}
	}

	--stage-content-color: var(--color-primary);
	--stage-content-bg: var(--color-secondary);

	&.neutral {
		--stage-content-color: var(--text-neutral);
		--stage-content-bg: var(--background-neutral);
	}

	@media (min-width: 768px) {
		--stage-padding-y: var(--padding-xs);
		--stage-padding-x: var(--padding-sm);
	}

	@media (min-width: 992px) {
		--stage-radius: var(--radius-4xl);
		--stage-content-gap: var(--gap-md);
		--stage-claim-font-size: var(--fs-3xl);
		--stage-bottom-margin: var(--size-8);

		&.size-3 {
			.stage-content {
				@media (min-width: 1280px) {
					grid-column: 3 / span 10;
				}
			}
		}
	}

	@media (max-width: 1279.9999px) {
		&:has(.stage-claim) {
			--stage-element-grid-rows: 1fr
				calc(
					var(--stage-padding-y) + var(--stage-claim-font-size) * 1.5 *
						0.5
				)
				auto;
		}
	}

	@media (min-width: 1280px) {
		--stage-padding-y: var(--padding-md);
		--stage-padding-x: var(--padding-md);

		--stage-element-grid-rows: 1fr auto
			calc(var(--stage-padding-y) + var(--lh-hero-lg) * 0.5);
		
		--stage-title-max-line: 3;
		
		&.size-3 {
			--stage-element-grid-rows: 1fr auto
				calc(var(--stage-padding-y) + var(--lh-hero) * 0.5);
		}
	}

	.stage-image-wrapper {
		grid-row: 1 / -2;
		grid-column: 1;

		height: var(--stage-height);
		overflow: hidden;

		@media (min-width: 992px) {
			--stage-height: 630px;
		}

		figure {
			height: 100%;
		}

		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}

	.stage-content-wrapper {
		grid-row: 2 / -1;
		grid-column: 1;
		z-index: 1;
	}

	/* nur title ohne verbinder */
	.stage-content-wrapper--after {
		grid-row: 3 / -1;
		grid-column: 1;
		z-index: 1;

		margin-top: var(--size-10);

		@media (min-width: 1280px) {
			margin-top: var(--size-20);
		}

		.stage-colored-block {
			padding: 0;
		}
	}

	.stage-content {
		display: block;
		grid-column: span 4;

		@media (min-width: 748px) {
			grid-column: 2 / span 6;
		}

		@media (min-width: 992px) {
			grid-column: span 8;
		}

		@media (min-width: 1280px) {
			grid-column: 3 / span 10;
		}
	}

	.stage-colored-block {
		width: 100%;
		background-color: var(--stage-content-bg);
		color: var(--stage-content-color);
		border-radius: var(--stage-radius);
		padding: var(--stage-padding-y) var(--stage-padding-x);
		display: inline-flex;
		flex-direction: column;
		gap: var(--stage-content-gap);

		@media (min-width: 1280px) {
			width: auto;
			min-width: 752px;
			max-width: 948px;
		}

		h1 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: var(--stage-title-max-line);
			line-clamp: var(--stage-title-max-line);
			overflow: hidden;
		}

		p {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			overflow: hidden;
		}
	}

	.stage-claim {
		display: block;
		font-size: var(--stage-claim-font-size);
		font-weight: var(--font-weight-bold);
	}

	.stage-title {
		font-size: var(--font-size-hero-lg);
		line-height: var(--lh-hero-lg);
		font-weight: var(--font-weight-bold);
	}
}