/**
*  Artikelseite: Layout und Lesetypografie
*
*  Ab 992px: Inhalt links, Seitenleiste rechts.
**/

.c-single {
	background: var(--paper-white);
}

.c-single__layout {
	display: grid;
	gap: var(--space-xl);
	padding-block: var(--space-xl);
}

.c-single__aside {
	display: grid;
	gap: var(--space-l);
	align-content: start;
	min-inline-size: 0;
}

.c-article-body {
	min-inline-size: 0;
	max-inline-size: var(--reading-width);
	font-family: var(--font-editorial);

	& h2,
	& h3,
	& h4 {
		margin-block: var(--space-l) var(--space-xs);
		color: var(--cool-1);
		font-family: var(--font-editorial);
		font-weight: 700;
		letter-spacing: var(--ls-h2);
		scroll-margin-block-start: var(--space-l);
		text-wrap: balance;
	}

	& h2 {
		font-size: var(--fs-h2);
		line-height: var(--lh-h2);
	}

	& h3 {
		font-size: var(--fs-h3);
		line-height: var(--lh-h3);
	}

	& h2:first-child,
	& h3:first-child {
		margin-block-start: 0;
	}

	& blockquote {
		margin-block: var(--space-m);
		padding: var(--space-2xs) var(--space-s);
		border-inline-start: 0.25rem solid var(--fresh);
		color: var(--cool-1);
		font-family: var(--font-editorial);
		font-size: var(--fs-quote);
		font-style: italic;
		line-height: var(--lh-quote);
	}

	& ul {
		list-style: disc;

		& li::marker {
			color: var(--fresh);
		}
	}

	& img {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
		border-radius: 0.25rem;
	}
}

@media (min-width: 992px) {

	.c-single__layout {
		grid-template-columns: minmax(0, 46rem) minmax(16rem, 20rem);
		justify-content: space-between;
		align-items: start;
	}
}