/**
 * Roadmap-Modul — Styling auf Basis der Automatic.css-Variablen.
 *
 * Status-Farbsystem: jeder Item bekommt --status-h/s/l gesetzt; Badge,
 * Timeline-Dot und Legenden-Dot leiten ihre Farben daraus ab.
 * Completed (--status-completed-*) ist grün — fix per data-status="completed".
 */

.mth-roadmap {
	--mth-card-pad-block: var(--space-xl);
	--mth-card-pad-inline: var(--space-l);
	--mth-radius: var(--radius-xl);
	--mth-divider: 1px solid hsl(var(--base-h) var(--base-s) var(--base-l) / 0.08);

	/* Status-Farb-Tokens (HSL) */
	--status-in_development-h: 28;
	--status-in_development-s: 92%;
	--status-in_development-l: 55%;

	--status-planned-h: 45;
	--status-planned-s: 95%;
	--status-planned-l: 55%;

	--status-completed-h: 142;
	--status-completed-s: 50%;
	--status-completed-l: 42%;

	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	color: var(--base);
	font-family: var(--body-font-family, inherit);
}

/* Generische Inner-Wrapper-Klasse: zentriert auf Content-Breite */
.mth-roadmap__inner,
.mth-roadmap__header-inner {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter, var(--space-m));
}

/* ─── Header ─────────────────────────────────────────────────────────── */

/* Full-Bleed: bricht aus jedem constrainten Eltern-Container heraus
   (Bricks-Section, .mth-roadmap, etc.) und füllt die volle Viewport-Breite. */
.mth-roadmap__header {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--mth-card-pad-block);
	background: color-mix(in srgb, hsl(var(--status-planned-h) var(--status-planned-s) 92%) 85%, var(--white));
	box-shadow: var(--box-shadow-1, 0 1px 2px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.05));
}

.mth-roadmap__header-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
}

@media (min-width: 768px) {
	.mth-roadmap__header-inner {
		grid-template-columns: 1fr auto;
		align-items: start;
		gap: var(--space-l);
	}
}

.mth-roadmap__kicker {
	margin: 0 0 0.4em;
	font-size: var(--text-s);
	font-weight: 600;
	font-style: italic;
	color: var(--primary);
	letter-spacing: 0.02em;
}

.mth-roadmap__title {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-xxl);
	font-weight: 700;
	line-height: var(--base-heading-lh, 1.15);
	color: var(--base);
}

.mth-roadmap__title-accent {
	color: var(--primary);
}

.mth-roadmap__subtitle {
	margin: 0;
	font-size: var(--text-m);
	color: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.75);
	line-height: 1.5;
}

/* Legende */
.mth-roadmap__legend {
	padding: var(--space-s) var(--space-m);
	background: var(--white);
	border-radius: var(--radius-l);
	box-shadow: var(--box-shadow-1, 0 1px 2px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.06));
	min-width: min(100%, 220px);
}

.mth-roadmap__legend-title {
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--base);
	margin-bottom: var(--space-xs);
	letter-spacing: 0.02em;
}

.mth-roadmap__legend-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.mth-roadmap__legend-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--text-s);
	color: var(--base);
}

.mth-roadmap__legend-item[data-status="in_development"] { --status-h: var(--status-in_development-h); --status-s: var(--status-in_development-s); --status-l: var(--status-in_development-l); }
.mth-roadmap__legend-item[data-status="planned"]        { --status-h: var(--status-planned-h);        --status-s: var(--status-planned-s);        --status-l: var(--status-planned-l);        }
.mth-roadmap__legend-item[data-status="completed"]      { --status-h: var(--status-completed-h);      --status-s: var(--status-completed-s);      --status-l: var(--status-completed-l);      }

.mth-roadmap__dot {
	width: 0.85em;
	height: 0.85em;
	border-radius: var(--radius-circle);
	background: hsl(var(--status-h, var(--primary-h)) var(--status-s, var(--primary-s)) var(--status-l, var(--primary-l)));
	flex-shrink: 0;
}

/* ─── Stats ──────────────────────────────────────────────────────────── */

.mth-roadmap__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-m);
	padding-block: var(--space-m);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter, var(--space-m));
}

@media (min-width: 768px) {
	.mth-roadmap__stats {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-l);
	}
}

.mth-roadmap__stat {
	text-align: center;
}

.mth-roadmap__stat-value {
	font-size: var(--text-xxl);
	font-weight: 800;
	line-height: 1.1;
	color: var(--base);
}

.mth-roadmap__stat:nth-child(1) .mth-roadmap__stat-value,
.mth-roadmap__stat:nth-child(4) .mth-roadmap__stat-value {
	color: hsl(var(--status-in_development-h) var(--status-in_development-s) var(--status-in_development-l));
}
.mth-roadmap__stat:nth-child(3) .mth-roadmap__stat-value { color: var(--primary); }

.mth-roadmap__stat-label {
	margin-top: 0.25em;
	font-size: var(--text-s);
	color: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.7);
}

