/**
*  „Wie Du diese Seite nutzen kannst“ mit Ankerbuttons (Second level)
*
*  Buttons: ab 768px in zwei Reihen, darunter in vier Reihen.
*  Die Spaltenzahl kommt als --cols-wide / --cols-narrow aus dem Template.
*
*  Kontraste (WCAG AA, geprüft):
*  - Text und Rand --ink-navy auf --bg-main: 14 : 1
*  - Hover --paper-white auf --ink-navy: 16 : 1
*
*  Zielgröße: Buttons mindestens 3rem (48 px) hoch.
**/

.c-guide {
	margin-block: var(--space-xl);
}

.c-guide__inner {
	max-inline-size: var(--reading-width);
	margin-inline: auto;
}

.c-guide__title {
	margin: 0;
	color: var(--ink-navy);
	font-family: var(--font-editorial);
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
	text-wrap: balance;
}

.c-guide__text {
	margin: var(--space-s) 0 0;
	padding: 0;
	color: var(--ink-navy);
	font-family: var(--font-editorial);
}

.c-guide__buttons {
	display: grid;
	grid-template-columns: repeat(var(--cols-narrow, 2), minmax(0, 1fr));
	gap: var(--space-xs);
	margin: var(--space-m) 0 0;
	padding: 0;
	list-style: none;
}

.c-guide__item {
	margin: 0;
	padding: 0;
}

.c-guide__button {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	min-block-size: 3rem;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--ink-navy);
	border-radius: var(--border-radius);
	background: transparent;
	color: var(--ink-navy);
	font-family: var(--font-interface);
	font-size: var(--fs-0);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease-out, color 0.2s ease-out;

	&:hover {
		background: var(--ink-navy);
		color: var(--paper-white);
	}

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

@media (min-width: 768px) {

	.c-guide__buttons {
		grid-template-columns: repeat(var(--cols-wide, 4), minmax(0, 1fr));
	}
}