/* Beitragsansicht (Los „beitrag“, seit 0.5.0 nach INNER-BLOG-PSD, Los „design-r5“), geladen nur auf is_singular('post').
   Tokens aus style.css. Aufbau: Kopf (Komponente style.css 8a, hier Teilen-Icons) · Raster mit Inhaltsverzeichnis ·
   Textdarstellung · Plugins im Text (ILRC, lib-metabox, kurebook, WPRM, TOC+) · nach dem Text · Kartenreihen · Druck. */

/* =========================================================================
   1. Kopf: Teilen-Icons (PSD: weiß, ohne Kreis, unter der Meta-Zeile)
   ========================================================================= */
.lib-teilen--kopf { margin-top: var(--lib-a-1); }
.lib-teilen--kopf .lib-teilen__liste { gap: 0; margin-left: -12px; }
.lib-teilen--kopf .lib-teilen__link { border: 0; color: var(--lib-weiss); }
.lib-teilen--kopf .lib-teilen__link:hover, .lib-teilen--kopf .lib-teilen__link:focus { background: rgba(255, 255, 255, 0.16); color: var(--lib-weiss); }
.lib-teilen--kopf .lib-icon { width: 18px; height: 18px; }
.lib-teilen--kopf :focus-visible { outline-color: var(--lib-weiss); }

/* =========================================================================
   2. Raster: eine Lesespalte (730 px). Ab 1010 px (Raster 190 + 40 + 730 passt neben 2 x 24 px Rand) Inhaltsverzeichnis als schmale Spalte (190 px) links daneben.
      PSD bei 1600: Verzeichnis x 33 bis 191, Text ab x 245 (Containerrand). Wo der linke Fensterrand reicht, steht das
      Verzeichnis dort und der Text am Containerrand; sonst rückt der Text so weit nach rechts, wie es braucht
      (Artikel um bis zu 230 px nach links verschoben, nie näher als --lib-rand an den Fensterrand).
   ========================================================================= */
.single-post.no-sidebar .site-main { max-width: none; margin-top: var(--lib-a-7); }
.single-post .inside-article > * { max-width: 730px; }
.single-post .lib-beitragsbild { margin: 0 0 var(--lib-a-6); }
.single-post .lib-beitragsbild img { aspect-ratio: 16 / 9; object-fit: cover; }

.lib-text > * { margin-bottom: 1.25em; }
.lib-text > :last-child { margin-bottom: 0; }
.lib-text::after { content: ""; display: table; clear: both; }
.lib-text:empty { display: none; }
.entry-content > .lib-text { margin-bottom: 1.25em; }

@media (min-width: 1010px) {
	.single-post .inside-article {
		--lib-toc-b: 190px;
		--lib-toc-luecke: 40px;
		display: grid;
		grid-template-columns: var(--lib-toc-b) minmax(0, 730px);
		column-gap: var(--lib-toc-luecke);
		align-items: start;
		/* Freier Rand links neben dem Container = (Seitenbreite - Containerbreite) / 2; 100% = Breite von .site-main
		   (= Container), 100cqw = Seitenbreite ohne Scrollleiste (body ist Container, style.css). Erste Zeile = Rückfall
		   für Browser ohne Container-Einheiten. */
		margin-left: calc(-1 * clamp(0px, (100vw - var(--lib-container)) / 2 - var(--lib-rand), var(--lib-toc-b) + var(--lib-toc-luecke)));
		margin-left: calc(-1 * clamp(0px, (100cqw - 100%) / 2 - var(--lib-rand), var(--lib-toc-b) + var(--lib-toc-luecke)));
	}
	.single-post .inside-article > * { grid-column: 2; max-width: none; min-width: 0; }
	/* Mit geteiltem Inhalt: Textteile und Verzeichnis werden Rasterelemente (:has, sonst bleibt es einspaltig).
	   Keine festen Zeilen: Spalte 2 füllt sich in DOM-Reihenfolge (Bild, Text vor, Text nach, Zeile, Fuß), das
	   Verzeichnis belegt in Spalte 1 die ersten drei Zeilen. */
	.single-post .entry-content:has(> .lib-text--vor) { display: contents; }
}

