/*
 * Blog-Design blume-tax.de
 * Angelegt: 2026-08-31
 *
 * Wirkt auf Blogbeitraege (body.single-post) und die Beitragsuebersicht.
 * Wird in functions.php nach der Child-style.css geladen; einige Regeln
 * tragen bewusst eine hoehere Spezifitaet, weil das WPCode-Snippet und die
 * vom Page Builder erzeugten Styles erst nach den Stylesheets im Quelltext
 * stehen.
 *
 * Zum Abschalten: die Zeile wp_enqueue_style( 'blume-blog', ... ) in der
 * functions.php auskommentieren.
 */

/* ---------------------------------------------------------------------
   Stellschrauben fuer die Breite des Beitrags. Alles andere rechnet
   sich daraus ab - zum Aendern genuegen diese beiden Zeilen.
   --------------------------------------------------------------------- */
:root {
	--mb-textbreite: 900px;
	--mb-bildbreite: 1170px;
}

/* =====================================================================
   1. Einzelbeitrag - Lesespalte und Grundtypografie
   Zuvor lief der Flietext mit 16px ueber die volle Containerbreite von
   1170px, also rund 150 Zeichen je Zeile. Text bekommt eine Lesespalte,
   Bilder und Boxen duerfen weiterhin breiter stehen.
   ===================================================================== */

body.single-post .lqd-post-content {
	padding-top: 70px;
	font-size: 19px;
	line-height: 1.8;
}

@media (max-width: 991px) {
	body.single-post .lqd-post-content {
		padding-top: 40px;
	}
}

body.single-post .entry-content .ld-container.container {
	max-width: var(--mb-textbreite);
}

/* Bilder in ganzer Spaltenbreite duerfen ueber die Textspalte hinausragen.
   Der Text behaelt dadurch ueberall dieselbe linke Kante. */
@media (min-width: 992px) {
	body.single-post .entry-content .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .wpb_single_image {
		margin-left: calc((var(--mb-bildbreite) - var(--mb-textbreite)) / -2);
		margin-right: calc((var(--mb-bildbreite) - var(--mb-textbreite)) / -2);
	}
}

/* =====================================================================
   2. Ueberschriften im Beitrag
   Das Theme setzt global h2 auf 2.75em und h3 auf 2.25em. Im Flietext
   sind das rund 50px bzw. 40px - zu gross fuer eine Textspalte und ohne
   erkennbare Abstufung zu h4.
   ===================================================================== */

body.single-post .entry-content h1.ld-fh-element {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.2;
	/* Verteilt die Zeilen gleichmaessig statt eine kurze Restzeile zu lassen. */
	text-wrap: balance;
}

body.single-post .entry-content h2.ld-fh-element {
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.25;
}

body.single-post .entry-content h3.ld-fh-element {
	font-size: clamp(20px, 2.4vw, 24px);
	line-height: 1.3;
}

body.single-post .entry-content h4.ld-fh-element {
	font-size: 20px;
	line-height: 1.4;
}

body.single-post .entry-content h2.ld-fh-element,
body.single-post .entry-content h3.ld-fh-element {
	margin-bottom: 0.6em;
}

body.single-post .entry-content h4.ld-fh-element {
	margin-bottom: 0.5em;
}

body.single-post .entry-content p.ld-fh-element {
	margin-bottom: 1.45em;
}

body.single-post .entry-content p.ld-fh-element:last-child {
	margin-bottom: 0;
}

/* =====================================================================
   3. Aufzaehlungen
   Der Editor-Filter erzeugt vor und hinter jeder Liste einen leeren
   Absatz. Der wird entfernt, die Listen bekommen eigene Aufzaehlungs-
   zeichen in der Akzentfarbe.
   ===================================================================== */

body.single-post .entry-content .ld-fancy-heading > p.ld-fh-element:empty,
body.single-post .entry-content .ld-fancy-heading > ul + p:last-child,
body.single-post .entry-content .ld-fancy-heading > ol + p:last-child {
	display: none;
}

