/*
 * fx10_prozess — „05 Ablauf" (Handoff v8, Abschnitt 1).
 *
 * Schriftgroessen, Farben, Container und Abstaende kommen aus project.css.
 * Hier stehen nur Raster, Zustaende und der Wisch dieses Moduls.
 *
 * Der Wisch ist ein Hintergrund-Verlauf, kein Pseudoelement: die Zeile traegt
 * eine 201% breite Flaeche, deren linke Haelfte navy und deren rechte Haelfte
 * durchsichtig ist. Im Ruhezustand steht die durchsichtige Haelfte im Bild
 * (background-position: 100% 0), aktiv faehrt die navy Haelfte von links ein.
 * Ein Pseudoelement waere hier schlechter: es braeuchte einen eigenen
 * Stapelkontext, und die Zeile ist zugleich Raster-Container.
 */

section.fx10_prozess .fx10_kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: var(--fx-pad-block-gross);
}

section.fx10_prozess .fx10_topline { margin-bottom: var(--fx-gap-block-klein); }
section.fx10_prozess .fx10_titel   { margin: 0; }

section.fx10_prozess .fx10_untertitel {
	margin: var(--fx-gap-block-klein) 0 0;
	max-width: 46ch;
}

/* ---------- Kopf-Link rechts ----------
   .fx-label-gross liefert Familie, Groesse, Laufweite und Versalien; hier bleibt
   nur die Abweichung im Schnitt (700 statt 600) und die Farbe. */

section.fx10_prozess .fx10_kopf_link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
	min-height: 44px;
	font-weight: 700;
	color: var(--fx-azure);
	text-decoration: none;
	border-radius: 0;
	transition: color var(--fx-dauer-header) ease;
}

section.fx10_prozess .fx10_kopf_link:hover,
section.fx10_prozess .fx10_kopf_link:focus-visible {
	color: var(--fx-navy);
}

/* ---------- Liste ---------- */

section.fx10_prozess .fx10_liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fx-navy);
}

section.fx10_prozess .fx10_eintrag { display: block; }

/*
 * minmax(0, 400px) statt 400px fuer die Textspalte: unterhalb der
 * Entwurfsbreite darf sie nachgeben, statt die Zeile breiter zu machen als den
 * Container. Bei 1440px und darueber steht sie weiter auf 400px.
 *
 * Die Zeilenhoehe ist zusaetzlich an der Bildschirmhoehe gedeckelt — auf einem
 * flachen Notebook ist die Hoehe die knappe Groesse, nicht die Breite.
 */
section.fx10_prozess .fx10_zeile {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) minmax(0, 400px) 64px;
	grid-template-areas: "nr titel text pfeil";
	align-items: center;
	min-height: min( clamp(104px, 9.45vw, 136px), var(--fx-buehne-klein) );
	padding: 0 28px;
	border-bottom: 1px solid var(--fx-line-tint);
	border-radius: 0;
	text-decoration: none;
	color: inherit;
}

section.fx10_prozess .fx10_nummer        { grid-area: nr;    color: var(--fx-azure); font-size: var(--fx-fs-nav); }
section.fx10_prozess .fx10_schritt_titel { grid-area: titel; }
section.fx10_prozess .fx10_schritt_text  { grid-area: text; }
section.fx10_prozess .fx10_pfeil         { grid-area: pfeil; }

/*
 * Der Entwurf will 60px. Dafuer gibt es in project.css noch kein Token —
 * --fx-fs-h1 (76px) waere zu gross, deshalb vorlaeufig --fx-fs-zahl (44px).
 * Siehe Report.
 */
section.fx10_prozess .fx10_schritt_titel {
	margin: 0;
	padding-right: 16px;
	font-weight: 800;
	font-size: var(--fx-fs-schritt);
	line-height: 1;
	letter-spacing: var(--fx-ls-h1);
	color: var(--fx-navy);
}

section.fx10_prozess .fx10_schritt_text {
	display: block;
	line-height: 1.55;
	color: var(--fx-text);
}

section.fx10_prozess .fx10_pfeil {
	display: flex;
	justify-self: end;
	color: var(--fx-azure);
}

/* ---------- Der Wisch (nur ab 992px) ---------- */