/* =========================================================================
   3. Inhaltsverzeichnis (Table of Contents Plus, Ausgabe im Text)
   ========================================================================= */
#toc_container {
	display: block;
	width: auto;
	margin: 0 0 1.5em;
	padding: var(--lib-a-4) var(--lib-a-5);
	border: 1px solid var(--lib-rahmen);
	border-left: 4px solid var(--lib-gruen);
	border-radius: var(--lib-radius-s);
	background: var(--lib-flaeche);
	font-size: var(--lib-fs-m);
	line-height: 1.45;
}
#toc_container .toc_title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--lib-a-2);
	margin: 0;
	color: var(--lib-tinte);
	font-size: var(--lib-fs-s);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}
#toc_container span.toc_toggle { font-size: var(--lib-fs-s); font-weight: 400; letter-spacing: 0; text-transform: none; }
#toc_container .toc_toggle a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	color: var(--lib-gruen-dunkel); /* auf --lib-flaeche hält #2a8402 nur 4,4:1 */
	text-decoration: underline;
}
#toc_container .toc_title + ul.toc_list { margin-top: var(--lib-a-2); }
#toc_container ul { margin: 0; padding: 0; list-style: none; }
/* Nur H2 im Inhaltsverzeichnis (Joel 20.10.2026): Unterebenen aus. TOC+ liest seine Optionen vor dem Theme,
   deshalb per CSS statt per Options-Filter. */
#toc_container ul ul { display: none; }
#toc_container li { margin: 0; padding: 0; }
#toc_container li::marker { content: none; }
#toc_container a {
	display: block;
	padding: 5px 0;
	color: var(--lib-text);
	text-decoration: none;
}
#toc_container a:hover, #toc_container a:focus { color: var(--lib-gruen-text); text-decoration: underline; }
#toc_container .toc_number { color: var(--lib-meta); margin-right: 4px; }

/* Unter 1200 px klappt TOC+ die Liste per Skript ein („Anzeigen“). Nicht vorab per CSS ausblenden: verzögert WP Rocket
   das Skript (Delay JS) oder fällt es aus, bliebe die Liste ohne Knopf verborgen. Ohne Skript ist sie offen. */

@media (min-width: 1010px) {
	/* Schmale klebende Spalte links neben dem Text (PSD „side mark“: Titel 12 px Versalien grün mit rundem Symbol,
	   Einträge 14/26 #575757, aktueller Abschnitt grün). Die Liste ist hier immer offen, ohne Nummern. */
	.single-post #toc_container.lib-toc {
		grid-column: 1;
		grid-row: 1 / span 3;
		position: sticky;
		top: calc(var(--lib-sticky-unten) + var(--lib-a-5)); /* unter dem klebenden Header (und der Admin-Bar) */
		display: block !important;
		width: auto !important;
		max-height: calc(100vh - var(--lib-sticky-unten) - 2 * var(--lib-a-5));
		margin: 0;
		padding: 0 var(--lib-a-2) var(--lib-a-2) 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: 0;
		background: none;
		font-size: var(--lib-fs-s);
		line-height: 1.45;
		scrollbar-width: thin;
		scrollbar-color: var(--lib-gruen) transparent;
		hyphens: auto;
	}
	.single-post #toc_container.lib-toc .toc_title {
		gap: 9px;
		padding-bottom: var(--lib-a-3);
		color: var(--lib-gruen-text);
		font-size: var(--lib-fs-xs);
		font-weight: 400;
		letter-spacing: 0.06em;
	}
	.single-post #toc_container.lib-toc .toc_title::before {
		content: "";
		flex: 0 0 auto;
		width: 23px;
		height: 23px;
		border-radius: 50%;
		background: var(--lib-gruen-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M7 8.5h9M8.5 11.5h6M10 14.5h3' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 23px no-repeat;
	}
	.single-post #toc_container.lib-toc .toc_toggle { display: none; }
	.single-post #toc_container.lib-toc .toc_list { display: block !important; margin-top: 0; }
	.single-post #toc_container.lib-toc .toc_number { display: none; }
	.single-post #toc_container.lib-toc a { padding: 4px 0 4px 32px; color: #575757; }
	.single-post #toc_container.lib-toc a:hover, .single-post #toc_container.lib-toc a:focus { color: var(--lib-gruen-text); text-decoration: underline; }
	.single-post #toc_container.lib-toc a[aria-current] { color: var(--lib-gruen-text); font-weight: 600; }
	.single-post #toc_container.lib-toc ul ul { margin-left: 0; }
	.single-post #toc_container.lib-toc ul ul a { padding-left: 46px; font-size: 0.8125rem; }
}

