/*
 * JoNa | Software – Legal Pages /impressum/ + /datenschutz/ (WS-11)
 * ---------------------------------------------------------------
 * Ruhige, gut lesbare Rechtstext-Seiten in der JoNa-Designsprache.
 * Es wird AUSSCHLIESSLICH die Darstellung formatiert – der juristische Inhalt
 * kommt unverändert aus dem offiziellen eRecht24-Legal-Texts-Shortcode.
 *
 * Nur auf /impressum/ und /datenschutz/ geladen (siehe functions.php).
 *
 * Verantwortung:
 *   - design-system.css = Tokens (--jona-*), Referenz.
 *   - page-legal.css    = Layout/Styling dieser beiden Seiten.
 *
 * Breakpoints FEST geschrieben (kein var() in @media):
 *   Mobile max-width: 689px · Tablet 690–999px · Desktop >= 1000px
 *
 * Version: 1.0.0 (WS-11)
 */

/* ------------------------------------------------------------------
 * H1-Eindeutigkeit: Der eigene Hero trägt die H1, der Blocksy-Seitentitel
 * wird nur auf den Legal Pages ausgeblendet (nicht global).
 */
body.jona-legal-page .entry-header {
	display: none;
}

/* ------------------------------------------------------------------
 * Hero (reduziert, ohne Marketing)
 */
.jona-legal-hero {
	padding-block: var(--jona-space-8) var(--jona-space-6);
	background: linear-gradient(180deg, var(--jona-color-subtle-blue) 0%, var(--jona-color-bg) 82%);
}

.jona-legal-hero__inner {
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
}

/* Eyebrow-Basis mitbringen (unabhängig von anderen Sektions-Stylesheets). */
.jona-legal-hero .jona-section-eyebrow {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jona-color-accent-strong);
	margin-block: 0 var(--jona-space-3);
}

.jona-legal-hero__title {
	max-width: 28ch;
	margin-block: 0;
	color: var(--jona-color-brand-blue);
	/* Lange Wörter/Überschriften sauber umbrechen, kein Overflow. */
	overflow-wrap: anywhere;
}

.jona-legal-hero__lead {
	max-width: 62ch;
	margin: var(--jona-space-4) 0 0;
	font-size: var(--jona-font-size-lg);
	line-height: var(--jona-line-height-base);
	color: var(--jona-color-text-secondary);
}

/* ------------------------------------------------------------------
 * Inhaltsbereich (komfortable Lesebreite ~860 px)
 */
.jona-legal-content {
	padding-block: var(--jona-space-6) var(--jona-space-section-gap-lg);
}

.jona-legal-content__inner {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
	color: var(--jona-color-ink);
}

/* ------------------------------------------------------------------
 * Typografie des eRecht24-Outputs
 *
 * Bewusst defensiv: Es wird nicht vorausgesetzt, dass der Rechtstext immer
 * exakt dieselben Elemente/Reihenfolgen besitzt. Die Hierarchie (h2 > h3 > h4)
 * bleibt optisch klar unterscheidbar.
 */
.jona-legal-content__inner > *:first-child {
	margin-top: 0;
}

.jona-legal-content__inner h2,
.jona-legal-content__inner h3,
.jona-legal-content__inner h4 {
	color: var(--jona-color-brand-blue);
	line-height: var(--jona-line-height-tight);
	letter-spacing: var(--jona-letter-spacing-tight);
	overflow-wrap: anywhere;
}

.jona-legal-content__inner h2 {
	margin: var(--jona-space-7) 0 var(--jona-space-4);
	padding-bottom: var(--jona-space-3);
	border-bottom: var(--jona-border-width) solid var(--jona-color-border);
	font-size: var(--jona-font-size-2xl);
}

.jona-legal-content__inner h3 {
	margin: var(--jona-space-6) 0 var(--jona-space-3);
	font-size: var(--jona-font-size-xl);
}

.jona-legal-content__inner h4 {
	margin: var(--jona-space-5) 0 var(--jona-space-2);
	font-size: var(--jona-font-size-lg);
	color: var(--jona-color-ink);
}

.jona-legal-content__inner p {
	margin: 0 0 var(--jona-space-4);
	line-height: var(--jona-line-height-base);
	overflow-wrap: anywhere;
}

.jona-legal-content__inner ul,
.jona-legal-content__inner ol {
	margin: 0 0 var(--jona-space-4);
	padding-left: 1.3em;
}

