/**
 * agenic Komponenten-CSS — Prozess-Landkarte (`prozess-landkarte`, Organismus).
 *
 * Quelle: Klick-Prototyp „agenic Stufenmodell" (Artifact, 30.09.2026), keine
 * Figma-Komponente (Abweichung, Rückspielpunkt — s. Widget-Docblock).
 * Kontrakt: Projekt-Doc `claude/stufenmodell-widget-30-09.md`.
 *
 * Raster: n Spalten (Control „Stufen") mit demselben Gap wie die Leiter des
 * Stufenmodells (24) — stehen beide Widgets in derselben Sektion, liegen die
 * Spalten der Landkarte genau unter den Kacheln. Je Zeile: Label und Stand
 * über der Spur, in der Spur der volle Strich (Ist a–b) und die Punkte
 * (möglich bis n−1). Stil „segmente": ein Balkenstück je Stufe — vor dem
 * Ist-Bereich leise Fläche, Ist als Verlauf, danach nur Kontur.
 *
 * tmp-Punkte (Findings im Projekt-Doc):
 *  PL-1  Strichstärke 8 und Punktraster 12 ohne Token (Folienmaß).
 *  PL-2  Verlauf des Ist-Strichs CRM → ERP (Folie) — kein Paint Style dafür.
 *  PL-3  Pill-Höhen 32/36 ohne Token (tag-group kennt 36).
 */

.ag-prozess-landkarte,
.ag-prozess-landkarte * {
	box-sizing: border-box;
}

.ag-prozess-landkarte {
	/* L3 mit L2-Defaults */
	--ag-prozess-landkarte-spalten: 6;                                 /* n, inline vom Partial */
	--ag-prozess-landkarte-gap: var(--spacing-ml);                     /* Spaltenlücke wie die Leiter: 24 */
	--ag-prozess-landkarte-zeilen-gap: var(--spacing-m);               /* Control */
	--ag-prozess-landkarte-spur: 8px;                                  /* tmp PL-1 */
	--ag-prozess-landkarte-heute: linear-gradient(90deg, var(--c-fusion-crm), var(--c-fusion-erp)); /* tmp PL-2 */
	--ag-prozess-landkarte-moeglich: var(--c-fusion-erp-700);
	--ag-prozess-landkarte-vor: var(--color-surface-light);
	--ag-prozess-landkarte-linie: var(--color-border-hairline);
	--ag-prozess-landkarte-band: var(--color-brand-primary-soft);
	--ag-prozess-landkarte-fg: var(--color-text-standard);
	--ag-prozess-landkarte-muted: var(--color-text-grey);
	--ag-prozess-landkarte-pfeil: var(--c-fusion-dark);
	--ag-prozess-landkarte-pill-hoehe: 36px;                           /* tmp PL-3 */
	--ag-prozess-landkarte-space-before: 0px;
	--ag-prozess-landkarte-space-after: 0px;
	/* Rechenhilfen (Regel 9: Mathefunktionen einzeilig) */
	--n: var(--ag-prozess-landkarte-spalten);
	--g: var(--ag-prozess-landkarte-gap);
	--w: calc((100% - (var(--n) - 1) * var(--g)) / var(--n));

	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);
	margin-block: var(--ag-prozess-landkarte-space-before) var(--ag-prozess-landkarte-space-after);
	color: var(--ag-prozess-landkarte-fg);
	font-family: var(--font-sans);
	letter-spacing: -0.02em;
	font-size: var(--ag-prozess-landkarte-copy-fs, var(--ag-copy-m-fs));
	line-height: var(--ag-prozess-landkarte-copy-lh, var(--ag-copy-m-lh));
	font-weight: var(--ag-prozess-landkarte-copy-fw, var(--ag-copy-m-fw));
}