/* =========================================================================
   4. Textdarstellung (lange Texte)
   ========================================================================= */
.single-post .entry-content { overflow-wrap: break-word; }
.single-post .entry-content :is(h2, h3, h4) + * { margin-top: 0; }
/* Überschriften im Text landen 24 px unter dem Header: scroll-padding von <html> (Header + 16 px, style.css) plus 8 px.
   TOC+-Anker sitzen als span in der Überschrift. */
.single-post .entry-content :is(h2, h3, h4, h5, h6),
.single-post .entry-content :is(h2, h3, h4, h5, h6) [id] { scroll-margin-top: calc(var(--lib-a-5) - 16px); }
.single-post .entry-content p:empty { display: none; }
.entry-content ul ul, .entry-content ol ol, .entry-content ul ol, .entry-content ol ul { margin-top: 0.4em; margin-bottom: 0; }
.entry-content strong, .entry-content b { color: var(--lib-tinte); font-weight: 600; }

/* Bilder: Radius und weicher Schatten (Entwurf), links/rechts umflossen ab Tablet */
.entry-content .wp-block-image img, .entry-content figure > img, .entry-content p > img[class*="wp-image-"] {
	border-radius: var(--lib-radius);
	box-shadow: var(--lib-schatten);
}
.entry-content .wp-block-image { margin-top: 0.4em; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.entry-content .alignleft:not(.internal-linking-related-contents-pro *) { float: left; margin: 0.3em 1.5em 1em 0; max-width: 50%; }
.entry-content .alignright:not(.internal-linking-related-contents-pro *) { float: right; margin: 0.3em 0 1em 1.5em; max-width: 50%; }
@media (max-width: 600px) {
	.entry-content .alignleft:not(.internal-linking-related-contents-pro *), .entry-content .alignright:not(.internal-linking-related-contents-pro *) {
		float: none;
		max-width: 100%;
		margin: 0 0 1.25em;
	}
}
.entry-content .wp-block-gallery img { box-shadow: none; }

/* Videos und Einbettungen: 16:9, ohne Rand-Regel aus dem alten Customizer-CSS */
.entry-content .wp-block-embed { margin-left: 0; margin-right: 0; }
.entry-content .wp-block-embed iframe, .entry-content > .lib-text > iframe, .entry-content p > iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--lib-radius-s);
}
.entry-content .video-container iframe { aspect-ratio: auto; height: 100%; }
.entry-content .cmplz-placeholder-element { border-radius: var(--lib-radius-s); }

/* Tabellen: mobil quer scrollbar statt Überlauf */
.entry-content table { margin: 0; }
.entry-content .wp-block-table { margin-left: 0; margin-right: 0; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--lib-flaeche); }
.entry-content .wp-block-table.is-style-stripes { border-bottom: 0; }
@media (max-width: 768px) {
	.lib-text > table, .entry-content > table { display: block; overflow-x: auto; }
	.entry-content table { font-size: var(--lib-fs-s); }
}

/* Zitate (Links auf Flächen: style.css 8b) */
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; margin-top: var(--lib-a-2); color: var(--lib-tinte); font-size: var(--lib-fs-m); font-style: normal; font-weight: 700; } /* PSD: „- Barbara V“ Bold 17 */
.entry-content blockquote cite::before { content: "- "; }

/* Bildunterschriften: sichtbar, klein, grau (style.css 8); Unterschrift des Beitragsbilds unter dem Bild bzw. im Foto-Kopf. */
.single-post .lib-beitragsbild .lib-bildunterschrift { margin-top: 10px; }

/* Überschriften im Text ohne den grünen 6-px-Strich aus mh-magazine; die Ordnung trägt die Schriftgröße. */

/* =========================================================================
   5. Plugins und Kästen im Text
   ========================================================================= */

