/* =========================
   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-accent-color-1 {
	--process-base-color: var(--accent-color-1);
	--process-text-color: var(--font-color-dark, #000000);
}


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


.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-accent-color-1 {
	--process-highlight-color: var(--accent-color-1);
	--process-highlight-text-color: var(--font-color-dark, #000000);
}


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


.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: 1px;
}


.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: 0.9rem;

	padding:
		1.8rem
		1.1rem
		1.8rem
		1.8rem;

	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.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}


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

.process-arrow-icon {
	display: flex;

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

	width: 3.1rem;
	height: 3.1rem;

	flex: 0 0 auto;

	color: inherit;

	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.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.76rem, 0.85vw, 0.96rem);
	font-weight: 600;
	line-height: 1.25;

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


/* =========================
   HOVER
   ========================= */

@media (hover: hover) and (pointer: fine) {

	.process-arrow:hover:not(.is-active) {
		transform: translateY(-3px);

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


	.process-arrow:hover .process-arrow-icon {
		transform: scale(1.08);
	}

}


/* =========================
   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: 230px;

		gap: 0.8rem;

		padding:
			1.4rem
			0.85rem
			1.4rem
			1.5rem;

		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: 2.7rem;
		height: 2.7rem;
	}


	.process-arrow-title {
		font-size: 0.8rem;
		line-height: 1.25;
	}

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 800px) {

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

		gap: 1px;
	}


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

		gap: 0.75rem;

		padding:
			1.3rem
			1.5rem
			2.6rem;

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


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


	.process-arrow-title {
		font-size: 0.85rem;
		line-height: 1.3;
	}


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

}


/* =========================
   REDUCED MOTION
   ========================= */

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

	.process-arrow,
	.process-arrow-icon {
		transition: none;
	}


	.process-arrow:hover,
	.process-arrow.is-active {
		transform: none;
	}


	.process-arrow:hover .process-arrow-icon {
		transform: none;
	}

}