/* ── Kopf ──────────────────────────────────────────────────────── */
.ag-prozess-landkarte__kopf {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--spacing-l);
	align-items: end;
}
.ag-prozess-landkarte__kopf--ohne-text { grid-template-columns: minmax(0, 1fr); }
.ag-prozess-landkarte__kopf--ohne-text .ag-prozess-landkarte__steuer { align-items: flex-start; }
.ag-prozess-landkarte__text { min-width: 0; }
.ag-prozess-landkarte__titel { margin: 0; text-wrap: balance; }
.ag-prozess-landkarte__copy { margin-block-start: var(--spacing-s); max-width: 52ch; }
.ag-prozess-landkarte__copy > :first-child { margin-block-start: 0; }
.ag-prozess-landkarte__copy > :last-child { margin-block-end: 0; }
.ag-prozess-landkarte__steuer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-m);
	min-width: 0;
}
.ag-prozess-landkarte__umschalter {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--spacing-s);
}
/* Umschalter = <button>: Grundblock auf Doppelklasse gegen `.elementor-kit-7 button`. */
.ag-prozess-landkarte .ag-prozess-landkarte__pill,
.ag-prozess-landkarte .ag-prozess-landkarte__pill:hover,
.ag-prozess-landkarte .ag-prozess-landkarte__pill:focus,
.ag-prozess-landkarte .ag-prozess-landkarte__pill:active {
	appearance: none;
	margin: 0;
	min-height: var(--ag-prozess-landkarte-pill-hoehe);
	padding: var(--spacing-s) var(--spacing-m);
	border: var(--border-width-xs) solid var(--ag-prozess-landkarte-linie);
	border-radius: var(--radius-max);
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--ag-prozess-landkarte-fg);
	font-family: var(--font-sans);
	font-size: var(--ag-copy-s-fs);
	line-height: var(--ag-copy-s-lh);
	font-weight: var(--fw-regular);
	letter-spacing: -0.02em;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--motion-hover) var(--motion-ease-standard),
	            border-color var(--motion-hover) var(--motion-ease-standard);
}
.ag-prozess-landkarte .ag-prozess-landkarte__pill:hover {
	background-color: var(--color-interaction-hover-tint);
	border-color: var(--color-border);
}
.ag-prozess-landkarte .ag-prozess-landkarte__pill:focus-visible {
	outline: 2px solid var(--color-interaction-focus-ring);
	outline-offset: 2px;
}
.ag-prozess-landkarte .ag-prozess-landkarte__pill[aria-pressed="true"],
.ag-prozess-landkarte .ag-prozess-landkarte__pill[aria-pressed="true"]:hover {
	background-color: var(--color-surface-darkest);
	border-color: var(--color-surface-darkest);
	color: var(--color-text-inverse-soft);
}
.ag-prozess-landkarte__legende {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-m);
	font-size: var(--ag-copy-s-fs);
	line-height: var(--ag-copy-s-lh);
	color: var(--ag-prozess-landkarte-muted);
}
.ag-prozess-landkarte__legende-eintrag { display: inline-flex; align-items: center; gap: var(--spacing-s); }
.ag-prozess-landkarte__legende-heute {
	display: block;
	width: 32px;
	height: var(--ag-prozess-landkarte-spur);
	border-radius: var(--radius-max);
	background: var(--ag-prozess-landkarte-heute);
}
.ag-prozess-landkarte__legende-moeglich {
	display: block;
	width: 32px;
	height: var(--ag-prozess-landkarte-spur);
	background: radial-gradient(circle at 4px 50%, var(--ag-prozess-landkarte-moeglich) 2.5px, transparent 3.2px) 0 0 / 11px 8px repeat-x;
}

/* ── Raster ────────────────────────────────────────────────────── */
.ag-prozess-landkarte__raster {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ag-prozess-landkarte-zeilen-gap);
	padding-block-end: var(--spacing-s);
}
.ag-prozess-landkarte__achse {
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: var(--g);
	font-size: var(--ag-copy-xs-fs);
	line-height: var(--ag-copy-xs-lh);
	font-weight: var(--fw-regular);
	color: var(--ag-prozess-landkarte-muted);
}
.ag-prozess-landkarte__achse span {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color var(--motion-hover) var(--motion-ease-standard);
}
.ag-prozess-landkarte__achse span.is-aktiv { color: var(--ag-prozess-landkarte-fg); font-weight: var(--fw-medium); }
.ag-prozess-landkarte__achse-rest { font-style: normal; }

.ag-prozess-landkarte__linien,
.ag-prozess-landkarte__band {
	position: absolute;
	inset-block: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}
.ag-prozess-landkarte__linien i {
	position: absolute;
	inset-block: 0;
	width: var(--border-width-xs);
	background: var(--ag-prozess-landkarte-linie);
	left: calc(var(--k) * (var(--w) + var(--g)) - var(--g) / 2);
}
.ag-prozess-landkarte__band {
	right: auto;
	width: var(--w);
	left: calc(var(--k, 0) * (var(--w) + var(--g)));
	background: var(--ag-prozess-landkarte-band);
	border-radius: var(--radius-s);
	opacity: 0;
	transition: left var(--motion-expand) var(--motion-ease-standard), opacity var(--motion-hover) var(--motion-ease-standard);
}
.ag-prozess-landkarte__band.is-aktiv { opacity: 1; }