/* „Verwandte Artikel“ (Internal Linking Related Contents Pro, Template 4): grün statt rot */
.entry-content .internal-linking-related-contents-pro { margin: 1.5em 0; clear: both; }
.entry-content .internal-linking-related-contents-pro .template-4 {
	display: flex;
	align-items: center;
	gap: var(--lib-a-4);
	min-height: 96px;
	padding: 0;
	border: 1px solid var(--lib-rahmen) !important;
	border-left: 4px solid var(--lib-gruen) !important;
	border-radius: var(--lib-radius-s);
	background: var(--lib-weiss);
	color: var(--lib-tinte);
	text-decoration: none;
	box-shadow: var(--lib-schatten-s);
	transition: box-shadow 0.15s;
}
.entry-content .internal-linking-related-contents-pro .template-4:hover { box-shadow: var(--lib-schatten); }
.entry-content .internal-linking-related-contents-pro .template-4 img {
	flex: 0 0 140px;
	width: 140px;
	max-width: 140px !important; /* Plugin: max-width 50% !important bis 600 px */
	height: 96px;
	max-height: none;
	margin: 0;
	float: none;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}
.entry-content .internal-linking-related-contents-pro .template-4 .postTitle { display: block; max-width: none; padding: var(--lib-a-3) var(--lib-a-4) var(--lib-a-3) 0; }
.entry-content .internal-linking-related-contents-pro .template-4 .postTitle span {
	display: block;
	color: var(--lib-tinte);
	font-size: var(--lib-fs-m);
	font-weight: 600;
	line-height: 1.4;
}
.entry-content .internal-linking-related-contents-pro .template-4 .postTitle strong {
	display: block;
	margin-bottom: 2px;
	color: var(--lib-gruen-text);
	font-size: var(--lib-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.entry-content .internal-linking-related-contents-pro .template-4:hover .postTitle span,
.entry-content .internal-linking-related-contents-pro .template-4:focus .postTitle span { color: var(--lib-gruen-text) !important; text-decoration: underline; }
@media (max-width: 480px) {
	.entry-content .internal-linking-related-contents-pro .template-4 img { flex-basis: 96px; width: 96px; max-width: 96px !important; }
	.entry-content .internal-linking-related-contents-pro .template-4 .postTitle span { font-size: var(--lib-fs-s); }
}

/* Affiliate-Box (Plugin lib-metabox): style.css 8b */

/* E-Book-Kasten [kurebook] und Knopf mks_button: style.css 9 (eine Fassung für Beitrag und Seite) */

/* Shortcodes Ultimate: Rahmen und Knöpfe im Theme-Ton (Plugin setzt Radius und Farben inline, daher !important) */
.entry-content .su-box { border-radius: var(--lib-radius) !important; }
.entry-content .su-button { border-radius: var(--lib-radius-pill) !important; }
.entry-content .su-row { margin-bottom: 1.25em; }

/* Farbboxen .gradient-content-green: style.css 9 (Verlauf und Abstand) */

/* Amazon-Boxen (AAWP): nur Abstand, Optik bleibt beim Plugin */
.entry-content .aawp { margin: 1.75em 0; }

/* =========================================================================
   6. WP Recipe Maker: Rezeptkarte im Design (Druckansicht /wprm_print/ nutzt eigene Vorlage, unberührt)
   ========================================================================= */
.entry-content .wprm-recipe-container { margin: 1.5em 0 2em; }
.entry-content .wprm-recipe-container .wprm-recipe {
	max-width: none;
	margin: 0;
	padding: var(--lib-a-6) var(--lib-a-5);
	color: var(--lib-text);
	border: 1px solid var(--lib-rahmen);
	border-top: 4px solid var(--lib-gruen);
	border-radius: var(--lib-radius);
	background: var(--lib-weiss);
	box-shadow: var(--lib-schatten);
	font-size: var(--lib-fs-m);
	line-height: 1.6;
}
.entry-content .wprm-recipe .wprm-recipe-image img { border-radius: var(--lib-radius); box-shadow: none; }
.entry-content .wprm-recipe .wprm-container-float-left { margin: 0 var(--lib-a-5) var(--lib-a-4) 0; }
.entry-content .wprm-recipe-container .wprm-recipe-name { margin-bottom: 0.3em !important; color: var(--lib-tinte); font-size: var(--lib-fs-2xl); }
.entry-content .wprm-recipe-container a:not(.wprm-recipe-print) { color: var(--lib-gruen-text); }
.entry-content .wprm-recipe-container .wprm-recipe-header {
	margin-top: 1.4em !important;
	margin-bottom: 0.4em !important;
	padding-top: var(--lib-a-4) !important;
	border-top: 1px solid var(--lib-rahmen);
	color: var(--lib-tinte);
	font-size: var(--lib-fs-xl);
}
.entry-content .wprm-recipe .wprm-recipe-summary { color: var(--lib-text); font-style: italic; }
.entry-content .wprm-recipe .wprm-recipe-details-label { margin-right: 6px; color: var(--lib-tinte); font-weight: 600; }
.entry-content .wprm-recipe .wprm-recipe-details-unit { font-size: inherit; }
.entry-content .wprm-recipe .wprm-recipe-details-container { display: flex; flex-wrap: wrap; gap: var(--lib-a-2) var(--lib-a-5); }
.entry-content .wprm-recipe .wprm-recipe-ingredients, .entry-content .wprm-recipe .wprm-recipe-instructions { margin-left: 1.4em; }
.entry-content .wprm-recipe li.wprm-recipe-ingredient::marker, .entry-content .wprm-recipe li.wprm-recipe-instruction::marker { color: var(--lib-gruen-text); }
.entry-content .wprm-recipe .wprm-recipe-ingredient-amount, .entry-content .wprm-recipe .wprm-recipe-ingredient-unit { color: var(--lib-tinte); font-weight: 600; }
.entry-content .wprm-recipe a.wprm-recipe-print {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 22px;
	border: 2px solid var(--lib-gruen-text);
	border-radius: var(--lib-radius-pill);
	color: var(--lib-gruen-text) !important;
	font-size: var(--lib-fs-s);
	font-weight: 600;
	text-decoration: none;
}
.entry-content .wprm-recipe a.wprm-recipe-print:hover, .entry-content .wprm-recipe a.wprm-recipe-print:focus { background: var(--lib-gruen-text); color: var(--lib-weiss) !important; }
.entry-content .wprm-recipe a.wprm-recipe-print svg path, .entry-content .wprm-recipe a.wprm-recipe-print svg g { fill: currentColor; }
.entry-content .wprm-recipe #toc_container { clear: both; }
@media (max-width: 600px) {
	.entry-content .wprm-recipe-container .wprm-recipe { padding: var(--lib-a-5) var(--lib-a-4); }
	.entry-content .wprm-recipe .wprm-container-float-left { float: none; margin: 0 0 var(--lib-a-4); }
}

/* =========================================================================
   7. Nach dem Text: Zeile „Life in Balance | Kategorie | Autor, Datum“ mit Teilen-Icons (PSD), Fuß, Anzeige
   ========================================================================= */
.lib-ende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lib-a-2) var(--lib-a-5);
	margin-top: var(--lib-a-8);
	padding-bottom: var(--lib-a-5);
	border-bottom: 2px solid rgba(205, 207, 207, 0.5); /* PSD „Shape 6“ */
}
.lib-ende__meta { margin: 0; color: #1d1d1d; font-size: var(--lib-fs-m); line-height: 1.5; }
.lib-ende__marke { color: var(--lib-gruen-text); }
.lib-ende__meta a { display: inline-block; padding-block: 11px; padding-block: max(3px, calc((46px - 1lh) / 2)); margin-block: -11px; margin-block: min(-3px, calc((1lh - 46px) / 2)); color: #1d1d1d; text-decoration: none; } /* Trefferfläche 44 px, Zeile bleibt */
.lib-ende__meta a:hover, .lib-ende__meta a:focus { color: var(--lib-gruen-text); text-decoration: underline; }
.lib-ende__trenner { color: var(--lib-meta); }

.lib-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lib-a-2) var(--lib-a-3); }
.lib-teilen__titel { margin: 0; color: var(--lib-tinte); font-size: var(--lib-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lib-teilen__liste { display: flex; gap: var(--lib-a-1); margin: 0; padding: 0; list-style: none; }
.lib-teilen__liste li { margin: 0; }
.lib-teilen__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--lib-rahmen);
	border-radius: 50%;
	color: var(--lib-gruen-text);
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.lib-teilen__link:hover, .lib-teilen__link:focus { background: var(--lib-gruen-text); border-color: var(--lib-gruen-text); color: var(--lib-weiss); }

.single-post footer.entry-meta { margin-top: var(--lib-a-5); padding-top: 0; border-top: 0; }
.single-post footer.entry-meta .gp-icon { color: var(--lib-gruen-text); margin-right: 6px; }
.single-post footer.entry-meta .cat-links, .single-post footer.entry-meta .tags-links { display: block; margin-bottom: var(--lib-a-2); }
.single-post .post-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lib-a-4); margin-top: var(--lib-a-5); }
.single-post .post-navigation .nav-previous, .single-post .post-navigation .nav-next {
	display: flex;
	align-items: flex-start;
	gap: var(--lib-a-2);
	padding: var(--lib-a-4);
	border: 1px solid var(--lib-rahmen);
	border-radius: var(--lib-radius-s);
	font-size: var(--lib-fs-m);
	line-height: 1.4;
}
.single-post .post-navigation .nav-next { grid-column: 2; justify-content: flex-end; text-align: right; }
.single-post .post-navigation .nav-next .gp-icon { order: 2; }
.single-post .post-navigation a { color: var(--lib-tinte); font-weight: 500; text-decoration: none; }
.single-post .post-navigation a:hover, .single-post .post-navigation a:focus { color: var(--lib-gruen-text); text-decoration: underline; }
.single-post .post-navigation .gp-icon { flex: 0 0 auto; margin-top: 3px; color: var(--lib-gruen-text); }
@media (max-width: 600px) {
	.single-post .post-navigation { grid-template-columns: minmax(0, 1fr); }
	.single-post .post-navigation .nav-next { grid-column: 1; }
	.lib-ende { align-items: flex-start; flex-direction: column; }
}

