/**
 * agenic Komponenten-CSS — Stufenmodell (`stufenmodell`, 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`.
 *
 * Aufbau: Leiter (Kacheln = Reiter, role=tablist) über einem Panel. Desktop
 * ab 1024: sechs Spalten im Raster der Sektion, Panel darunter mit Zeiger auf
 * die gewählte Kachel. Darunter: Akkordeon (Kachel = Zeile, Panel klappt in
 * der Zeile auf) oder Wischen (Kacheln seitlich, Panel darunter).
 *
 * tmp-Punkte (Findings im Projekt-Doc):
 *  SM-1  Kachel-Innenpolster 24 statt Karten-Polster 32 — sechs Spalten à 180 px.
 *  SM-2  Treppe: Grundhöhe = höchste Kachel, Zuwachs je Stufe aus der
 *        Spacing-Leiter (Control); stage-ladder kennt 280/+60 — hier bewusst anders.
 *  SM-3  Icon-Größen 32/40/48 ohne Größen-Token (icon-badge kennt 32/48).
 *  SM-4  Zeiger 20 px Raute, Radius 3 — kein Token.
 */

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

.ag-stufenmodell {
	/* L3 mit L2-Defaults */
	--ag-stufenmodell-gap: var(--spacing-ml);                       /* Raster wie stage-ladder: 24 */
	--ag-stufenmodell-pad: var(--spacing-ml);                       /* tmp SM-1 */
	--ag-stufenmodell-radius: var(--radius-l);                      /* Karten-Radius 24 */
	--ag-stufenmodell-schritt: var(--spacing-ml);                   /* Treppe: Zuwachs je Stufe (Control) */
	--ag-stufenmodell-icon: 40px;                                   /* tmp SM-3 */
	--ag-stufenmodell-karte-bg: var(--color-surface-light);         /* Fläche der Kachel */
	--ag-stufenmodell-karte-fg: var(--color-text-standard);
	--ag-stufenmodell-karte-muted: var(--color-text-grey);
	--ag-stufenmodell-karte-akzent: var(--color-text-branded);      /* „Wer die Arbeit macht" */
	--ag-stufenmodell-icon-farbe: var(--color-icon-border);         /* Figma Icon/border — Icons sind immer dunkel (Vincent, 30.09.2026) */
	--ag-stufenmodell-aktiv-icon: var(--color-icon-border-inverse); /* Figma Icon/border-inverse — auf der gewählten, dunklen Karte */
	--ag-stufenmodell-karte-linie: var(--color-border);
	--ag-stufenmodell-karte-hover: var(--color-interaction-hover-tint);
	--ag-stufenmodell-aktiv-bg: var(--color-surface-darkest);       /* gewählte Kachel */
	--ag-stufenmodell-aktiv-fg: var(--color-text-inverse-soft);
	--ag-stufenmodell-aktiv-muted: var(--color-text-grey-inverse);
	--ag-stufenmodell-aktiv-akzent: var(--color-text-link-inverse);
	--ag-stufenmodell-aktiv-linie: var(--color-border-on-inverse);
	--ag-stufenmodell-aktiv-tiefe: var(--gradient-tiefe-diagonal);  /* Tiefe wie die dunklen Flächen */
	--ag-stufenmodell-panel-bg: var(--color-surface-darkest);
	--ag-stufenmodell-panel-fg: var(--color-text-inverse-soft);
	--ag-stufenmodell-panel-muted: var(--color-text-grey-inverse);
	--ag-stufenmodell-panel-pad: var(--spacing-xl);                  /* 40 */
	--ag-stufenmodell-panel-spalten: 3;
	--ag-stufenmodell-space-before: 0px;
	--ag-stufenmodell-space-after: 0px;

	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
	position: relative;
	margin-block: var(--ag-stufenmodell-space-before) var(--ag-stufenmodell-space-after);
	font-family: var(--font-sans);
	letter-spacing: -0.02em;
}

