/*
 * Ratgeber (/ratgeber/ und /ratgeber/<thema>/), 2.39.0.
 * Nur auf diesen Seiten geladen (inc/ratgeber.php, nk_rg_styles()).
 * Regeln aus DESIGN.md: Text aus der Tinte-Skala, Lesetext ≤ 68ch, Gliederung
 * über 1-px-Linien statt Karten, keine Versal-Eyebrows, keine Seitenstreifen,
 * Bewegung nur als Transform und unter prefers-reduced-motion aus.
 */

.rg { padding-bottom: 0; }
.rg-schmal { max-width: calc(760px + 48px); }

/* ---------- Kopf ---------- */
.rg-kopf { padding: 28px 0 40px; }
.rg-kopf h1 {
	font-size: clamp(1.75rem, 3.8vw, 2.75rem);
	line-height: 1.15;
	text-wrap: balance;
	max-width: 24ch;
	margin-bottom: 24px;
}
.rg-lead {
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--ink-2);
	max-width: 60ch;
}

.rg-kurz {
	border-top: 1px solid var(--bg-line);
	border-bottom: 1px solid var(--bg-line);
	padding: 18px 0 20px;
	margin-bottom: 18px;
	max-width: 68ch;
}
.rg-kurz-label {
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink-mute);
	margin-bottom: 6px;
}
.rg-kurz-text {
	font-size: 1.12rem;
	line-height: 1.7;
	font-weight: 600;
	color: var(--ink);
}
.rg-meta {
	font-size: .86rem;
	line-height: 1.5;
	color: var(--ink-mute);
}
.rg-meta a,
.rg-text a,
.rg-seite a,
.rg-index a,
.rg-weitere a,
.rg-autor a {
	color: var(--wd-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rg-meta a:hover,
.rg-text a:hover,
.rg-seite a:hover,
.rg-index a:hover,
.rg-weitere a:hover,
.rg-autor a:hover { text-decoration-thickness: 2px; }
.rg a:focus-visible {
	outline: 2px solid var(--wd-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Raster: Text + Seitenleiste ---------- */
.rg-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 68ch) minmax(0, 1fr);
	column-gap: 48px;
	padding-bottom: 72px;
}
/* Beide in Zeile 1: Die Seitenleiste steht im Quelltext vor dem Text, ohne
   feste Zeile setzte die automatische Platzierung den Text in Zeile 2. */
.rg-text { grid-column: 2; grid-row: 1; min-width: 0; }
.rg-seite { grid-column: 3; grid-row: 1; min-width: 0; }
@media (max-width: 1180px) {
	.rg-raster { grid-template-columns: minmax(0, 68ch) minmax(220px, 1fr); }
	.rg-text { grid-column: 1; grid-row: 1; }
	.rg-seite { grid-column: 2; grid-row: 1; }
}
@media (max-width: 880px) {
	.rg-raster { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
	.rg-text, .rg-seite { grid-column: 1; grid-row: auto; }
	.rg-seite { order: -1; margin-bottom: 8px; }
}

.rg-seite { font-size: .92rem; line-height: 1.55; }
@media (min-width: 881px) {
	.rg-seite > * { position: sticky; top: 110px; }
	.rg-seite .rg-leistung { position: static; }
	/* Bei Zoom oder niedrigem Fenster bleibt das Verzeichnis vollständig erreichbar (WCAG 1.4.4, 2.4.11). */
	.rg-seite .rg-toc { max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; }
}
.rg-toc { border-top: 1px solid var(--bg-line); padding-top: 14px; margin-bottom: 26px; }
.rg-toc-titel, .rg-leistung-titel {
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink-mute);
	margin-bottom: 8px;
}
.rg-toc ul, .rg-quellen ul, .rg-weitere ul, .rg-index { list-style: none; margin: 0; padding: 0; }
.rg-toc li { padding: 5px 0; }
.rg-toc a { color: var(--ink-2); text-decoration: none; }
.rg-toc a:hover { color: var(--wd-accent); text-decoration: underline; text-underline-offset: 3px; }
.rg-leistung { border-top: 1px solid var(--bg-line); padding-top: 14px; }
.rg-leistung p { margin-bottom: 6px; }
.rg-leistung a { font-weight: 700; }
.rg-leistung-text { color: var(--ink-2); }

/* ---------- Prosa ---------- */
.rg-abschnitt { padding-top: 12px; margin-bottom: 40px; scroll-margin-top: 110px; }
.rg-abschnitt h2 {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.25;
	margin-bottom: 16px;
	text-wrap: balance;
}
.rg-abschnitt h3 {
	font-size: clamp(1.1rem, 1.6vw, 1.25rem);
	line-height: 1.3;
	margin: 26px 0 10px;
}
.rg-text p, .rg-text li {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--ink-2);
}
.rg-text p { margin-bottom: 14px; }
.rg-text strong { color: var(--ink); }

.rg-liste { margin: 0 0 18px 1.2em; padding: 0; }
.rg-liste li { padding-left: .2em; margin-bottom: 6px; }

.rg-pruefliste { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--bg-line); }
.rg-pruefliste li {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bg-line);
}
.rg-haken { color: var(--wd-accent); padding-top: .35em; }