@media (min-width: 992px) {
	section.fx10_prozess .fx10_zeile {
		background-image: linear-gradient(90deg, var(--fx-navy) 50%, transparent 50%);
		background-size: 201% 100%;
		background-position: 100% 0;
		background-repeat: no-repeat;
		transition: background-position .6s var(--fx-ease-slider);
	}

	section.fx10_prozess .fx10_nummer,
	section.fx10_prozess .fx10_schritt_titel,
	section.fx10_prozess .fx10_schritt_text {
		transition: color .4s ease;
	}

	section.fx10_prozess .fx10_pfeil {
		transform: translateX(-14px);
		transition: transform .5s var(--fx-ease-slider), color .4s ease;
	}

	/* Immer nur eine Zeile aktiv — das ergibt sich aus :hover von selbst. */
	section.fx10_prozess .fx10_zeile:hover,
	section.fx10_prozess .fx10_zeile:focus-visible {
		background-position: 0 0;
	}

	section.fx10_prozess .fx10_zeile:hover .fx10_schritt_titel,
	section.fx10_prozess .fx10_zeile:focus-visible .fx10_schritt_titel {
		color: var(--fx-white);
	}

	section.fx10_prozess .fx10_zeile:hover .fx10_schritt_text,
	section.fx10_prozess .fx10_zeile:focus-visible .fx10_schritt_text {
		color: var(--fx-mist);
	}

	section.fx10_prozess .fx10_zeile:hover .fx10_nummer,
	section.fx10_prozess .fx10_zeile:focus-visible .fx10_nummer,
	section.fx10_prozess .fx10_zeile:hover .fx10_pfeil,
	section.fx10_prozess .fx10_zeile:focus-visible .fx10_pfeil {
		color: var(--fx-ice);
	}

	section.fx10_prozess .fx10_zeile:hover .fx10_pfeil,
	section.fx10_prozess .fx10_zeile:focus-visible .fx10_pfeil {
		transform: translateX(0);
	}
}

/* ---------- Zwischenstufe: Raster bleibt, wird nur enger ---------- */

@media (max-width: 1199px) {
	section.fx10_prozess .fx10_zeile {
		grid-template-columns: 88px minmax(0, 1fr) minmax(0, 320px) 48px;
		padding: 0 20px;
	}
}

/* ---------- Mobil ----------
   Kein Wisch, kein Hover: Nummer und Pfeil stehen oben und spannen beide
   Zeilen, Titel und Text stapeln sich in der Mitte. */

@media (max-width: 991px) {
	section.fx10_prozess .fx10_kopf {
		display: block;
		margin-bottom: var(--fx-gap-block);
	}

	section.fx10_prozess .fx10_kopf_link {
		margin-top: var(--fx-gap-block-klein);
		min-height: 48px;
	}

	section.fx10_prozess .fx10_zeile {
		grid-template-columns: 40px minmax(0, 1fr) 24px;
		grid-template-areas:
			"nr titel pfeil"
			"nr text  pfeil";
		align-items: start;
		min-height: 0;
		padding: 22px 0 24px;
		background-image: none;
	}

	section.fx10_prozess .fx10_nummer {
		padding-top: 8px;
		font-size: var(--fx-fs-label-gross);
	}

	section.fx10_prozess .fx10_schritt_titel {
		padding-right: 0;
		font-size: var(--fx-fs-schritt);
		line-height: 1.05;
	}

	section.fx10_prozess .fx10_schritt_text {
		margin-top: 8px;
		font-size: var(--fx-fs-body);
	}

	section.fx10_prozess .fx10_pfeil {
		padding-top: 6px;
	}

	section.fx10_prozess .fx10_pfeil svg {
		width: 22px;
		height: 22px;
	}
}

/* ---------- Sehr schmal: lange Woerter duerfen brechen ---------- */

@media (max-width: 359px) {
	section.fx10_prozess .fx10_zeile {
		grid-template-columns: 32px minmax(0, 1fr) 20px;
	}

	section.fx10_prozess .fx10_schritt_titel {
		overflow-wrap: anywhere;
	}
}

/* ---------- Bewegung aus ---------- */

@media (prefers-reduced-motion: reduce) {
	section.fx10_prozess .fx10_kopf_link,
	section.fx10_prozess .fx10_zeile,
	section.fx10_prozess .fx10_nummer,
	section.fx10_prozess .fx10_schritt_titel,
	section.fx10_prozess .fx10_schritt_text,
	section.fx10_prozess .fx10_pfeil {
		transition: none;
		animation: none;
	}

	/* Ohne Bewegung darf der Pfeil nicht versetzt stehenbleiben. */
	section.fx10_prozess .fx10_pfeil {
		transform: none;
	}
}