/* Anfrage-Assistent – drei nummerierte Einstiegskarten mit Checkliste */
.tr-assistent {
	--as-akzent: var(--wp--preset--color--akzent, #b3141b);
	--as-linie: var(--wp--preset--color--linie, #d9d5d0);
	--as-leise: var(--wp--preset--color--text-leise, #5e5853);
	--as-text: var(--wp--preset--color--text, #231f20);
}

.tr-assistent__ueberschrift {
	max-width: 18ch;
	margin: 0 0 var(--wp--preset--spacing--50, 2.25rem);
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	letter-spacing: -0.03em;
}

.tr-assistent__wege {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-assistent__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: var(--wp--preset--spacing--40, 1.5rem);
	padding-block-end: calc(var(--wp--preset--spacing--40, 1.5rem) + 2.5rem);
	background: var(--wp--preset--color--flaeche, #fff);
	border: var(--wp--custom--linie--fein, 1px) solid var(--wp--preset--color--linie-stark, #8c8580);
	border-block-start: 4px solid var(--as-text);
	border-radius: var(--wp--custom--radius--klein, 2px);
	transition: border-color var(--wp--custom--bewegung--dauer, 180ms) var(--wp--custom--bewegung--kurve, ease),
		background-color var(--wp--custom--bewegung--dauer, 180ms) var(--wp--custom--bewegung--kurve, ease);
}

.tr-assistent__karte:hover,
.tr-assistent__karte:focus-within {
	background: var(--wp--preset--color--flaeche-alt, #f4f3f1);
	border-block-start-color: var(--as-akzent);
}

.tr-assistent__karte:has(.tr-assistent__link:focus-visible) {
	outline: 3px solid var(--as-akzent);
	outline-offset: 2px;
}

/* Die drei Wege sind Alternativen, keine Reihenfolge – daher keine sichtbare Nummer */
.tr-assistent__nr {
	display: none;
}

.tr-assistent__titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--gross, 1.375rem);
	line-height: 1.2;
}

.tr-assistent__link {
	color: var(--as-text);
	text-decoration: none;
}

/* Gesamte Karte klickbar; der zugängliche Name bleibt der Titel */
.tr-assistent__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tr-assistent__link:hover,
.tr-assistent__link:focus-visible {
	color: var(--as-akzent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	outline: none;
}

.tr-assistent__text {
	margin: 0;
}

.tr-assistent__bereit {
	margin: 0.5rem 0 0;
	padding-block-start: 0.625rem;
	font-size: var(--wp--preset--font-size--klein, 0.875rem);
	font-weight: 600;
	color: var(--as-leise);
	border-block-start: var(--wp--custom--linie--fein, 1px) solid var(--as-linie);
}

.tr-assistent__checkliste {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--klein, 0.9375rem);
}

.tr-assistent__checkliste li {
	position: relative;
	padding-inline-start: 1.5rem;
}

.tr-assistent__checkliste li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.125rem;
	inset-block-start: 0.45em;
	width: 0.75rem;
	height: 0.375rem;
	/* Häkchen: physische Rahmen, damit es in RTL nicht zum Winkel wird; alle drei Angaben überschreiben
	   die Grundregel .tr-checkliste (sonst entsteht ein dritter Strich) */
	border-style: solid;
	border-color: var(--as-akzent);
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

.tr-assistent__pfeil {
	position: absolute;
	inset-inline-end: var(--wp--preset--spacing--40, 1.5rem);
	inset-block-end: var(--wp--preset--spacing--30, 1rem);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--as-akzent);
	transition: transform var(--wp--custom--bewegung--dauer, 180ms) var(--wp--custom--bewegung--kurve, ease);
}

.tr-assistent__karte:hover .tr-assistent__pfeil,
.tr-assistent__karte:focus-within .tr-assistent__pfeil {
	transform: translateX(0.25rem);
}

.tr-assistent__hinweis {
	margin: var(--wp--preset--spacing--30, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--klein, 0.9375rem);
	color: var(--as-leise);
}

@media (prefers-reduced-motion: reduce) {
	.tr-assistent__karte,
	.tr-assistent__pfeil {
		transition: none;
	}
}