.ag-prozess-landkarte__zeile {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	row-gap: var(--spacing-xs);
	column-gap: var(--spacing-m);
	align-items: baseline;
}
.ag-prozess-landkarte__zeile[hidden] { display: none; }
.ag-prozess-landkarte__label {
	font-size: var(--ag-copy-s-fs);
	line-height: var(--ag-copy-s-lh);
	font-weight: var(--fw-medium);
	min-width: 0;
}
.ag-prozess-landkarte__stand {
	font-size: var(--ag-copy-xs-fs);
	line-height: var(--ag-copy-xs-lh);
	color: var(--ag-prozess-landkarte-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ag-prozess-landkarte__spur {
	grid-column: 1 / -1;
	position: relative;
	height: var(--spacing-ml);
	min-width: 0;
}

/* Stil Linie: Strich (Ist a–b) + Punkte (bis n−1) + Pfeil */
.ag-prozess-landkarte__heute {
	position: absolute;
	top: 50%;
	height: var(--ag-prozess-landkarte-spur);
	transform: translateY(-50%);
	border-radius: var(--radius-max);
	background: var(--ag-prozess-landkarte-heute);
	left: calc(var(--a) * (var(--w) + var(--g)));
	width: calc((var(--b) - var(--a) + 1) * var(--w) + (var(--b) - var(--a)) * var(--g));
}
.ag-prozess-landkarte__moeglich {
	position: absolute;
	top: 50%;
	height: var(--ag-prozess-landkarte-spur);
	transform: translateY(-50%);
	left: calc((var(--b) + 1) * (var(--w) + var(--g)) - var(--g) + var(--spacing-ms));
	right: 18px;
	background: radial-gradient(circle at 4px 50%, var(--ag-prozess-landkarte-moeglich) 2.5px, transparent 3.2px) 0 0 / 12px 8px repeat-x;
}
.ag-prozess-landkarte__pfeil {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--ag-prozess-landkarte-pfeil);
}
.ag-prozess-landkarte__pfeil svg { display: block; width: 100%; height: 100%; }
.ag-prozess-landkarte__seg { display: none; }

/* Stil Segmente: ein Stück je Stufe, drei Zustände über die Form (nicht nur Farbe) */
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__heute,
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__moeglich,
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__pfeil,
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__linien { display: none; }
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__spur {
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: var(--g);
	align-items: center;
	height: var(--spacing-m);
}
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__seg {
	display: block;
	height: var(--ag-prozess-landkarte-spur);
	border-radius: var(--radius-max);
	background: var(--ag-prozess-landkarte-vor);
}
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__seg.is-heute { background: var(--ag-prozess-landkarte-heute); }
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__seg.is-moeglich {
	background: transparent;
	box-shadow: inset 0 0 0 var(--border-width-xs) var(--ag-prozess-landkarte-moeglich);
}
.ag-prozess-landkarte--segmente .ag-prozess-landkarte__legende-moeglich {
	background: transparent;
	border-radius: var(--radius-max);
	box-shadow: inset 0 0 0 var(--border-width-xs) var(--ag-prozess-landkarte-moeglich);
}

.ag-prozess-landkarte__fuss {
	/* Rechts unten, leise (Rückmeldung Vincent, 30.09.2026); Größe Copy/S 14 (Nachtrag Vincent). */
	align-self: flex-end;
	margin: 0;
	text-align: right;
	font-size: var(--ag-copy-s-fs);
	line-height: var(--ag-copy-s-lh);
	color: var(--ag-prozess-landkarte-muted);
}
.ag-prozess-landkarte--ohne-stand .ag-prozess-landkarte__stand { display: none; }

/* ── Tablet: Kopf einspaltig ───────────────────────────────────── */
@media (max-width: 1023px) {
	.ag-prozess-landkarte__kopf { grid-template-columns: minmax(0, 1fr); }
	.ag-prozess-landkarte__steuer { align-items: flex-start; }
}

/* ── Mobil: engeres Raster, nur Ziffern in der Achse, Segmente ─── */
@media (max-width: 767px) {
	.ag-prozess-landkarte { --ag-prozess-landkarte-gap: var(--spacing-xs); }
	/* Achse zeigt nur den Teil vor dem Punkt (Partial teilt „0 · manuell"). */
	.ag-prozess-landkarte__achse-rest { display: none; }
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__heute,
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__moeglich,
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__pfeil,
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__linien { display: none; }
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__spur {
		display: grid;
		grid-template-columns: repeat(var(--n), minmax(0, 1fr));
		gap: var(--g);
		align-items: center;
		height: var(--spacing-m);
	}
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__seg {
		display: block;
		height: var(--ag-prozess-landkarte-spur);
		border-radius: var(--radius-max);
		background: var(--ag-prozess-landkarte-vor);
	}
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__seg.is-heute { background: var(--ag-prozess-landkarte-heute); }
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__seg.is-moeglich {
		background: transparent;
		box-shadow: inset 0 0 0 var(--border-width-xs) var(--ag-prozess-landkarte-moeglich);
	}
	.ag-prozess-landkarte--mobil-segmente .ag-prozess-landkarte__legende-moeglich {
		background: transparent;
		border-radius: var(--radius-max);
		box-shadow: inset 0 0 0 var(--border-width-xs) var(--ag-prozess-landkarte-moeglich);
	}
	/* Linie mobil: kleineres Punktraster, damit Punkte und Pfeil noch Platz haben */
	.ag-prozess-landkarte--mobil-linie .ag-prozess-landkarte__moeglich { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ag-prozess-landkarte__band,
	.ag-prozess-landkarte__achse span,
	.ag-prozess-landkarte .ag-prozess-landkarte__pill { transition: none; }
}