.jona-legal-content__inner li {
	margin-bottom: var(--jona-space-2);
	line-height: var(--jona-line-height-base);
	overflow-wrap: anywhere;
}

.jona-legal-content__inner strong,
.jona-legal-content__inner b {
	font-weight: var(--jona-font-weight-semibold);
	color: var(--jona-color-ink);
}

/* Längere Großbuchstaben-Passagen (DSGVO) nicht künstlich vergrößern –
 * normale Größe, komfortable Zeilenhöhe. */
.jona-legal-content__inner p,
.jona-legal-content__inner li {
	font-size: var(--jona-font-size-base);
}

/* ------------------------------------------------------------------
 * Links: klar erkennbar (nicht nur über Farbe), lange URLs umbrechbar.
 */
.jona-legal-content__inner a {
	color: var(--jona-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.jona-legal-content__inner a:hover,
.jona-legal-content__inner a:focus-visible {
	color: var(--jona-color-link-hover);
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------
 * Tabellen (falls eRecht24 sie liefert): sauber lesbar; auf schmalen
 * Viewports horizontal scrollbar statt die Seite zu sprengen.
 */
.jona-legal-content__inner table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--jona-space-5);
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--jona-font-size-sm);
}

.jona-legal-content__inner th,
.jona-legal-content__inner td {
	padding: var(--jona-space-3) var(--jona-space-4);
	border: var(--jona-border-width) solid var(--jona-color-border);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.jona-legal-content__inner th {
	background-color: var(--jona-color-bg-muted);
	color: var(--jona-color-brand-blue);
	font-weight: var(--jona-font-weight-semibold);
}

/* ------------------------------------------------------------------
 * Zitate / Trennlinien / Bilder
 */
.jona-legal-content__inner blockquote {
	margin: 0 0 var(--jona-space-5);
	padding: var(--jona-space-4) var(--jona-space-5);
	border-left: 3px solid var(--jona-color-accent);
	background-color: var(--jona-color-bg-muted);
	color: var(--jona-color-text-secondary);
}

.jona-legal-content__inner blockquote p:last-child {
	margin-bottom: 0;
}

.jona-legal-content__inner hr {
	margin: var(--jona-space-6) 0;
	border: 0;
	border-top: var(--jona-border-width) solid var(--jona-color-border);
}

.jona-legal-content__inner img {
	max-width: 100%;
	height: auto;
}

/* Leerzustand vor API-Synchronisation: reiner Shortcode-Platzhalter bleibt
 * unauffällig – die Seite wirkt nicht defekt. */
.jona-legal-content__inner:empty::after {
	content: "";
	display: block;
}

/* ------------------------------------------------------------------
 * Responsive
 */
@media (max-width: 999px) {
	.jona-legal-hero {
		padding-block: var(--jona-space-7) var(--jona-space-5);
	}
	.jona-legal-content {
		padding-block: var(--jona-space-5) var(--jona-space-7);
	}
}

@media (max-width: 689px) {
	.jona-legal-hero__inner,
	.jona-legal-content__inner {
		padding-inline: var(--jona-space-gutter-sm);
	}
	.jona-legal-content__inner h2 {
		margin-top: var(--jona-space-6);
	}
	/* Genügend Lesepadding, einspaltig, keine Mini-Schrift. */
	.jona-legal-content {
		padding-block: var(--jona-space-5) var(--jona-space-6);
	}
}

/* ------------------------------------------------------------------
 * Print (optional, klein): Header/Footer/CTA beim Drucken ausblenden,
 * Rechtstext auf volle Breite in Schwarz.
 */
@media print {
	body.jona-legal-page #header,
	body.jona-legal-page .jona-footer,
	body.jona-legal-page .jcf,
	body.jona-legal-page .jona-final-cta {
		display: none !important;
	}
	body.jona-legal-page .jona-legal-hero,
	body.jona-legal-page .jona-legal-content {
		padding: 0;
		background: none;
	}
	body.jona-legal-page .jona-legal-content__inner {
		max-width: none;
		padding: 0;
	}
	body.jona-legal-page,
	body.jona-legal-page .jona-legal-content__inner h2,
	body.jona-legal-page .jona-legal-content__inner h3,
	body.jona-legal-page .jona-legal-content__inner h4 {
		color: #000 !important;
	}
}