.rg-hinweis {
	background: var(--bg-soft);
	border: 1px solid var(--bg-line);
	border-radius: 12px;
	padding: 14px 18px;
}

.rg-tabelle { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--bg-line); border-radius: 12px; }
.rg-tabelle:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 3px; }
.rg-tabelle table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; min-width: 520px; }
.rg-tabelle caption { text-align: left; font-weight: 600; font-size: .86rem; color: var(--ink-mute); padding: 12px 14px 0; }
.rg-tabelle th, .rg-tabelle td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--bg-line); color: var(--ink-2); }
.rg-tabelle thead th { color: var(--ink); font-weight: 700; background: var(--bg-soft); }
.rg-tabelle tbody th { color: var(--ink); font-weight: 600; }
.rg-tabelle tr:last-child th, .rg-tabelle tr:last-child td { border-bottom: 0; }

/* ---------- Fragen, Quellen, Autor ---------- */
.rg-frage { border-top: 1px solid var(--bg-line); padding: 14px 0 4px; }
.rg-frage h3 { margin: 0 0 8px; }
.rg-quellen li { font-size: .95rem; line-height: 1.55; padding: 8px 0; border-top: 1px solid var(--bg-line); color: var(--ink-2); }
.rg-quelle-hg, .rg-quelle-datum { color: var(--ink-mute); }
.rg-autor { border-top: 1px solid var(--bg-line); padding-top: 18px; }
.rg-autor-titel { font-size: 1.05rem; margin-bottom: 6px; }
.rg-autor p { font-size: .98rem; line-height: 1.65; color: var(--ink-2); }

/* ---------- Beratung, weitere Ratgeber ---------- */
.rg-cta { background: var(--bg-soft); padding: 56px 0; }
.rg-cta h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 10px; text-wrap: balance; }
.rg-cta p { color: var(--ink-2); line-height: 1.7; max-width: 60ch; margin-bottom: 22px; }
.rg-cta .wd-actions { margin-bottom: 0; }
.rg-weitere { padding: 48px 0 72px; }
.rg-weitere h2 { font-size: 1.25rem; margin-bottom: 10px; }
.rg-weitere li { padding: 9px 0; border-top: 1px solid var(--bg-line); line-height: 1.5; }
.rg-weitere p { margin-top: 14px; }

/* ---------- Übersicht ---------- */
.rg-sec { padding: 8px 0 72px; }
.rg-index-eintrag { border-top: 1px solid var(--bg-line); padding: 22px 0; }
.rg-index-eintrag:last-child { border-bottom: 1px solid var(--bg-line); }
.rg-index-eintrag h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; margin-bottom: 8px; text-wrap: balance; }
.rg-index-eintrag h2 a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rg-index-eintrag h2 a:hover { color: var(--wd-accent); text-decoration: underline; text-underline-offset: 3px; }
.rg-index-eintrag p { color: var(--ink-2); line-height: 1.65; max-width: 68ch; }
.rg-index-meta { font-size: .86rem; color: var(--ink-mute) !important; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
	.rg * { transition: none !important; }
}

/* Feste Kontaktleiste rechts (.nk-crail, 50 px): Seitenleiste nicht darunter (A11y S97, WCAG 1.4.10). */
@media (min-width: 881px) and (max-width: 1340px) {
	.rg-raster { padding-right: 56px; }
}

/* Befehle und Crawlernamen nicht am Bindestrich trennen (Sichtpruefung S97); laengster Schnipsel passt bei 320 px. */
.rg-text code { white-space: nowrap; }