/**
*  Vertiefung auf der Magazinseite
*
*  Kontraste (WCAG AA, geprüft):
*  - Button --paper-white auf --warm-2: 4,6 : 1
*  - Text   --cool-1 auf --paper: 12 : 1
**/

.c-outro {
	padding-block: var(--space-l);
	background: var(--paper);
	border-block: 1px solid var(--paper-line);
}

.c-outro__inner {
	display: grid;
	gap: var(--space-s);
	justify-items: start;
	max-inline-size: var(--reading-width);
}

.c-outro__text {
	margin: 0;
	padding: 0;
	color: var(--cool-1);
	font-family: var(--font-editorial);
}

.c-outro__button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 1.2em;
	border-radius: var(--border-radius);
	background: var(--warm-2);
	color: var(--paper-white);
	font-family: var(--font-interface);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.3s ease-out;

	&::after {
		content: "→";
		content: "→" / "";
	}

	&:hover {
		background: var(--warm-3);
	}

	&:focus-visible {
		outline: 3px solid var(--cool-1);
		outline-offset: 3px;
	}
}