/**
*  Inhaltsverzeichnis
*
*  Nummern --warm-3 auf --paper: 5,4 : 1 (WCAG AA).
**/

.c-toc {
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--paper-line);
	border-radius: 0.35rem;
	background: var(--paper);
}

.c-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	margin: 0;
	cursor: pointer;
	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}

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

	/* Pfeil, nur wo das Verzeichnis einklappbar sein soll */
	&::after {
		content: "";
		inline-size: 0.6rem;
		block-size: 0.6rem;
		border-inline-end: 2px solid var(--cool-1);
		border-block-end: 2px solid var(--cool-1);
		transform: rotate(45deg);
		transition: transform 0.2s ease-out;
	}
}

.c-toc[open] > .c-toc__summary::after {
	transform: rotate(-135deg);
}

.c-toc[open] > .c-toc__summary {
	margin-block-end: var(--space-xs);
}

.c-toc__title {
	color: var(--cool-1);
	font-family: var(--font-editorial);
	font-size: var(--fs-0);
	font-weight: 700;
}

@media (min-width: 992px) {

	/* Auf dem Desktop ist das Verzeichnis dauerhaft sichtbar. */
	.c-toc__summary {
		cursor: default;
		pointer-events: none;

		&::after {
			display: none;
		}
	}
}

.c-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.c-toc__item {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	margin: 0;
	padding: var(--space-3xs) 0;
	counter-increment: toc;
	font-family: var(--font-interface);
	font-size: var(--fs--1);
	line-height: var(--lh--1);

	&::before {
		content: counter(toc);
		color: var(--warm-3);
		font-weight: 700;
	}
}

.c-toc__link {
	color: var(--cool-1);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}