/* Flächenachsen */
.ag-stufenmodell--flaeche-lightest { --ag-stufenmodell-karte-bg: var(--color-surface-lightest); }
.ag-stufenmodell--aktiv-brand-strong { --ag-stufenmodell-aktiv-bg: var(--color-surface-brand-strong); }
/* Fusion: Paint Style „Fusion | Gradients/fusion-basic--reverse-30" wie die Karte
   Fläche=gradient (card.css). Nur die Karte — das Panel behält seine Fläche.
   Auf dem Verlauf tragen Nebentexte und Akzent die helle Textfarbe (Grau und
   Link-Grün fielen auf dem hellen Verlaufsstopp zu schwach aus); die Linie
   nimmt die stärkere Inverse-Kontur. */
.ag-stufenmodell--aktiv-fusion {
	--ag-stufenmodell-aktiv-bg: var(--c-fusion-dark);
	--ag-stufenmodell-aktiv-bild: var(--gradient-fusion-basic-reverse-30);
	--ag-stufenmodell-aktiv-muted: var(--color-text-inverse-soft);
	--ag-stufenmodell-aktiv-akzent: var(--color-text-inverse-soft);
	--ag-stufenmodell-aktiv-linie: var(--color-border-on-inverse-strong);
}
.ag-stufenmodell--panel-light {
	--ag-stufenmodell-panel-bg: var(--color-surface-light);
	--ag-stufenmodell-panel-fg: var(--color-text-standard);
	--ag-stufenmodell-panel-muted: var(--color-text-grey);
}
.ag-stufenmodell--icon-s { --ag-stufenmodell-icon: 32px; }
.ag-stufenmodell--icon-l { --ag-stufenmodell-icon: 48px; }

/* ── Leiter ────────────────────────────────────────────────────── */
.ag-stufenmodell__scroll { min-width: 0; }

.ag-stufenmodell__leiter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--ag-stufenmodell-gap);
	align-items: stretch;
}
.ag-stufenmodell--treppe .ag-stufenmodell__stufe {
	/* Treppe: alle Zeilen gleich hoch (Raster streckt), die Kachel füllt den
	   Rest unter einem Versatz von (Anzahl − 1 − Index) × Zuwachs — die erste
	   Kachel ist die kürzeste, die letzte die höchste, alle stehen auf einer
	   Grundlinie. Index und Anzahl kommen inline vom Partial. */
	padding-block-start: calc((var(--ag-stufenmodell-anzahl, 6) - 1 - var(--ag-stufenmodell-index, 0)) * var(--ag-stufenmodell-schritt));
}

