/* Einzelner Ratgeber-Beitrag: Kadence-Layout steht auf fullwidth/unboxed (Post-Meta), damit der
   weiße Kasten und die 730px-Spalte verschwinden. Eigene Lesebreite statt Kante-zu-Kante, sonst
   verläuft sich der Text auf großen Bildschirmen. Nur auf /ratgeber-* Beiträgen geladen,
   siehe functions.php. */

/* :not(.loop-entry) ausschließen, sonst bekommen auch die kleinen Vorschau-Karten in
   „Ähnliche Beiträge“ die Lesebreite und Polsterung des Hauptartikels aufgezwungen.
   !important nötig, weil Kadence selbst mit !important-Spezifität arbeitet
   (.content-style-unboxed .entry:not(.loop-entry) > .entry-content-wrap { padding: 0 }). */
article.category-ratgeber:not(.loop-entry) .entry-content-wrap {
	max-width: 960px !important;
	margin-inline: auto !important;
	padding-inline: var(--sk-rand) !important;
	box-sizing: border-box;
}

/* Beitragsnavigation (Zurück/Weiter) und „Ähnliche Beiträge“ liegen außerhalb von <article>,
   deshalb über die eigene Body-Klasse angesprochen statt über category-ratgeber. */

.sk-ratgeber-beitrag .post-navigation {
	max-width: 960px;
	margin-inline: auto;
	padding-inline: var(--sk-rand);
	box-sizing: border-box;
}

.sk-ratgeber-beitrag .post-navigation .nav-links {
	gap: clamp(16px, 2vw, 24px);
}

.sk-ratgeber-beitrag .post-navigation .nav-previous::after {
	content: none;
}

.sk-ratgeber-beitrag .post-navigation a {
	padding: clamp(20px, 2.2vw, 26px);
	border: 1px solid rgba(10, 31, 68, 0.08);
	border-radius: 16px;
	background: #FDFBF7;
	font: 400 clamp(1.0625rem, 1.4vw, 1.25rem)/1.3 var(--sk-font-heading);
	color: var(--sk-navy) !important;
	transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease, color 0.4s ease;
}

.sk-ratgeber-beitrag .post-navigation a:hover,
.sk-ratgeber-beitrag .post-navigation a:focus-visible {
	background: var(--sk-navy);
	border-color: var(--sk-navy);
	color: var(--sk-creme) !important;
	transform: translateY(-3px);
}

.sk-ratgeber-beitrag .post-navigation-sub small {
	font: 500 0.6875rem/1 var(--sk-font-body);
	letter-spacing: 0.14em;
	color: var(--sk-navy-mittel); /* Gold auf Hellcreme hat nur Kontrast 2,15, Navy Mittel liegt weit über 4,5 */
	transition: color 0.4s ease;
}

.sk-ratgeber-beitrag .post-navigation a:hover .post-navigation-sub small,
.sk-ratgeber-beitrag .post-navigation a:focus-visible .post-navigation-sub small {
	color: var(--sk-gold-hell);
}

/* Ähnliche Beiträge: Kadence setzt hier standardmäßig einen vollflächigen Gold-Hell-Block
   (--global-palette7), das wirkt neben dem sonst zurückhaltenden Farbschema zu laut. */
.sk-ratgeber-beitrag .entry-related {
	background: var(--sk-creme) !important;
}

/* max-width braucht !important: „.content-width-fullwidth .wp-site-blocks .alignwide“ setzt bei
   Kadence explizit max-width:unset auf .alignwide, spezifischer als eine einfache Klassenregel. */
.sk-ratgeber-beitrag .entry-related-inner-content {
	max-width: 960px !important;
	width: auto !important;
	margin-inline: auto !important;
	padding-left: var(--sk-rand) !important;
	padding-right: var(--sk-rand) !important;
	box-sizing: border-box;
}

.sk-ratgeber-beitrag .entry-related-title {
	font: 300 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--sk-font-heading);
	color: var(--sk-navy);
}

.sk-ratgeber-beitrag .entry-related-carousel .entry {
	background: #FDFBF7;
	border: 1px solid rgba(10, 31, 68, 0.08);
	border-radius: 16px;
}

.sk-ratgeber-beitrag .entry-related-carousel h3.entry-title a {
	font-family: var(--sk-font-heading);
	color: var(--sk-navy);
}

.sk-ratgeber-beitrag .entry-related .splide__arrow {
	background: var(--sk-navy);
	color: var(--sk-creme);
	opacity: 1;
}

.sk-ratgeber-beitrag .entry-related .splide__arrow:hover {
	background: var(--sk-navy-mittel);
}

/* Link zurück zur Übersicht, ans Ende des Beitrags angehängt. padding statt margin, damit der
   Abstand nicht mit dem letzten Absatz des Beitragstexts kollabieren kann */
.sk-ratgeber-zurueck {
	margin-top: 0;
	padding-top: clamp(48px, 6vw, 80px);
}

.sk-ratgeber-zurueck a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 0.9375rem/1 var(--sk-font-body);
	color: var(--sk-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--sk-gold);
	padding-bottom: 2px;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.sk-ratgeber-zurueck a::before {
	content: "←";
	color: var(--sk-gold);
}

.sk-ratgeber-zurueck a:hover,
.sk-ratgeber-zurueck a:focus-visible {
	color: var(--sk-navy-mittel);
	border-color: var(--sk-navy-mittel);
}

/* Autor und Datum über dem Beitrag (sichtkraft_ratgeber_meta) */
.sk-ratgeber-beitrag .sk-ratgeber-meta {
	margin: 0 0 2rem;
	font-family: var(--sk-font-body);
	font-size: 0.9375rem;
	color: var(--sk-grau);
}
.sk-ratgeber-beitrag .sk-ratgeber-meta a {
	color: var(--sk-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}