body.single-post .entry-content .ld-fancy-heading > p.ld-fh-element:has(+ ul),
body.single-post .entry-content .ld-fancy-heading > p.ld-fh-element:has(+ ol) {
	display: none;
}

body.single-post .entry-content .ld-fancy-heading ul,
body.single-post .entry-content .ld-fancy-heading ol {
	margin: 0 0 1.45em;
	padding: 0;
	list-style: none;
}

body.single-post .entry-content .ld-fancy-heading li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 0.7em;
}

body.single-post .entry-content .ld-fancy-heading li:last-child {
	margin-bottom: 0;
}

body.single-post .entry-content .ld-fancy-heading ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #0482c8;
}

body.single-post .entry-content .ld-fancy-heading ol {
	counter-reset: lqdnum;
}

body.single-post .entry-content .ld-fancy-heading ol > li::before {
	counter-increment: lqdnum;
	content: counter(lqdnum) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: "tommy", sans-serif;
	font-weight: 600;
	color: #0482c8;
}

/* =====================================================================
   4. Bilder im Beitrag
   ===================================================================== */

body.single-post .entry-content .wpb_single_image img {
	border-radius: 14px;
	display: block;
	width: 100%;
	height: auto;
}

body.single-post .entry-content .wpb_single_image figure {
	margin-bottom: 0;
}

/* =====================================================================
   5. Bausteine fuer Beitragslayouts
   Werden ueber "Extra class name" an Zeilen und Spalten des Page
   Builders vergeben.

   Grundsatz: Der Text in einem Kasten steht auf derselben linken Kante
   wie der Flietext. Erreicht wird das nicht ueber feste Pixelwerte,
   sondern indem der Kasten um genau seinen Innenabstand nach aussen
   waechst - das bleibt richtig, egal welche Spaltenabstaende Bootstrap
   gerade vergibt.
   ===================================================================== */

.entry-content .mb-section {
	margin-bottom: 52px;
}

.entry-content .mb-section-tight {
	margin-bottom: 26px;
}

/* --- Kaesten ueber die volle Textbreite ------------------------------- */

body.single-post .entry-content .mb-box-rule > .ld-container > .row > .wpb_column > .vc_column-inner {
	background-color: #fbfcfe;
	border: 1px solid #e3eaf2;
	border-left: 5px solid #0482c8;
	border-radius: 10px;
	/* links 5px Rahmen + 27px = 32px, rechts 1px + 31px = 32px */
	padding: 30px 31px 30px 27px;
	margin-left: -32px;
	margin-right: -32px;
}

/* Fazit: eine gefuellte Flaeche statt eines zweiten Akzentbalkens.
   Hinweiskasten und Fazit standen sonst direkt uebereinander und trugen
   denselben blauen Balken links - das las sich wie ein unterbrochenes
   Element statt wie zwei verschiedene. Jetzt: Hinweis = heller Kasten
   mit Akzentkante, Fazit = ruhige Flaeche zum Abschluss. */
body.single-post .entry-content .mb-box-fazit > .ld-container > .row > .wpb_column > .vc_column-inner {
	background-color: #eaf1f8;
	border: none;
	border-radius: 12px;
	padding: 30px 32px;
	margin-left: -32px;
	margin-right: -32px;
}

/* --- Karten nebeneinander --------------------------------------------- */

/* Die Zeile waechst um zweimal den Innenabstand nach aussen, damit der
   Text der linken Karte auf der Textkante beginnt. */
@media (min-width: 992px) {
	body.single-post .entry-content section.vc_row:has(> .ld-container > .row > .wpb_column[class*="mb-box"]) > .ld-container {
		max-width: calc(var(--mb-textbreite) + 64px);
	}
}

.entry-content .mb-box-a,
.entry-content .mb-box-b,
.entry-content .mb-box-good,
.entry-content .mb-box-bad {
	align-items: stretch;
}