.ag-stufenmodell__stufe {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Kachel = <button>. Grundblock auf Doppelklasse: `.elementor-kit-7 button`
   (0,1,1) setzt Verlauf, Radius 999, Schrift und Farbe — gemessen 19.08.2026
   am ag_tab_item (agenic-figma-zu-widget, „Gegen Kit-Regeln absichern"). */
.ag-stufenmodell .ag-stufenmodell__tab,
.ag-stufenmodell .ag-stufenmodell__tab:hover,
.ag-stufenmodell .ag-stufenmodell__tab:focus,
.ag-stufenmodell .ag-stufenmodell__tab:active {
	appearance: none;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: var(--ag-stufenmodell-pad);
	border: 0;
	border-radius: var(--ag-stufenmodell-radius);
	background-color: var(--ag-stufenmodell-karte-bg);
	background-image: none;
	box-shadow: none;
	color: var(--ag-stufenmodell-karte-fg);
	font-family: var(--font-sans);
	font-size: var(--ag-stufenmodell-karte-copy-fs, var(--ag-copy-s-fs));
	line-height: var(--ag-stufenmodell-karte-copy-lh, var(--ag-copy-s-lh));
	font-weight: var(--ag-stufenmodell-karte-copy-fw, var(--ag-copy-s-fw));
	letter-spacing: -0.02em;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	/* Kit setzt an <button> `white-space: nowrap` — gemessen live 30.09.2026:
	   „Erkennen & informieren" lief 30 px über die 180er Kachel. */
	white-space: normal;
	overflow-wrap: break-word;
	cursor: pointer;
	transition: transform var(--motion-hover) var(--motion-ease-standard),
	            background-color var(--motion-hover) var(--motion-ease-standard),
	            color var(--motion-hover) var(--motion-ease-standard);
}
.ag-stufenmodell .ag-stufenmodell__tab:hover {
	background-image: linear-gradient(var(--ag-stufenmodell-karte-hover), var(--ag-stufenmodell-karte-hover));
	transform: translateY(calc(-1 * var(--motion-distance-shift)));   /* Karten-Lift 0.7 */
}
.ag-stufenmodell .ag-stufenmodell__tab:focus-visible {
	outline: 2px solid var(--color-interaction-focus-ring);
	outline-offset: 2px;
}
.ag-stufenmodell .ag-stufenmodell__tab[aria-selected="true"],
.ag-stufenmodell .ag-stufenmodell__tab[aria-selected="true"]:hover {
	background-color: var(--ag-stufenmodell-aktiv-bg);
	background-image: var(--ag-stufenmodell-aktiv-bild, var(--ag-stufenmodell-aktiv-tiefe));
	color: var(--ag-stufenmodell-aktiv-fg);
	transform: none;
}
/* Ohne Panel bleibt die Leiter still: keine gewählte Kachel, kein Zeiger. */
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab,
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab[aria-selected="true"],
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab:hover {
	background-color: var(--ag-stufenmodell-karte-bg);
	background-image: none;
	color: var(--ag-stufenmodell-karte-fg);
	transform: none;
	cursor: default;
}

.ag-stufenmodell__kopf,
.ag-stufenmodell__fakten {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-xs);
	min-width: 0;
	width: 100%;
}
.ag-stufenmodell__icon {
	display: block;
	width: var(--ag-stufenmodell-icon);
	height: var(--ag-stufenmodell-icon);
	margin-block-end: var(--spacing-ms);
	color: var(--ag-stufenmodell-icon-farbe);
	font-size: calc(var(--ag-stufenmodell-icon) * 0.7);
	line-height: 1;
}
.ag-stufenmodell__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
/* Linien-Symbole der Folie: nur Kontur (currentColor), keine Füllung */
.ag-stufenmodell__icon svg.ag-stufenmodell__symbol { fill: none; }
.ag-stufenmodell__icon i { display: block; width: 100%; height: 100%; line-height: var(--ag-stufenmodell-icon); }
.ag-stufenmodell__level {
	font-size: var(--fs-300);           /* Copy/M 16/21 Medium */
	line-height: calc(21 / 16);
	font-weight: var(--fw-medium);
}
.ag-stufenmodell__grad { color: var(--ag-stufenmodell-karte-muted); }
.ag-stufenmodell__trenner {
	display: block;
	width: 100%;
	height: var(--border-width-xs);
	background: var(--ag-stufenmodell-karte-linie);
	margin-block: var(--spacing-ms);
}
.ag-stufenmodell__rolle {
	font-size: var(--fs-300);
	line-height: calc(21 / 16);
	font-weight: var(--fw-medium);
}
.ag-stufenmodell__arbeit {
	color: var(--ag-stufenmodell-karte-akzent);
	font-weight: var(--fw-regular);
	margin-block-start: var(--spacing-xs);
}
.ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__icon { color: var(--ag-stufenmodell-aktiv-icon); }
.ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__arbeit { color: var(--ag-stufenmodell-aktiv-akzent); }
.ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__grad { color: var(--ag-stufenmodell-aktiv-muted); }
.ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__trenner { background: var(--ag-stufenmodell-aktiv-linie); }
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__icon { color: var(--ag-stufenmodell-icon-farbe); }
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__arbeit { color: var(--ag-stufenmodell-karte-akzent); }
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__grad { color: var(--ag-stufenmodell-karte-muted); }
.ag-stufenmodell--ohne-panel .ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__trenner { background: var(--ag-stufenmodell-karte-linie); }

/* Chevron: nur im Akkordeon sichtbar (unten) */
.ag-stufenmodell__chevron { display: none; }

/* Die Vorlagen bleiben unsichtbar — <template> rendert nicht, aber ältere
   Browser ohne template-Unterstützung würden den Inhalt zeigen. */
.ag-stufenmodell__vorlage { display: none; }

/* ── Panel ─────────────────────────────────────────────────────── */
.ag-stufenmodell__panel-slot { min-width: 0; }
.ag-stufenmodell__panel[hidden] { display: none; }
.ag-stufenmodell__panel {
	--ag-stufenmodell-zeiger-x: 50%;
	position: relative;
	margin-block-start: var(--spacing-s);
	border-radius: var(--ag-stufenmodell-radius);
	background-color: var(--ag-stufenmodell-panel-bg);
	background-image: var(--ag-stufenmodell-aktiv-tiefe);
	color: var(--ag-stufenmodell-panel-fg);
	padding: var(--ag-stufenmodell-panel-pad);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--spacing-xl);
	font-size: var(--ag-stufenmodell-panel-copy-fs, var(--ag-copy-m-fs));
	line-height: var(--ag-stufenmodell-panel-copy-lh, var(--ag-copy-m-lh));
	font-weight: var(--ag-stufenmodell-panel-copy-fw, var(--ag-copy-m-fw));
}
.ag-stufenmodell--panel-light .ag-stufenmodell__panel { background-image: none; }
.ag-stufenmodell__panel:focus-visible {
	outline: 2px solid var(--color-interaction-focus-ring);
	outline-offset: 2px;
}
/* Zeiger: Raute unter der gewählten Kachel (JS setzt --ag-stufenmodell-zeiger-x). tmp SM-4 */
.ag-stufenmodell__panel::before {
	content: "";
	position: absolute;
	top: -9px;
	left: var(--ag-stufenmodell-zeiger-x);
	width: 20px;
	height: 20px;
	background: var(--ag-stufenmodell-panel-bg);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 3px;
}
.ag-stufenmodell--ohne-zeiger .ag-stufenmodell__panel::before { display: none; }

