/**
 * corelaw — Typografie für Beitragstexte (single.php).
 *
 * Die Klassen des Designs sind für Sektionen gedacht: zentriert, Versalien,
 * kurze Textmengen. Ein Fachbeitrag braucht das Gegenteil — linksbündig,
 * ruhige Zeilenlänge, gemischte Schreibweise in den Zwischenüberschriften.
 * Deshalb ein eigener Bereich statt Umbiegen der Sektions-Klassen.
 */

.corelaw-article {
	max-width: 74ch;
	margin: 0 auto;
	text-align: left;
	font-size: 16.5px;
	line-height: 1.82;
	letter-spacing: .2px;
	color: var(--grey, #4b5058);
}

.corelaw-article > p,
.corelaw-article > ul,
.corelaw-article > ol,
.corelaw-article > blockquote,
.corelaw-article > figure,
.corelaw-article > table {
	margin: 0 0 22px;
}

/* Anreißer: der erste Absatz trägt den Beitrag */
.corelaw-article > p:first-of-type {
	font-size: 19px;
	line-height: 1.7;
	color: var(--ink, #14161a);
	margin-bottom: 30px;
}

/* Zwischenüberschriften: Schriftfamilie des Designs, aber lesbar gesetzt */
.corelaw-article h2,
.corelaw-article h3,
.corelaw-article h4 {
	text-transform: none;
	letter-spacing: .01em;
	color: var(--ink, #14161a);
	font-weight: 400;
	text-align: left;
}

.corelaw-article h2 {
	font-size: clamp(23px, 2.3vw, 30px);
	line-height: 1.3;
	margin: clamp(40px, 4vw, 58px) 0 14px;
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid rgba(10, 10, 10, .1);
}

.corelaw-article h3 {
	font-size: clamp(19px, 1.9vw, 23px);
	line-height: 1.4;
	margin: 34px 0 10px;
}

.corelaw-article h4 {
	font-size: 17px;
	line-height: 1.45;
	margin: 28px 0 8px;
	font-weight: 600;
}

/* Erste Überschrift ohne Trennlinie — der Artikelkopf steht ja schon darüber */
.corelaw-article > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.corelaw-article strong,
.corelaw-article b {
	color: var(--ink, #14161a);
	font-weight: 600;
}

/* Listen */
.corelaw-article ul,
.corelaw-article ol {
	padding-left: 1.35em;
}

.corelaw-article li {
	margin-bottom: 9px;
}

.corelaw-article ul li::marker {
	color: var(--navy, #1b2a4a);
}

.corelaw-article ol li::marker {
	color: var(--navy, #1b2a4a);
	font-variant-numeric: tabular-nums;
}

/* Zitat — im Design gibt es keine Ausrufezeichen, nur eine ruhige Linie */
.corelaw-article blockquote {
	margin: clamp(30px, 3vw, 40px) 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--navy, #1b2a4a);
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink, #14161a);
}

.corelaw-article blockquote p:last-child {
	margin-bottom: 0;
}

.corelaw-article blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-style: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grey-2, #5b6068);
}

/* Bilder aus dem Editor */
.corelaw-article figure,
.corelaw-article .wp-block-image {
	margin: clamp(32px, 3.4vw, 46px) 0;
}

.corelaw-article img {
	display: block;
	width: 100%;
	height: auto;
}

.corelaw-article figcaption {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--grey-2, #5b6068);
}

/* Breite Bilder dürfen aus der Textspalte ausbrechen */
.corelaw-article .alignwide {
	width: min(100vw - 40px, 1040px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.corelaw-article hr,
.corelaw-article .wp-block-separator {
	border: 0;
	border-top: 1px solid rgba(10, 10, 10, .12);
	margin: clamp(34px, 3.6vw, 48px) 0;
}

/* Tabellen (z. B. Fristenübersichten) */
.corelaw-article table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.corelaw-article th,
.corelaw-article td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(10, 10, 10, .1);
	text-align: left;
	vertical-align: top;
}

.corelaw-article th {
	font-weight: 600;
	color: var(--ink, #14161a);
	letter-spacing: .04em;
}

/* Hinweiskästen: <p class="hinweis">…</p> */
.corelaw-article .hinweis {
	background: var(--paper-2, #f5f4f1);
	padding: 18px 22px;
	font-size: 15px;
	border-left: 2px solid var(--navy, #1b2a4a);
}

@media (max-width: 700px) {
	.corelaw-article {
		font-size: 16px;
	}

	.corelaw-article > p:first-of-type {
		font-size: 17.5px;
	}

	.corelaw-article .alignwide {
		width: auto;
		margin-left: 0;
		transform: none;
	}
}