.entry-content .mb-box-a > .vc_column-inner,
.entry-content .mb-box-b > .vc_column-inner {
	padding: 30px 32px;
	border-radius: 12px;
	height: 100%;
}

.entry-content .mb-box-a > .vc_column-inner {
	background-color: #eaf1f8;
}

.entry-content .mb-box-b > .vc_column-inner {
	background-color: #f3f5f6;
}

.entry-content .mb-box-good > .vc_column-inner,
.entry-content .mb-box-bad > .vc_column-inner {
	/* 5px Rahmen + 27px = 32px, wie bei den uebrigen Karten */
	padding: 30px 32px 30px 27px;
	border-radius: 12px;
	height: 100%;
}

.entry-content .mb-box-good > .vc_column-inner {
	background-color: #eef6f0;
	border-left: 5px solid #2f7d51;
}

.entry-content .mb-box-bad > .vc_column-inner {
	background-color: #fbf1ef;
	border-left: 5px solid #b1554b;
}

/* --- Auszeichnungen ---------------------------------------------------- */

.entry-content .mb-kpi .ld-fh-element {
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 2.6em;
	line-height: 1;
	color: #0482c8;
	margin: 0 0 4px;
}

.entry-content .mb-eyebrow .ld-fh-element {
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #0482c8;
	margin: 0 0 10px;
}

/* Bild und Text nebeneinander mittig ausrichten. */
.entry-content .mb-vcenter > .ld-container > .ld-row {
	align-items: center;
}

/* --- Farbvarianten der Aufzaehlungszeichen ----------------------------- */

body.single-post .entry-content .ld-fancy-heading.mb-list-good ul > li::before {
	background-color: #2f7d51;
}

body.single-post .entry-content .ld-fancy-heading.mb-list-bad ul > li::before {
	background-color: #b1554b;
}

body.single-post .entry-content .ld-fancy-heading.mb-list-num li {
	padding-left: 48px;
	margin-bottom: 0.85em;
}

body.single-post .entry-content .ld-fancy-heading.mb-list-num ol > li::before {
	content: counter(lqdnum);
	top: 0.1em;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #0482c8;
	color: #ffffff;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
}

@media (max-width: 991px) {
	.entry-content .mb-section {
		margin-bottom: 34px;
	}

	/* Auf schmalen Schirmen bleiben die Kaesten in der Spalte. */
	body.single-post .entry-content .mb-box-rule > .ld-container > .row > .wpb_column > .vc_column-inner,
	body.single-post .entry-content .mb-box-fazit > .ld-container > .row > .wpb_column > .vc_column-inner {
		margin-left: 0;
		margin-right: 0;
	}

	.entry-content .mb-box-a > .vc_column-inner,
	.entry-content .mb-box-b > .vc_column-inner,
	.entry-content .mb-box-good > .vc_column-inner,
	.entry-content .mb-box-bad > .vc_column-inner,
	body.single-post .entry-content .mb-box-rule > .ld-container > .row > .wpb_column > .vc_column-inner {
		padding: 24px 22px;
	}
}

/* =====================================================================
   6. Beitragsuebersicht - Karten
   Zuvor standen Bild, Kategorie und Titel lose untereinander. Jetzt eine
   geschlossene Karte mit einheitlichem Bildformat und gleicher Hoehe.
   ===================================================================== */

body .lqd-lp-grid .lqd-lp-column {
	display: flex;
	margin-bottom: 36px;
}