.ag-stufenmodell__panel-kopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-m);
	min-width: 0;
}
.ag-stufenmodell__panel .ag-stufenmodell__panel-pill { align-self: flex-start; }
.ag-stufenmodell__panel-titel {
	margin: 0;
	color: inherit;
	text-wrap: balance;
}
.ag-stufenmodell__panel-def {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--spacing-xs) var(--spacing-m);
	margin: 0;
	font-size: var(--ag-copy-s-fs);
	line-height: var(--ag-copy-s-lh);
}
.ag-stufenmodell__panel-def dt { color: var(--ag-stufenmodell-panel-muted); margin: 0; }
.ag-stufenmodell__panel-def dd { margin: 0; font-weight: var(--fw-regular); }
.ag-stufenmodell__panel .ag-stufenmodell__weiter { margin-block-start: auto; }

.ag-stufenmodell__panel-inhalt {
	display: grid;
	grid-template-columns: repeat(var(--ag-stufenmodell-panel-spalten), minmax(0, 1fr));
	gap: var(--spacing-l);
	min-width: 0;
}
.ag-stufenmodell__feld {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
	min-width: 0;
}
.ag-stufenmodell__feld-label {
	margin: 0;
	font-size: var(--ag-copy-s-fs);
	line-height: var(--ag-copy-s-lh);
	font-weight: var(--fw-medium);
	color: var(--ag-stufenmodell-panel-muted);
}
.ag-stufenmodell__feld-copy > :first-child { margin-block-start: 0; }
.ag-stufenmodell__feld-copy > :last-child { margin-block-end: 0; }
.ag-stufenmodell__feld-copy p { margin: 0 0 var(--spacing-s); }
.ag-stufenmodell__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
}
.ag-stufenmodell__liste li {
	display: grid;
	grid-template-columns: 6px minmax(0, 1fr);
	gap: var(--spacing-ms);
	align-items: baseline;
	margin: 0;
	padding: 0;
}
.ag-stufenmodell__liste li::before {
	/* Ring wie die zentrale Listenregel (base.css, Entscheidung Vincent 26.09.2026:
	   „Alle Bullets sind circle"). Farbe = Textfarbe des Panels. */
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 var(--border-width-xs) currentColor;
	transform: translateY(-2px);
}