.lib-beitrag-anzeige { max-width: 730px; margin-top: var(--lib-a-7); }
.lib-beitrag-anzeige .lib-box { max-width: 348px; margin: 0; }

/* =========================================================================
   7a. Kartenreihen „Weitere Beiträge aus …“ und „Neueste Beiträge“ (PSD „Today’s top picks“/„Featured Articles“):
       Titel 40 Medium, je 3 Karten (Bild 135 x 94 Radius 10, Titel 16/26 Medium, Meta 14), senkrechte Trennlinien,
       Linie zwischen den Reihen, Pfeile 48 px weiß mit Schatten außerhalb des Containers (Seite ab 1250 px ohne
       Scrollleiste), sonst unter der Reihe rechts. CSS-Scroll-Snap, ohne Bibliothek; Pfeile per beitrag.js (ohne Skript
       verborgen).
   ========================================================================= */
.lib-beitrag-reihen { margin-top: var(--lib-a-8); }
.lib-reihe { padding: var(--lib-a-7) 0 var(--lib-a-6); border-top: 2px solid rgba(205, 207, 207, 0.5); }
.lib-reihe .lib-titel { margin-bottom: var(--lib-a-6); }
.lib-reihe .lib-titel__text { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); font-weight: 500; color: #000; }
.lib-reihe__rahmen { position: relative; }
.lib-reihe__liste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--lib-a-6)) / 3);
	gap: var(--lib-a-6);
	margin: 0;
	padding: 4px 0 12px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: none;
}
.lib-reihe__liste::-webkit-scrollbar { display: none; }
.lib-reihe__eintrag { position: relative; margin: 0; scroll-snap-align: start; }
/* senkrechte Trennlinie rechts neben jeder Karte (PSD „Shape 2“, #bebdbd 55 %) */
.lib-reihe__eintrag + .lib-reihe__eintrag::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--lib-a-6) / 2);
	width: 1px;
	background: rgba(190, 189, 189, 0.55);
}
.lib-reihe .lib-karte--klein { gap: 20px; padding-bottom: 0; border-bottom: 0; }
.lib-reihe .lib-karte--klein .lib-karte__bild { width: 135px; aspect-ratio: 135 / 94; } /* PSD 135 x 94, Radius 10 */
.lib-reihe .lib-karte__titel { font-size: var(--lib-fs-m); line-height: 1.625; } /* 16/26 */
.lib-reihe .lib-karte__titeltext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lib-reihe .lib-meta { font-size: var(--lib-fs-s); }
.lib-reihe__alle { margin: calc(-1 * var(--lib-a-2)) 0 var(--lib-a-6); }

