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

.process-section {
	--process-base-color: var(--logo-color-1-dark);
	--process-highlight-color: var(--logo-color-2);
	--process-text-color: var(--bg-color);

	width: 100%;
}


/* =========================
   FARBAUSWAHL
   ========================= */

.process-base-bg {
	--process-base-color: var(--bg-color);
	--process-text-color: var(--font-color);
}

.process-base-font {
	--process-base-color: var(--font-color);
	--process-text-color: var(--bg-color);
}

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

.process-base-blue {
	--process-base-color: var(--logo-color-1);
	--process-text-color: var(--bg-color);
}

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

.process-base-turquoise {
	--process-base-color: var(--logo-color-2);
	--process-text-color: var(--font-color);
}


/* =========================
   HIGHLIGHT
   ========================= */

.process-highlight-bg {
	--process-highlight-color: var(--bg-color);
}

.process-highlight-font {
	--process-highlight-color: var(--font-color);
}

.process-highlight-darkblue {
	--process-highlight-color: var(--logo-color-1-dark);
}

.process-highlight-blue {
	--process-highlight-color: var(--logo-color-1);
}

.process-highlight-lightblue {
	--process-highlight-color: var(--logo-color-1-light);
}

.process-highlight-turquoise {
	--process-highlight-color: var(--logo-color-2);
}


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

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


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

.process-arrows {
	display: flex;

	width: 100%;

	/*
	 * Nur noch sehr kleiner Abstand zwischen
	 * den einzelnen Pfeilen.
	 */
	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;

	/*
	 * Etwas weniger seitliches Padding,
	 * damit längere Texte mehr Platz haben.
	 */
	padding:
		2rem
		1.3rem
		2rem
		2rem;

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

	text-align: center;

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

	/*
	 * Alle Pfeile haben jetzt exakt
	 * dieselbe Form – auch der erste.
	 *
	 * Die Einbuchtung ist außerdem kleiner,
	 * damit mehr nutzbare Breite bleibt.
	 */
	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,
		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;

	/*
	 * Wörter werden nicht mehr mitten
	 * im Wort zerhackt.
	 */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}


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

.process-arrow.is-active {
	background-color: var(--process-highlight-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);
	}
}