/* =========================
   PROCESS ARROWS
   ========================= */

.process-section {
	--process-base-color: var(--logo-color-1);
	--process-text-color: #ffffff;

	--process-highlight-color: var(--logo-color-2);
	--process-highlight-text-color: #ffffff;

	width: 100%;
}


/* =========================
   GRUNDFARBE
   ========================= */

.process-base-logo-color-1 {
	--process-base-color: var(--logo-color-1);
	--process-text-color: #ffffff;
}


.process-base-logo-color-1-light {
	--process-base-color: var(--logo-color-1-light);
	--process-text-color: #ffffff;
}


.process-base-logo-color-1-dark {
	--process-base-color: var(--logo-color-1-dark);
	--process-text-color: #ffffff;
}


.process-base-logo-color-2 {
	--process-base-color: var(--logo-color-2);
	--process-text-color: #ffffff;
}


.process-base-neutral-color-light {
	--process-base-color: var(--neutral-color-light);
	--process-text-color: var(--font-color-dark, #000000);
}


.process-base-neutral-color-dark {
	--process-base-color: var(--neutral-color-dark);
	--process-text-color: #ffffff;
}


.process-base-white {
	--process-base-color: #ffffff;
	--process-text-color: var(--font-color-dark, #000000);
}


/* =========================
   ANIMATIONSFARBE
   ========================= */

.process-highlight-logo-color-1 {
	--process-highlight-color: var(--logo-color-1);
	--process-highlight-text-color: #ffffff;
}


.process-highlight-logo-color-1-light {
	--process-highlight-color: var(--logo-color-1-light);
	--process-highlight-text-color: #ffffff;
}


.process-highlight-logo-color-1-dark {
	--process-highlight-color: var(--logo-color-1-dark);
	--process-highlight-text-color: #ffffff;
}


.process-highlight-logo-color-2 {
	--process-highlight-color: var(--logo-color-2);
	--process-highlight-text-color: #ffffff;
}


.process-highlight-neutral-color-light {
	--process-highlight-color: var(--neutral-color-light);
	--process-highlight-text-color: var(--font-color-dark, #000000);
}


.process-highlight-neutral-color-dark {
	--process-highlight-color: var(--neutral-color-dark);
	--process-highlight-text-color: #ffffff;
}


.process-highlight-white {
	--process-highlight-color: #ffffff;
	--process-highlight-text-color: var(--font-color-dark, #000000);
}


/* =========================
   ÜBERSCHRIFT
   ========================= */

.process-header {
	margin-top: 0;
	margin-bottom: 2rem;
}


/* =========================
   DESKTOP
   ========================= */

.process-arrows {
	display: flex;

	width: 100%;

	gap: 2px;
}


.process-arrow {
	position: relative;

	display: flex;
	flex: 1 1 0;

	min-width: 0;
	min-height: 270px;

	align-items: center;
	justify-content: center;
	flex-direction: column;

	gap: 1.25rem;

	padding:
		2rem
		1.3rem
		2rem
		2rem;

	color: var(--process-text-color);

	text-align: center;

	background-color: var(--process-base-color);

	clip-path: polygon(
		0 0,
		calc(100% - 1.4rem) 0,
		100% 50%,
		calc(100% - 1.4rem) 100%,
		0 100%,
		1.4rem 50%
	);

	transition:
		background-color 0.22s ease,
		color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}


/* =========================
   ICON
   ========================= */

.process-arrow-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 3.6rem;
	height: 3.6rem;

	flex: 0 0 auto;

	color: inherit;
}


.process-arrow-icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.65;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================
   TITEL
   ========================= */

.process-arrow-title {
	display: block;

	width: 100%;
	max-width: 100%;

	color: inherit;

	font-size: clamp(0.85rem, 1vw, 1.1rem);
	font-weight: 600;
	line-height: 1.35;

	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}


/* =========================
   ANIMATIONSZUSTAND
   ========================= */

.process-arrow.is-active {
	background-color: var(--process-highlight-color);

	color: var(--process-highlight-text-color);

	transform: translateY(-4px);

	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1100px) {

	.process-arrow {
		min-height: 240px;

		gap: 1rem;

		padding:
			1.5rem
			1rem
			1.5rem
			1.7rem;

		clip-path: polygon(
			0 0,
			calc(100% - 1.2rem) 0,
			100% 50%,
			calc(100% - 1.2rem) 100%,
			0 100%,
			1.2rem 50%
		);
	}


	.process-arrow-icon {
		width: 3rem;
		height: 3rem;
	}


	.process-arrow-title {
		font-size: 0.9rem;
	}

}


/* =========================
   MOBILE
   Pfeile zeigen nach unten
   ========================= */

@media (max-width: 800px) {

	.process-arrows {
		display: flex;
		flex-direction: column;

		gap: 2px;
	}


	.process-arrow {
		width: 100%;
		min-height: 170px;

		padding:
			1.5rem
			1.5rem
			2.8rem;

		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - 1.5rem),
			50% 100%,
			0 calc(100% - 1.5rem)
		);
	}


	.process-arrow-icon {
		width: 3.2rem;
		height: 3.2rem;
	}


	.process-arrow-title {
		font-size: 1rem;
		line-height: 1.4;
	}


	.process-arrow.is-active {
		transform: translateY(-2px);
	}

}