.lib-reihe__pfeil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lib-weiss);
	color: var(--lib-gruen-text);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.lib-reihe__pfeil:hover:not([aria-disabled="true"]), .lib-reihe__pfeil:focus-visible { background: var(--lib-gruen-text); color: var(--lib-weiss); }
.lib-reihe__pfeil[aria-disabled="true"] { color: rgba(0, 0, 0, 0.45); cursor: default; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.lib-reihe__pfeil .lib-icon { width: 22px; height: 22px; }
/* Schmale Seite: Pfeile unter der Reihe rechts */
.lib-reihe__rahmen { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--lib-a-3) var(--lib-a-2); }
.lib-reihe__liste { grid-column: 1 / -1; }
.lib-reihe__pfeil--zurueck { grid-column: 2; }
.lib-reihe__pfeil--weiter { grid-column: 3; }
/* Pfeile links und rechts außerhalb des Containers, mittig zur Reihe (PSD: 59 px Abstand, also 107 px vor der Kante).
   Gefragt wird die Seitenbreite ohne Scrollleiste (Container lib-seite = body), nicht 100vw: mit klassischer
   Scrollleiste ragten die Pfeile sonst aus dem Fenster. Der Abstand schrumpft mit dem freien Rand ((100cqw - 100%) / 2,
   100% = Reihe), bleibt aber mindestens 8 px vom Fensterrand; ab 1250 px sind es mindestens 59 px vor der Kante
   (11 px Luft zur Karte). Ohne Container-Abfragen bleiben die Pfeile unter der Reihe. */
