/**
 * Artikel-Rubrik (Blog-Posts, z.B. "Cases + Gossip").
 *
 * Editoriales Modul-System im isarcode-Look. Breiten/Spacing kommen aus den
 * zentralen Tokens (isrcd-tokens.css): --isrcd-text-max / --isrcd-text-rail /
 * --isrcd-module-max / --page-padding. Farben/Fonts ueber Theme-Variablen
 * (Dark/Light-Mode). Geladen auf is_singular('post'), im Glossar (is_singular('glossar'))
 * und auf der Glossar-Uebersicht: die Begriffs-Seiten teilen sich die Artikel-Typografie
 * und ergaenzen sie unten nur um die isrcd-glossar__*-Bloecke.
 *
 * Layout: Sektion volle Breite (--page-padding-Rand wie Header/Page-Templates).
 * Fliesstext eingerueckt in lesbarer Spalte (--isrcd-text-max) mit Marker-Rail.
 * Breite Module (Stat, Bento) und eingebettete ACF-Sektionen (Formular)
 * laufen ueber die volle Breite mit eigener Ausrichtung.
 */

.isrcd-article {
	color: rgb(var(--primary-color));
}

.isrcd-article__inner {
	max-width: none;
	margin: 0;
	padding: clamp(2.5rem, 6vw, 5rem) var(--page-padding) clamp(3rem, 8vw, 6rem);
}

/* Gemeinsame eingerueckte Textspalte (Kopf + Fliesstext + schmale Module) */
.isrcd-article__header,
.isrcd-article__body > p,
.isrcd-article__body > h2,
.isrcd-article__body > h3,
.isrcd-article__body > ul,
.isrcd-article__body > ol,
.isrcd-article__body > blockquote,
.isrcd-article__body > .isrcd-tldr,
.isrcd-article__body > .isrcd-infobox {
	margin-left: var(--isrcd-text-rail);
	max-width: var(--isrcd-text-max);
}

/* ============================ Kopf ============================ */
.isrcd-article__header {
	margin-bottom: var(--isrcd-space-xl);
}

.isrcd-article__eyebrow {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	margin: 0 0 1.2rem;
}
.isrcd-article__eyebrow a { color: rgb(var(--primary-color)); text-decoration: none; }

.isrcd-article__title {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-h);
	text-transform: none;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	line-height: 1.06;
	margin: 0 0 1.1rem;
}

.isrcd-article__meta { font-size: 0.85rem; opacity: 0.55; margin: 0; }

/* ===================== Fliesstext (eingerueckt) ===================== */
.isrcd-article__body {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight);
	font-size: 1.18rem;
	line-height: 1.72;
}

.isrcd-article__body > * + * { margin-top: 1.45em; }

.isrcd-article__body h2 {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-h);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.14;
	margin-top: 2.6em;
	margin-bottom: 0;
	position: relative;
}
.isrcd-article__body h2::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--isrcd-text-rail));
	top: 0.18em;
	width: 2px;
	height: 1.25em;
	background: rgb(var(--primary-color));
}

.isrcd-article__body h3 {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-h);
	font-size: 1.32rem;
	line-height: 1.25;
	margin-top: 1.8em;
}

.isrcd-article__body p { margin-bottom: 0; }

.isrcd-article__body a {
	color: rgb(var(--primary-color));
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}
.isrcd-article__body a:hover { text-decoration-thickness: 2px; }

.isrcd-article__body ul,
.isrcd-article__body ol { padding-left: 1.3em; }
.isrcd-article__body li + li { margin-top: 0.5em; }
.isrcd-article__body strong { font-weight: var(--font-prime-weight-bold); }

.isrcd-article__body hr {
	border: 0;
	border-top: 1px solid rgba(var(--primary-color), 0.18);
	margin: 3em 0;
}

/* ===================== Redaktions-Module (TL;DR, Infobox, Stat, Bento) =====================
   Intrinsisches Aussehen lebt jetzt in den jeweiligen Block-CSS (__blocks/module-*.css),
   die per ACF-Block enqueued werden. Hier nur noch der Artikel-Kontext (Einrueckung der
   schmalen Module in die Textspalte, siehe gemeinsame Regel oben). Breite Module (Stat,
   Bento) bringen ihre max-width selbst mit und laufen ausserhalb der Textspalte. */

/* ===================== Eingebettete ACF-Sektionen (z.B. Kontaktformular) =====================
   Volle Breite, eigene Ausrichtung; NICHT in die Textspalte einruecken. */
.isrcd-article__body > .section,
.isrcd-article__body > [class*="section__"] {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	margin-top: var(--isrcd-space-xl);
}

/* ===================== responsive ===================== */
@media (max-width: 700px) {
	.isrcd-article { --isrcd-text-rail: 0rem; }
	.isrcd-article__body { font-size: 1.08rem; }
	.isrcd-article__body h2::before { display: none; }
}

/* ===================== Glossar =====================
   Begriffs-Seiten (single-glossar.php) und Uebersicht (archive-glossar.php).
   Erben Kopf/Fliesstext aus .isrcd-article, ergaenzen nur Nachbar-Navigation
   und die A-Z-Liste. Beides sitzt in derselben Textspalte wie der Fliesstext. */

/* Vor/Zurueck zwischen Begriffen (alphabetisch, nicht chronologisch) */
.isrcd-glossar__nav {
	margin-left: var(--isrcd-text-rail);
	max-width: var(--isrcd-text-max);
	margin-top: var(--isrcd-space-xl);
	padding-top: 1.6rem;
	border-top: 1px solid rgba(var(--primary-color), 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
}

.isrcd-glossar__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: rgb(var(--primary-color));
	max-width: 48%;
}

.isrcd-glossar__nav-link--next {
	text-align: right;
	margin-left: auto;
}

.isrcd-glossar__nav-label {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	opacity: 0.6;
}

.isrcd-glossar__nav-term {
	font-weight: var(--font-prime-weight-h);
	font-size: 1.1rem;
}

.isrcd-glossar__nav-link:hover .isrcd-glossar__nav-term,
.isrcd-glossar__nav-link:focus-visible .isrcd-glossar__nav-term {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* A-Z-Uebersicht (/glossar/) */
.isrcd-glossar__list {
	margin-left: var(--isrcd-text-rail);
	max-width: var(--isrcd-text-max);
}

.isrcd-glossar__group + .isrcd-glossar__group {
	margin-top: var(--isrcd-space-xl);
}

.isrcd-glossar__letter {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-bold);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.5;
	margin: 0 0 0.8rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(var(--primary-color), 0.15);
}

.isrcd-glossar__terms {
	list-style: none;
	margin: 0;
	padding: 0;
}

.isrcd-glossar__item + .isrcd-glossar__item {
	margin-top: 0.5rem;
}

.isrcd-glossar__term-link {
	font-size: 1.15rem;
	font-weight: var(--font-prime-weight-h);
	color: rgb(var(--primary-color));
	text-decoration: none;
}

.isrcd-glossar__term-link:hover,
.isrcd-glossar__term-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 700px) {
	.isrcd-glossar__nav {
		flex-direction: column;
	}
	.isrcd-glossar__nav-link,
	.isrcd-glossar__nav-link--next {
		max-width: none;
		text-align: left;
		margin-left: 0;
	}
}