/**
 * Atom: Links
 *
 * .link-underline – Unterstrich wächst beim Hover von links ein
 * (Navigation, Footer, Tabs). Farbe bleibt Ink, damit der Kontrast in
 * jedem Zustand erfüllt ist; Coral erscheint nur als Unterstrich.
 */
.link-underline {
	background-image: linear-gradient(var(--theme-accent), var(--theme-accent));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% var(--border-width-medium);
	color: inherit;
	padding-block-end: 0.15em;
	text-decoration: none;
	transition: background-size var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
	.link-underline:hover {
		background-size: 100% var(--border-width-medium);
	}
}

.link-underline:focus-visible,
.link-underline[aria-current="page"],
.link-underline.is-current {
	background-size: 100% var(--border-width-medium);
}

/* Fließtext-Link außerhalb von .prose */
.text-link {
	color: var(--theme-link);
	text-decoration: underline;
	text-decoration-color: var(--theme-link-decoration);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
	.text-link:hover {
		color: var(--theme-link-hover);
	}
}

/*
 * .link-nav – Haupt- und Footer-Navigation: klassischer Farbwechsel zu
 * Coral bei Hover, Tastaturfokus und aktueller Seite.
 */
.link-nav {
	color: var(--theme-nav-link);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
	.link-nav:hover {
		color: var(--theme-nav-link-hover);
	}
}

.link-nav:focus-visible,
.link-nav[aria-current] {
	color: var(--theme-nav-link-hover);
}