@container lib-seite (min-width: 1250px) {
	.lib-reihe__rahmen { display: block; }
	.lib-reihe__pfeil { position: absolute; top: calc(50% - 24px - 4px); }
	.lib-reihe__pfeil--zurueck { left: calc(-1 * min(107px, (100cqw - 100%) / 2 - var(--lib-a-2))); }
	.lib-reihe__pfeil--weiter { right: calc(-1 * min(107px, (100cqw - 100%) / 2 - var(--lib-a-2))); }
}
@media (max-width: 1024px) {
	.lib-reihe__liste { grid-auto-columns: calc((100% - var(--lib-a-6)) / 2); }
}
@media (max-width: 640px) {
	.lib-reihe__liste { grid-auto-columns: 86%; gap: var(--lib-a-5); }
	.lib-reihe__eintrag + .lib-reihe__eintrag::before { left: calc(-1 * var(--lib-a-5) / 2); }
	.lib-reihe .lib-karte--klein .lib-karte__bild { width: 104px; }
}
@media (prefers-reduced-motion: no-preference) {
	.lib-reihe__liste { scroll-behavior: smooth; }
}

/* =========================================================================
   8. Druck: nur Titel und Text
   ========================================================================= */
@media print {
	.lib-topbar, .site-header, .lib-pinsel, .lib-teilen, .lib-beitrag-anzeige, .lib-beitrag-reihen, #toc_container,
	.internal-linking-related-contents-pro, .post-navigation, .site-footer, .cmplz-cookiebanner { display: none !important; }
	.lib-kopf .lib-meta { color: #000; }
	.lib-kopf .lib-pill { padding: 0; background: none; color: #000; }
	.single-post .inside-article { display: block; margin-left: 0; }
	.single-post .entry-content { display: block !important; }
	.entry-content img { box-shadow: none !important; }
}

/* Inhaltsverzeichnis breiter am Desktop (Joel 20.10.2026): ab 1280 px 250 statt 190 px, ab 1440 px 270 px. */
@media (min-width: 1280px) { .single-post .inside-article { --lib-toc-b: 250px; } }
@media (min-width: 1440px) { .single-post .inside-article { --lib-toc-b: 270px; } }