/**
 * Legal pages (page-templates/rechtliches.php, D-027): Impressum and later
 * the Datenschutzerklärung. Loaded only there.
 *
 * Considerably calmer than the content pages: cream, no photo, no glass,
 * no cards. Orange only as the eyebrow; a readable column with Georgia
 * section headings over fine hairlines. Styles only what the block editor
 * outputs (paragraphs, headings, lists, links, strong).
 */

.legal-page__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* ---------- Head ---------- */

/* The frosted header floats over the page: its height is added on top. */
.legal-page__head {
	padding-block: calc(var(--site-header-height) + clamp(48px, 7vw, 96px)) clamp(32px, 4vw, 48px);
}

.legal-page__title {
	margin-bottom: 0;
	/* Long single-word titles break only at a soft hyphen set in the title
	   ("Datenschutz­erklärung", as in the eRecht24 source) — a hard break
	   only as a last resort, never overflow. */
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}

/* Small orange text needs the darker accent for 4.5:1 on cream. */
.legal-page .page-intro__eyebrow {
	color: var(--color-accent-text);
}

.legal-page__subtitle {
	max-width: 60ch;
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* ---------- Content ---------- */

/* One readable column, opened by a fine hairline under the head. */
.legal-content {
	max-width: 62ch;
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(64px, 8vw, 128px);
	border-top: 1px solid var(--color-rule);
}

/* Typography comes from the shared .prose (components.css); legal pages
   add a fine hairline over each section heading. */
.legal-content h2 {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-rule);
}

/* Jump targets: the header is already cleared globally (scroll-padding on
   html, layout.css); this only adds a little air above the heading. */
.legal-content h2,
.legal-content h3 {
	scroll-margin-top: var(--space-5);
}

/* ---------- Table of contents (long texts, D-028) ---------- */

/* Navigation above the text, generated from its H2s — not legal wording. */
.legal-toc {
	margin: 0 0 var(--space-7);
}

/* Scoped like the content rules they must override (p/ol margins). */
.legal-content .legal-toc__label {
	margin: 0 0 var(--space-3);
}

.legal-content .legal-toc__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-content .legal-toc__list li + li {
	margin-top: 0;
}

.legal-content .legal-toc__list a {
	font-size: 0.9375rem;
	line-height: 1.5;
}