body .lqd-lp.lqd-lp-style-3 {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #e7edf3;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

body .lqd-lp.lqd-lp-style-3:hover {
	transform: translateY(-4px);
	border-color: #d3e2ef;
	box-shadow: 0 18px 40px rgba(12, 51, 77, 0.13);
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-img {
	margin-bottom: 0 !important;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-img figure {
	border-radius: 0;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-header {
	flex: 1 1 auto;
	padding: 24px 26px 28px;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-meta {
	font-size: 12px;
	letter-spacing: 0.1em;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-cat a {
	color: #036ea8;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-date {
	color: #5c7383;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-title {
	font-size: 20px;
	line-height: 1.35;
	margin-top: 14px;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-title a {
	color: #0c334d;
	transition: color 0.25s;
}

body .lqd-lp.lqd-lp-style-3:hover .lqd-lp-title a {
	color: #0482c8;
}

/* =====================================================================
   7. Kopfzeile des Beitrags - Kategorie und Datum
   Der Cover-Kopf des Themes wird nicht mehr ausgegeben (siehe
   templates/blog/single/part-head.php). Damit ein Beitrag trotzdem
   erkennen laesst, wie aktuell er ist, steht darueber eine schmale
   Zeile mit Kategorie und Datum.
   ===================================================================== */

.lqd-post-meta-line {
	padding-top: 170px;
	text-align: left;
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5c7383;
}

@media (max-width: 1199px) {
	.lqd-post-meta-line {
		padding-top: 120px;
	}
}

@media (max-width: 767px) {
	.lqd-post-meta-line {
		padding-top: 90px;
	}
}

.lqd-post-meta-line > .ld-container {
	max-width: var(--mb-textbreite);
}

.lqd-post-meta-line a {
	color: #036ea8;
}

.lqd-post-meta-line .lqd-pm-sep {
	margin: 0 10px;
	color: #c3d0da;
}

/* Der Beitragsinhalt schliesst direkt an die Meta-Zeile an. */
body.single-post .lqd-post-content {
	padding-top: 26px;
}

@media (max-width: 767px) {
	body.single-post .lqd-post-content {
		padding-top: 18px;
	}
}

/* =====================================================================
   9. "Das koennte Sie auch interessieren" am Beitragsende
   Bekommt dieselbe Kartenoptik wie die Beitragsuebersicht.
   ===================================================================== */

.related-posts {
	padding-bottom: 20px;
}

.related-posts > .container {
	max-width: var(--mb-textbreite);
}

.related-posts .related-posts-title {
	margin-bottom: 30px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: clamp(22px, 2.8vw, 28px);
	line-height: 1.3;
}

body .related-posts .lqd-lp.lqd-lp-style-13 {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #ffffff;
	border: 1px solid #e7edf3;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

body .related-posts .row > [class*="col-"] {
	display: flex;
	margin-bottom: 30px;
}

body .related-posts .lqd-lp.lqd-lp-style-13:hover {
	transform: translateY(-4px);
	border-color: #d3e2ef;
	box-shadow: 0 18px 40px rgba(12, 51, 77, 0.13);
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-img {
	margin-bottom: 0 !important;
	border-radius: 0;
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-meta {
	font-size: 12px;
	letter-spacing: 0.1em;
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-header {
	padding: 24px 26px 0;
	margin-bottom: 0 !important;
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-title {
	font-size: 19px;
	line-height: 1.35;
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-title a {
	color: #0c334d;
	transition: color 0.25s;
}

body .related-posts .lqd-lp.lqd-lp-style-13:hover .lqd-lp-title a {
	color: #0482c8;
}

body .related-posts .lqd-lp.lqd-lp-style-13 .lqd-lp-excerpt {
	padding: 10px 26px 26px;
	margin-bottom: 0 !important;
	font-size: 16px;
	line-height: 1.6;
	color: #55707f;
}

/* Der Auszug kommt doppelt in <p> verpackt aus dem Theme. */
body .related-posts .lqd-lp-excerpt p p {
	margin: 0;
}

body .related-posts .lqd-lp-excerpt > p {
	margin-bottom: 0;
}

/* =====================================================================
   10. Fusszeile des Beitrags
   ===================================================================== */

body.single-post .blog-post-footer {
	max-width: var(--mb-textbreite);
	margin-left: auto;
	margin-right: auto;
}

body.single-post .blog-post-footer .share-links > span {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #5c7383;
}

/* =====================================================================
   11. Bildhinweis
   Sichtbare Kennzeichnung unter KI-erzeugten Bildern. Steht auf der
   Textkante, nicht auf der Bildkante, damit die Ausrichtung im Beitrag
   einheitlich bleibt.
   ===================================================================== */

.entry-content .mb-bildhinweis .ld-fh-element {
	margin-top: 12px;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: #5c7383;
}

/* =====================================================================
   12. Tabellen im Beitrag
   Ersetzt die frueher je Beitrag eingebetteten Tabellen-Styles, die ein
   eigenes Farbschema (Sky/Slate) samt Dark-Mode mitbrachten. Die
   Selektoren tragen bewusst body voran, weil das Theme eigene
   Tabellenregeln mitbringt.
   ===================================================================== */

body.single-post .entry-content .mb-table-wrap {
	background-color: #ffffff;
	border: 1px solid #e3eaf2;
	border-radius: 14px;
	padding: 26px 28px;
	box-shadow: 0 8px 24px rgba(12, 51, 77, 0.05);
}

body.single-post .entry-content .mb-table-title {
	margin: 0 0 6px;
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.3;
	color: #0c334d;
}

body.single-post .entry-content .mb-table-sub {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: #5c7383;
}

body.single-post .entry-content .mb-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.single-post .entry-content table.mb-table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	font-size: 16px;
	margin: 0;
	background: transparent;
}

body.single-post .entry-content table.mb-table thead th {
	text-align: left;
	padding: 0 18px 12px 0;
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: #5c7383;
	text-transform: none;
	letter-spacing: 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid #dbe4ee;
	white-space: nowrap;
	vertical-align: bottom;
}

body.single-post .entry-content table.mb-table thead th small {
	display: block;
	margin-top: 3px;
	font-weight: 400;
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
	color: #6b7f8c;
}

body.single-post .entry-content table.mb-table tbody td {
	padding: 15px 18px 15px 0;
	border: none;
	border-bottom: 1px solid #eef2f7;
	vertical-align: middle;
	color: #0c334d;
	background: transparent;
}

body.single-post .entry-content table.mb-table tbody tr {
	background: transparent;
}

body.single-post .entry-content table.mb-table tbody tr:last-child td {
	border-bottom: none;
}

body.single-post .entry-content table.mb-table th:last-child,
body.single-post .entry-content table.mb-table td:last-child {
	padding-right: 0;
}

body.single-post .entry-content table.mb-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.single-post .entry-content table.mb-table .na {
	color: #6b7f8c;
}

body.single-post .entry-content table.mb-table .up {
	font-weight: 700;
}

body.single-post .entry-content .mb-table-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background-color: #eaf1f8;
	border: 1px solid #d3e2ef;
	color: #0482c8;
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 14px;
}

@media (max-width: 767px) {
	body.single-post .entry-content .mb-table-wrap {
		padding: 20px 18px;
	}

	body.single-post .entry-content table.mb-table {
		font-size: 15px;
	}
}

/* =====================================================================
   13. Karten der verwandten Beitraege
   Die Meta-Zeile lag als Overlay auf dem Bild. Sie steht jetzt wie in
   der Beitragsuebersicht unter dem Bild.
   ===================================================================== */

body .related-posts .lqd-lp-style-13 .lqd-lp-meta {
	position: static !important;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 26px 0 !important;
	background: transparent !important;
	font-family: "tommy", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body .related-posts .lqd-lp-style-13 .lqd-lp-meta .lqd-lp-cat {
	order: 1;
	margin: 0;
	padding: 0 !important;
}

body .related-posts .lqd-lp-style-13 .lqd-lp-meta .lqd-lp-date {
	order: 2;
	padding: 0 !important;
	color: #5c7383;
	background: transparent;
}

body .related-posts .lqd-lp-style-13 .lqd-lp-cat a {
	padding: 0 !important;
	color: #0482c8;
	background: transparent;
}

/* Gleiche linke Kante wie der Beitragstext. Der Container der
   verwandten Beitraege hat keinen Innenabstand, deshalb wird hier der
   negative Aussenabstand der Zeile aufgehoben statt Abstand ergaenzt. */
.related-posts > .container > .row {
	margin-left: 0;
	margin-right: 0;
}

/* Ueberschriften der Zahlenspalten stehen wie die Werte darunter. */
body.single-post .entry-content table.mb-table thead th.num {
	text-align: right;
}

/* Die Kategorie in den Karten der verwandten Beitraege wurde vom Theme
   mit einer dunklen Flaeche hinterlegt - hier zurueckgesetzt. */
body .related-posts .lqd-lp-style-13 .lqd-lp-meta,
body .related-posts .lqd-lp-style-13 .lqd-lp-cat,
body .related-posts .lqd-lp-style-13 .lqd-lp-cat li,
body .related-posts .lqd-lp-style-13 .lqd-lp-cat a,
body .related-posts .lqd-lp-style-13 .lqd-lp-date {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

body .related-posts .lqd-lp-style-13 .lqd-lp-cat a {
	color: #036ea8 !important;
}

body .related-posts .lqd-lp-style-13 .lqd-lp-date {
	color: #5c7383 !important;
}

/* =====================================================================
   14. Fragen-Akkordeon
   Laengere Fragen liefen unter das runde Aufklapp-Symbol.
   ===================================================================== */

body.single-post .entry-content .dp-accordion .accordion-title a {
	padding-right: 4.5em;
	line-height: 1.4;
}

@media (max-width: 767px) {
	body.single-post .entry-content .dp-accordion .accordion-title a {
		padding-right: 3.6em;
	}
}


/* =====================================================================
   15. Kontrast, Lesbarkeit, Ankersprünge
   Der Flietext des Themes ist #737373. Auf Weiss reicht das knapp
   (4,7:1), auf den getoenten Kastenflaechen fiel er auf 4,16:1 und lag
   damit unter der Anforderung von 4,5:1. In Kaesten wird deshalb ein
   dunklerer Ton gesetzt.
   ===================================================================== */

body.single-post .entry-content [class*="mb-box"] p,
body.single-post .entry-content [class*="mb-box"] li,
body.single-post .entry-content [class*="mb-box"] .ld-fh-element {
	color: #3f5563;
}

/* Ueberschriften in den Kaesten behalten die Hausfarbe. */
body.single-post .entry-content [class*="mb-box"] h2.ld-fh-element,
body.single-post .entry-content [class*="mb-box"] h3.ld-fh-element,
body.single-post .entry-content [class*="mb-box"] h4.ld-fh-element {
	color: #0c334d;
}

/* Auf schmalen Schirmen passen bei 19px zu wenige Woerter in die Zeile. */
@media (max-width: 767px) {
	body.single-post .lqd-post-content {
		font-size: 17px;
	}
}

/* Ruhiger Sprung zu Ankerzielen - ohne JavaScript und mit Ruecksicht auf
   Nutzer, die Bewegung reduziert haben. Der Versatz haelt das Ziel unter
   dem ueberlagernden Seitenkopf frei. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* Kleine Beschriftungen in der Beitragsuebersicht: das Akzentblau
   erreicht auf Weiss nur 4,17:1, noetig sind 4,5:1. */
body .lqd-lp.lqd-lp-style-3 .lqd-lp-cat a,
body .lqd-lp-grid .lqd-lp-meta .lqd-lp-cat a {
	color: #036ea8;
}

body .lqd-lp.lqd-lp-style-3 .lqd-lp-date,
body .lqd-lp-grid .lqd-lp-meta .lqd-lp-date {
	color: #5c7383;
}

/* Die kleine Auszeichnungszeile ueber den Kaesten stand in #0482c8 und
   erreichte damit nur rund 4,1:1. */
.entry-content .mb-eyebrow .ld-fh-element {
	color: #036ea8;
}

/* Die Antworten im Fragen-Akkordeon stehen auf #efefef. Der Flietext des
   Themes erreicht darauf nur 4,12:1. */
body.single-post .entry-content .dp-accordion .accordion-content,
body.single-post .entry-content .dp-accordion .accordion-content p,
body.single-post .entry-content .dp-accordion .accordion-content .ld-fh-element {
	color: #3f5563;
}


/* =====================================================================
   16. Typografische Stufen zusammenfuehren
   Auf einer Beitragsseite liefen zehn Schriftgroessen nebeneinander, die
   meisten Schritte unter 1,1. Die Leiter lautet jetzt
   42 / 30 / 24 / 19 / 15 / 12 - jeder Schritt mindestens 1,25.
   ===================================================================== */

/* Die Fragen im Akkordeon lagen auf 20px zwischen den Stufen. */
body .dp-accordion .accordion-title,
body .dp-accordion .accordion-title a {
	font-size: clamp(20px, 2.4vw, 24px);
	line-height: 1.35;
}

/* Kleine Beschriftungen einheitlich auf der untersten Stufe. */
body .lqd-lp.lqd-lp-style-3 .lqd-lp-meta,
body .related-posts .lqd-lp-style-13 .lqd-lp-meta {
	font-size: 12px;
}

/* Der Fliesstext der Fusszeile lief ueber 139 Zeichen je Zeile. */
#lqd-site-footer p,
.lqd-footer p,
footer .ld-fancy-heading .ld-fh-element {
	max-width: 62ch;
}

/* Die Kennzahlen behalten die Akzentfarbe - die Kontrastregel fuer
   Kastentext hatte sie ueberschrieben. Bei dieser Groesse genuegen
   3:1, erreicht werden 3,9:1. */
body.single-post .entry-content [class*="mb-box"] .mb-kpi .ld-fh-element,
body.single-post .entry-content .mb-kpi .ld-fh-element {
	color: #0482c8;
}

/* =====================================================================
   17. Bilder in halben Spalten
   Der Bildrahmen des Seitenbaukastens schrumpft auf die Eigenbreite der
   gewaehlten Bildvariante. In einer 450px breiten Spalte kamen dadurch
   nur 300px an. Rahmen und Bild fuellen die Spalte jetzt aus.
   ===================================================================== */

body.single-post .entry-content [class*="vc_col-sm-"]:not(.vc_col-sm-12) .wpb_single_image,
body.single-post .entry-content [class*="vc_col-sm-"]:not(.vc_col-sm-12) .wpb_single_image figure,
body.single-post .entry-content [class*="vc_col-sm-"]:not(.vc_col-sm-12) .wpb_single_image .vc_single_image-wrapper {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Bilder ueber die ganze Spaltenbreite behalten ihren Ueberstand: die
   negativen Aussenabstaende brauchen eine automatische Breite. */
body.single-post .entry-content .vc_col-sm-12 > .vc_column-inner > .wpb_wrapper > .wpb_single_image {
	width: auto;
	max-width: none;
}

/* =====================================================================
   18. Links im Flietext
   Neu gesetzte Verweise im Beitragstext waren nur an der Farbe zu
   erkennen (WCAG 1.4.1) und der Standard-Linkton des Themes erreicht
   auf Weiss keine 4,5:1. Beides hier korrigiert. Buttons, Karten und
   das Akkordeon bleiben unberuehrt.
   ===================================================================== */

body.single-post .entry-content .ld-fh-element a:not(.btn),
body.single-post .entry-content li a:not(.btn) {
	color: #036ea8;
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

body.single-post .entry-content .ld-fh-element a:not(.btn):hover,
body.single-post .entry-content li a:not(.btn):hover {
	color: #0c334d;
	text-decoration-thickness: 2px;
}

/* In den getoenten Kaesten braucht der Linkton mehr Tiefe. */
body.single-post .entry-content [class*="mb-box"] .ld-fh-element a:not(.btn),
body.single-post .entry-content [class*="mb-box"] li a:not(.btn) {
	color: #02628f;
}

/* Das Akkordeon und die Karten sind Bedienelemente, keine Textlinks. */
body.single-post .entry-content .dp-accordion a,
body.single-post .entry-content .lqd-lp a {
	text-decoration: none;
}