/* ─── Liste ──────────────────────────────────────────────────────────── */

.mth-roadmap__list {
	list-style: none;
	padding: 0;
	/* margin-top kompensiert den fehlenden Abstand der ausgeblendeten Stats-Reihe.
	   Falls die Stats wieder aktiviert werden, hier auf `margin: 0` zurücksetzen. */
	margin: var(--space-l) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter, var(--space-m));
}

/* Card-Style konsistent mit den Meldungs-Cards im Status-Plugin (mth-status):
   weißer Hintergrund, 2px Border in Status-Farbe (light), 4px Border-Radius. */
.mth-roadmap__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	padding: var(--space-m) var(--space-l);
	border-radius: 4px;
	background: var(--white);
	border: 2px solid hsl(var(--status-h, 0) var(--status-s, 0%) var(--status-l, 50%) / 0.19);
}

/* In Entwicklung = analog „aktiv" im Status-Plugin → getönter Hintergrund. */
.mth-roadmap__item[data-status="in_development"] {
	
}

@media (min-width: 768px) {
	.mth-roadmap__item {
		grid-template-columns: 12rem 1fr;
		gap: var(--space-l);
	}
}

/* Status-Vars pro Item — eine Stelle, alle Kindelemente erben */
.mth-roadmap__item[data-status="in_development"] { --status-h: var(--status-in_development-h); --status-s: var(--status-in_development-s); --status-l: var(--status-in_development-l); }
.mth-roadmap__item[data-status="planned"]        { --status-h: var(--status-planned-h);        --status-s: var(--status-planned-s);        --status-l: var(--status-planned-l);        }
.mth-roadmap__item[data-status="completed"]      { --status-h: var(--status-completed-h);      --status-s: var(--status-completed-s);      --status-l: var(--status-completed-l);      }

/* Timeline-Spalte: Dot, Zeitraum, Badge zentriert untereinander */
.mth-roadmap__timeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.6em;
}

.mth-roadmap__timeline-dot {
	width: 0.85em;
	height: 0.85em;
	border-radius: var(--radius-circle);
	background: hsl(var(--status-h) var(--status-s) var(--status-l));
	box-shadow: 0 0 0 4px hsl(var(--status-h) var(--status-s) var(--status-l) / 0.18);
}

.mth-roadmap__period {
	font-size: var(--text-s);
	font-weight: 700;
	color: var(--base);
	letter-spacing: 0.02em;
}

/* Badge-Style konsistent mit dem Status-Plugin (mth-status):
   kompakt, leicht abgerundet, uppercase, voller Hintergrund in Status-Farbe.
   `--status-h/s/l` werden auf `.mth-roadmap__item[data-status=…]` gesetzt
   und vererben sich automatisch ins Badge. */
.mth-roadmap__badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: hsl(var(--status-h) var(--status-s) var(--status-l));
	color: var(--white);
}

/* Gelbes „Geplant" hat zu wenig Kontrast mit Weiß → schwarzer Text. */
.mth-roadmap__item[data-status="planned"] .mth-roadmap__badge {
	color: var(--white);
}

/* Content-Spalte */
.mth-roadmap__feature-title {
	margin: 0 0 0.4em;
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1.25;
	color: var(--base);
}

.mth-roadmap__description {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-m);
	line-height: 1.55;
	color: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.85);
}

.mth-roadmap__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-s);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.mth-roadmap__bullets li {
	position: relative;
	padding-left: 1.4em;
	font-size: var(--text-m);
	line-height: 1.5;
	color: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.85);
}

.mth-roadmap__bullets li::before {
	content: "›";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--primary);
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1.4;
}

.mth-roadmap__item[data-status="completed"] .mth-roadmap__bullets li::before {
	color: hsl(var(--status-completed-h) var(--status-completed-s) var(--status-completed-l));
}

/* CTA Button */
.mth-roadmap__cta-wrap {
	margin: var(--space-s) 0 0;
}

.mth-roadmap__cta {
	display: inline-block;
	padding: var(--btn-pad-y, 0.7em) var(--btn-pad-x, 1.4em);
	background: var(--primary);
	color: var(--white);
	border-radius: var(--btn-radius, var(--radius-m));
	font-weight: var(--btn-weight, 600);
	font-size: var(--text-s);
	text-decoration: none;
	transition: background 0.15s ease;
}

.mth-roadmap__cta:hover,
.mth-roadmap__cta:focus-visible {
	background: var(--primary-hover);
}

/* ─── Empty / Misc ───────────────────────────────────────────────────── */

.mth-roadmap__empty {
	padding: var(--space-l);
	text-align: center;
	font-size: var(--text-m);
	color: hsl(var(--base-h) var(--base-s) var(--base-l) / 0.6);
	border: 1px dashed hsl(var(--base-h) var(--base-s) var(--base-l) / 0.2);
	border-radius: var(--mth-radius);
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
}