/*
 * Single Ratgeber guide — magazine reading layout (template: single-ratgeber.php).
 *
 * Design system: Brauer display headings, IBM Plex body, JetBrains mono labels,
 * sharp corners, yellow accent — consistent with the Ratgeber listing (ratgeber.css).
 *
 * Width model: the article column is --rgs-wide; running text + headings sit in a
 * narrower --rgs-col reading column centered inside it, while the hero and
 * image-only blocks break out to the full --rgs-wide for rhythm.
 */

/* ---------- reading-progress bar (brand yellow, NZZ-style) ---------- */
.sisa-rgs-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 190; /* above the (non-sticky) header, below the mobile drawer (200) */
	background: transparent;
	pointer-events: none;
}
.sisa-rgs-progress__bar {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--sisa-yellow, #f4d435);
	transition: transform .08s linear;
	will-change: transform;
}

.sisa-rgs {
	--rgs-wide: 880px;
	--rgs-col: 720px;
	width: var(--theme-container-edge-spacing, 90vw);
	max-width: var(--rgs-wide);
	margin-inline: auto;
	padding: 28px 0 80px;
	font-family: var(--sisa-body, "IBM Plex Sans", sans-serif);
	color: var(--sisa-ink, #1a1a1a);
}

/* Blocksy assumes a hero adds top spacing; we render none, so give the bare main a little air. */
.single-ratgeber #main { padding-top: 8px; }

/* ---------- breadcrumb (mirrors the listing) ---------- */
.sisa-rgs-bc {
	max-width: var(--rgs-col);
	margin: 0 auto 24px;
	font-family: var(--sisa-mono, monospace);
	font-size: 12px;
	letter-spacing: .4px;
	color: var(--sisa-text-2, #676562);
}
.sisa-rgs-bc a { color: var(--sisa-text-2, #676562); text-decoration: none; }
.sisa-rgs-bc a:hover { color: var(--sisa-ink, #1a1a1a); }
.sisa-rgs-bc span[aria-hidden] { margin: 0 8px; }
.sisa-rgs-bc > span:last-child { color: var(--sisa-ink, #1a1a1a); }

/* ---------- head (kicker + title) ---------- */
.sisa-rgs-head { max-width: var(--rgs-col); margin: 0 auto; }
.sisa-rgs-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	font-family: var(--sisa-mono, monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sisa-text-2, #676562);
}
.sisa-rgs-dot { width: 3px; height: 3px; background: var(--sisa-text-3, #a8a6a0); border-radius: 50%; }
.sisa-rgs-date { color: var(--sisa-text-2, #676562); }

.sisa-rgs-title {
	margin: 0;
	font-family: var(--sisa-display, "Brauer LL", serif);
	font-weight: 700;
	font-size: clamp(30px, 4.6vw, 48px);
	line-height: 1.05;
	letter-spacing: -.8px;
	color: var(--sisa-ink, #1a1a1a);
}

/* ---------- hero image (full column width) ---------- */
.sisa-rgs-hero { margin: 32px 0 8px; }
.sisa-rgs-hero img { display: block; width: 100%; height: auto; }

/* ---------- body (reading column) ---------- */
.sisa-rgs-body {
	margin-top: 36px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--sisa-text-1, #3f3d3a);
}
/* default: every direct child sits in the narrow reading column … */
.sisa-rgs-body > * { max-width: var(--rgs-col); margin-inline: auto; }
/* … except media, which breaks out to the full article width */
.sisa-rgs-body > figure,
.sisa-rgs-body > .wp-block-image,
.sisa-rgs-body > p:has(> img),
.sisa-rgs-body > p:has(> a > img) { max-width: 100%; }

.sisa-rgs-body p { margin: 0 auto 1.4em; }
/* lead-in: first paragraph reads larger */
.sisa-rgs-body > p:first-of-type {
	font-size: 20px;
	line-height: 1.6;
	color: var(--sisa-ink, #1a1a1a);
	margin-bottom: 1.5em;
}

.sisa-rgs-body h2 {
	font-family: var(--sisa-display, "Brauer LL", serif);
	font-weight: 700;
	font-size: clamp(24px, 3.2vw, 30px);
	line-height: 1.2;
	letter-spacing: -.4px;
	color: var(--sisa-ink, #1a1a1a);
	margin: 2.2em auto .6em;
}
.sisa-rgs-body h3 {
	font-family: var(--sisa-display, "Brauer LL", serif);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.25;
	color: var(--sisa-ink, #1a1a1a);
	margin: 1.8em auto .5em;
}

.sisa-rgs-body ul,
.sisa-rgs-body ol { margin: 0 auto 1.4em; padding-left: 1.25em; }
.sisa-rgs-body li { margin-bottom: .55em; padding-left: .15em; }
.sisa-rgs-body li::marker { color: var(--sisa-text-3, #a8a6a0); }

.sisa-rgs-body strong { font-weight: 600; color: var(--sisa-ink, #1a1a1a); }
.sisa-rgs-body a {
	color: var(--sisa-ink, #1a1a1a);
	text-decoration: underline;
	text-decoration-color: var(--sisa-yellow, #f4d435);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.sisa-rgs-body a:hover { text-decoration-color: var(--sisa-ink, #1a1a1a); }

.sisa-rgs-body img {
	display: block;
	width: 100%;
	height: auto;
	margin: 2.2em auto;
}
.sisa-rgs-body blockquote {
	margin: 1.8em auto;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--sisa-yellow, #f4d435);
	font-size: 19px;
	line-height: 1.6;
	color: var(--sisa-ink, #1a1a1a);
}
.sisa-rgs-body table { width: 100%; border-collapse: collapse; margin: 1.6em auto; font-size: 15px; }
.sisa-rgs-body th, .sisa-rgs-body td { border: 1px solid var(--sisa-hairline, #eceae3); padding: 10px 12px; text-align: left; }

/* ---------- "In eigener Sache" — editable neutrality note ---------- */
/* Quiet bordered aside in the reading column, closing the article before the
   CTA pair. Yellow left accent (echoes the tab underline), mono kicker. */
.sisa-rgs-disclaimer {
	max-width: var(--rgs-col);
	margin: 3em auto 0;
	padding: 20px 24px;
	border: 1px solid var(--sisa-hairline, #eceae3);
	border-left: 3px solid var(--sisa-yellow, #f4d435);
	background: var(--sisa-panel, #fff);
}
.sisa-rgs-disclaimer__k {
	font-family: var(--sisa-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--sisa-text-2, #676562);
	margin: 0 0 10px;
}
.sisa-rgs-disclaimer__p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--sisa-text-2, #676562);
	margin: 0;
}

/* ---------- end CTA ---------- */
.sisa-rgs-cta { width: var(--theme-container-edge-spacing, 90vw); max-width: var(--sisa-container, 1360px); margin: 8px auto 32px; }

/* ---------- mobile ---------- */
@media (max-width: 1023px) {
	.sisa-rgs { width: 100%; padding-inline: var(--sisa-pad); }
	.sisa-rgs-cta { width: 100%; padding-inline: var(--sisa-pad); }
}
@media (max-width: 640px) {
	.sisa-rgs { padding-top: 20px; }
	.sisa-rgs-body { font-size: 16px; }
	.sisa-rgs-body > p:first-of-type { font-size: 18px; }
}