/* Panel-Wechsel: Inhalt gleitet ein (Motion/expand 550, halbe Reveal-Distanz). */
.ag-stufenmodell__panel.is-wechsel > * {
	animation: ag-stufenmodell-panel-in var(--motion-expand) var(--motion-ease-standard) both;
}
@keyframes ag-stufenmodell-panel-in {
	from { opacity: 0; transform: translateY(calc(var(--motion-distance-reveal) / 2)); }
	to   { opacity: 1; transform: none; }
}

/* ── Unter 1024: Akkordeon oder Wischen ────────────────────────── */
@media (max-width: 1023px) {
	/* Treppe gibt es nur auf dem Desktop */
	.ag-stufenmodell--treppe .ag-stufenmodell__stufe { padding-block-start: 0; }

	.ag-stufenmodell__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--spacing-ml);
		gap: var(--spacing-ml);
	}
	.ag-stufenmodell__panel-inhalt { grid-template-columns: minmax(0, 1fr); }

	/* Akkordeon: Kacheln untereinander als Zeilen, Panel (vom JS in die Zeile
	   gesetzt) klappt direkt unter der gewählten Zeile auf. */
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__leiter {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--spacing-s);
	}
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__stufe { display: block; }
	.ag-stufenmodell--mobil-akkordeon.ag-stufenmodell .ag-stufenmodell__tab {
		display: grid;
		grid-template-columns: var(--ag-stufenmodell-icon) minmax(0, 1fr) 16px;
		grid-template-rows: auto auto;
		column-gap: var(--spacing-m);
		row-gap: 0;
		align-items: center;
		padding: var(--spacing-m) var(--spacing-ml);
		border-radius: var(--radius-m);
	}
	.ag-stufenmodell--mobil-akkordeon.ag-stufenmodell .ag-stufenmodell__tab:hover { transform: none; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__kopf { display: contents; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__icon {
		--ag-stufenmodell-icon: 32px;
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
	}
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__level { grid-column: 2; grid-row: 1; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__grad { grid-column: 2; grid-row: 2; }
	/* Ohne Icon rückt der Text in die erste Spalte */
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__level:first-child { grid-column: 1 / span 2; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__level:first-child + .ag-stufenmodell__grad { grid-column: 1 / span 2; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__fakten { display: none; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__chevron {
		display: block;
		grid-column: 3;
		grid-row: 1 / span 2;
		width: 16px;
		height: 16px;
		color: var(--ag-stufenmodell-karte-muted);
		transition: transform var(--motion-hover) var(--motion-ease-standard);
	}
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__chevron svg { display: block; width: 100%; height: 100%; }
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__tab[aria-selected="true"] .ag-stufenmodell__chevron {
		color: var(--ag-stufenmodell-aktiv-muted);
		transform: rotate(180deg);
	}
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__stufe > .ag-stufenmodell__panel {
		margin-block-start: var(--spacing-s);
		border-radius: var(--radius-m);
	}
	/* Zeiger sitzt unter der Zeile, fest an der linken Kante */
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__stufe > .ag-stufenmodell__panel::before { left: var(--spacing-xl); }
	/* Leerer Slot nimmt keinen Platz */
	.ag-stufenmodell--mobil-akkordeon .ag-stufenmodell__panel-slot:empty { display: none; }

	/* Wischen: Kacheln seitlich, Kanten laufen aus (Muster tabs.css) */
	.ag-stufenmodell--mobil-wischen .ag-stufenmodell__scroll {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-block-end: var(--spacing-s);
		margin-inline: calc(-1 * var(--seitenrand, 0px));
		padding-inline: var(--seitenrand, 0px);
	}
	.ag-stufenmodell--mobil-wischen .ag-stufenmodell__scroll::-webkit-scrollbar { display: none; }
	.ag-stufenmodell--mobil-wischen .ag-stufenmodell__leiter { grid-auto-columns: 200px; }
	.ag-stufenmodell--mobil-wischen .ag-stufenmodell__stufe { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.ag-stufenmodell .ag-stufenmodell__tab,
	.ag-stufenmodell__chevron,
	.ag-stufenmodell__panel.is-wechsel > * {
		transition: none;
		animation: none;
	}
}