/* ==========================================================================
   Komm ins Bauchgefühl — blog.css
   Blog-Übersicht, Kategorie-Archive, Suche, Einzelbeitrag, Beitragskarten.
   Vorlage: design-referenz/screens/blog.js (Blog, Beitrag) + components/content/PostCard.jsx.
   Funktionen (Kategorie-Label, Filter, „Auch aus der Praxis“) stehen in inc/blog.php.
   Marke: keine Schatten, keine Verläufe; Trennung über Fläche und 1-px-Kante.
   Laden (functions.php, kib_css_bedingungen): Auf der Website nur, wenn eine dieser Klassen im gerenderten
   HTML steht (Teilwort genügt, z. B. kib-beitragskarte-titel). Jede Regel unten braucht eine davon; neue
   Regeln mit anderer Wurzelklasse hier ergänzen. Im Editor lädt die Datei immer.
   kib-laden-wenn: kib-beitrag kib-blog-filter kib-blog-liste-sektion kib-blog-kopf kib-deine-geschichte-reihe kib-kategorie-tag kib-seitenzahlen kib-weiterlesen
   ========================================================================== */

/* 1 · Beitragskarte (PostCard) ------------------------------------------- */
/* Karte = Gruppe „kib-beitragskarte“ in einer Abfrage-Schleife. Ganze Fläche klickbar über den Titel-Link. */

.wp-block-post-template > li:has(> .kib-beitragskarte) {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wp-block-group.kib-beitragskarte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--kib-kante);
	border-radius: var(--kib-radius);
	background-color: var(--kib-kalkweiss);
	color: var(--kib-tinte);
	transition: border-color var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-group.kib-beitragskarte > *,
.kib-beitragskarte .kib-beitragskarte-text > *,
.kib-beitragskarte .kib-beitragskarte-meta > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-group.kib-beitragskarte:hover {
	border-color: var(--kib-weg-linie);
}

/* Bild 3:2, Radius 16 (Fläche Sand, falls das Bild noch lädt).
   Breite/Höhe mit !important: Ersatzbilder aus dem Inhalt (ohne Beitragsbild) können Inline-Maße mitbringen
   (z. B. das 88-px-Porträt im Kontaktband) — die Karte bleibt trotzdem 3:2 (inc/blog.php sortiert solche Bilder aus). */
.kib-beitragskarte .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--kib-radius);
	background-color: var(--kib-sand);
}

.kib-beitragskarte .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--kib-radius);
}

.kib-beitragskarte .kib-beitragskarte-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.kib-beitragskarte .kib-kategorie-tag {
	align-self: flex-start;
}

/* Titel H3 (Kellerbraun, nie in Bereichsfarbe) */
.kib-beitragskarte .kib-beitragskarte-titel {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 2rem;
	color: var(--kib-kellerbraun);
	overflow-wrap: break-word;
}

.kib-beitragskarte .kib-beitragskarte-titel a {
	color: var(--kib-kellerbraun);
	text-decoration: none;
}

.kib-beitragskarte .kib-beitragskarte-titel a:hover {
	color: var(--kib-kellerbraun);
	text-decoration: none;
}

/* Handy: Die 44-px-Mindesthöhe für Links (basis.css) braucht der Titel-Link nicht — Tippfläche ist die ganze
   Karte (a::after). Sonst wäre ein einzeiliger Titel 44 statt 32 px hoch (Abstand zum Anriss 28 statt 16 px). */
@media (max-width: 560px) {
	.kib-beitragskarte .kib-beitragskarte-titel a {
		min-height: 0;
	}
}

/* Ganze Karte klickbar: der Titel-Link spannt sich über die Karte */
.kib-beitragskarte .kib-beitragskarte-titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--kib-radius);
}

/* Fokus (Tastatur): der Titel-Link behält den sichtbaren Fokus-Ring der Website (basis.css: 2 px, 3 px Abstand) —
   bewusst kein „outline: none“, damit der Fokus auch ohne :has() und in jeder Umgebung sichtbar bleibt.
   Zusätzlich reagiert die Karte wie beim Hover (Kante, Pfeil). */
body:not(.editor-styles-wrapper) .kib-beitragskarte .kib-beitragskarte-titel a:focus-visible {
	outline: var(--kib-fokus-breite) solid var(--kib-fokus-farbe);
	outline-offset: var(--kib-fokus-abstand);
}

body:not(.editor-styles-wrapper) .wp-block-group.kib-beitragskarte:has(.kib-beitragskarte-titel a:focus-visible) {
	border-color: var(--kib-weg-linie);
}

body:not(.editor-styles-wrapper) .wp-block-group.kib-beitragskarte:has(.kib-beitragskarte-titel a:focus-visible) .kib-lesen::after {
	transform: translateX(2px);
}

/* Anriss: Body 17/30, max. 60 Zeichen */
.kib-beitragskarte .kib-beitragskarte-anriss,
.kib-beitragskarte .kib-beitragskarte-anriss p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.875rem;
	color: var(--kib-tinte);
	max-width: var(--kib-mass-eng);
}

/* Meta: Datum · Lesezeit · „Lesen →“ (unten bündig) */
.kib-beitragskarte .kib-beitragskarte-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: auto;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem;
	color: var(--kib-kellerbraun-hell);
}

.kib-beitragskarte .kib-beitragskarte-meta .wp-block-post-date,
.kib-beitragskarte .kib-beitragskarte-meta .wp-block-post-time-to-read {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.kib-beitragskarte .kib-beitragskarte-meta .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* „Lesen →“: Textlink-Optik (Kleks), Unterstrich 1 px / 6 px, Pfeil schiebt sich beim Hover */
.kib-beitragskarte .kib-lesen {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	color: var(--kib-kleks);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	white-space: nowrap;
}

.kib-beitragskarte .kib-lesen::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../img/icons/arrow-right.svg) center / contain no-repeat;
	transition: transform var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-group.kib-beitragskarte:hover .kib-lesen {
	text-decoration-thickness: 1.5px;
}

.wp-block-group.kib-beitragskarte:hover .kib-lesen::after {
	transform: translateX(2px);
}

/* Seiten in den Suchergebnissen: kein Datum, keine Lesezeit */
.wp-block-post.type-page .kib-beitragskarte-meta :is(.wp-block-post-date, .wp-block-post-time-to-read) {
	display: none;
}

/* Im Editor: Klicks nicht abfangen (Blöcke bleiben auswählbar), kein „Weiterlesen“-Feld im Anriss
   (in den Karten übernimmt „Lesen →“ diese Rolle) */
.editor-styles-wrapper .kib-beitragskarte .kib-beitragskarte-titel a::after {
	content: none;
}

.editor-styles-wrapper .kib-beitragskarte .kib-beitragskarte-anriss .wp-block-post-excerpt__more-link,
.editor-styles-wrapper .kib-beitragskarte .kib-beitragskarte-anriss .wp-block-post-excerpt__more-text {
	display: none;
}

/* Im Editor wie auf der Website: Beiträge ohne Bild zeigen in der Karte kein Bild (statt der grauen Bildfläche
   von WordPress). Das Beitragsbild setzt Jana im Beitrag selbst (Seitenleiste → Beitragsbild). */
.editor-styles-wrapper .kib-beitragskarte .wp-block-post-featured-image:has(> .components-placeholder) {
	display: none;
}

/* Im Editor erscheint der Text für „keine Beiträge“ immer unter den Karten — kenntlich machen, dass Besucher ihn
   nur bei leerer Liste sehen. */
.editor-styles-wrapper .wp-block-query-no-results {
	padding: 12px 16px;
	border: 1px dashed var(--kib-kante);
	border-radius: var(--kib-radius);
}

.editor-styles-wrapper .wp-block-query-no-results::before {
	content: "Nur sichtbar, wenn es keine Beiträge gibt";
	display: block;
	margin-bottom: 8px;
	color: var(--kib-kellerbraun-hell);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Sektionen mit „kib-ausblenden-ohne-beitraege“ (z. B. „Aus der Praxis“) verschwinden auf der Website, solange
   ihre Abfrage leer ist — im Editor bleiben sie sichtbar, mit einem kleinen Hinweis oben links. */
.editor-styles-wrapper .wp-block-group.kib-ausblenden-ohne-beitraege {
	position: relative;
}

.editor-styles-wrapper .wp-block-group.kib-ausblenden-ohne-beitraege::before {
	content: "Ohne passende Beiträge auf der Website ausgeblendet";
	position: absolute;
	top: 16px;
	left: var(--wp--style--root--padding-left, 24px);
	z-index: 1;
	padding: 4px 10px;
	border: 1px dashed var(--kib-kante);
	border-radius: var(--kib-radius-pill);
	background-color: var(--kib-kalkweiss);
	color: var(--kib-kellerbraun-hell);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	pointer-events: none;
}

/* 2 · Große Karte (erster Beitrag auf Seite 1) ---------------------------- */
/* Bild 44 % links, Titel H2, Fläche Sand; ≤ 760 px untereinander. Nicht auf Seite 2, 3 … (body.paged). */

body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child {
	grid-column: 1 / -1;
	margin-bottom: 24px;
}

body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child > .kib-beitragskarte {
	flex-direction: row;
	align-items: center;
	gap: 48px;
	background-color: var(--kib-sand);
	border-color: var(--kib-sand-tief);
}

body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child > .kib-beitragskarte:hover {
	border-color: var(--kib-weg-linie);
}

body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child > .kib-beitragskarte > .wp-block-post-featured-image {
	flex: 0 0 44%;
	min-width: 0;
	background-color: var(--kib-sand-tief);
}

body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child .kib-beitragskarte-titel {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.25;
}

@media (max-width: 760px) {
	body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child > .kib-beitragskarte {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	body:not(.paged) .kib-beitragsliste .wp-block-post-template > li:first-child > .kib-beitragskarte > .wp-block-post-featured-image {
		flex: none;
	}
}

/* 3 · Kategorie-Label (core/post-terms + kib-kategorie-tag) --------------- */
/* Pill-Optik aus bausteine.css (.is-style-tag + tag-*); hier nur Hülle, Links und Editor-Ansicht. */

.wp-block-post-terms.kib-kategorie-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}

.kib-kategorie-tag a.is-style-tag {
	text-decoration: none;
}

.kib-kategorie-tag a.is-style-tag:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Im Editor zeigt WordPress alle Kategorien als Links: jede als eigene Pill, ohne Komma */
.editor-styles-wrapper .wp-block-post-terms.kib-kategorie-tag a {
	display: inline-block;
	padding: 7px 12px 6px;
	border-radius: var(--kib-radius-pill);
	background-color: var(--kib-salbei-schleier);
	color: var(--kib-salbei-tief);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.editor-styles-wrapper .wp-block-post-terms.kib-kategorie-tag .wp-block-post-terms__separator {
	display: none;
}

/* Wie auf der Website (inc/blog.php) nur EIN Label: die Hauptkategorie Autismus | Körperarbeit | Gedanken in ihrer
   Farbe; ohne Hauptkategorie die erste Kategorie. (Erkennung über die Adresse /category/<slug>/.) */
.editor-styles-wrapper .wp-block-post-terms.kib-kategorie-tag:has(a[href*="/category/autismus/"], a[href*="/category/koerperarbeit/"], a[href*="/category/gedanken/"]) a:not([href*="/category/autismus/"], [href*="/category/koerperarbeit/"], [href*="/category/gedanken/"]),
.editor-styles-wrapper .wp-block-post-terms.kib-kategorie-tag:not(:has(a[href*="/category/autismus/"], a[href*="/category/koerperarbeit/"], a[href*="/category/gedanken/"])) a ~ a {
	display: none;
}

.editor-styles-wrapper .wp-block-post-terms.kib-kategorie-tag a[href*="/category/autismus/"] {
	background-color: var(--kib-kleks-schleier);
	color: var(--kib-kleks-tief);
}

.editor-styles-wrapper .wp-block-post-terms.kib-kategorie-tag a[href*="/category/gedanken/"] {
	background-color: var(--kib-ocker-schleier);
	color: var(--kib-kellerbraun);
}

/* 4 · Blog-Kopf und Filter ----------------------------------------------- */

.kib-blog-filter .kib-blog-filter-liste,
.kib-blog-filter-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kib-blog-filter-liste > li {
	margin: 0;
	padding: 0;
}

.kib-blog-filter-liste > li::marker {
	content: none;
}

.kib-blog-filter a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 1px solid var(--kib-kante);
	border-radius: var(--kib-radius-pill);
	background-color: transparent;
	color: var(--kib-tinte);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.kib-blog-filter a:hover {
	border-color: var(--kib-kellerbraun);
	color: var(--kib-kellerbraun);
	text-decoration: none;
}

.kib-blog-filter a:is([aria-current="page"], .ist-aktiv),
.kib-blog-filter a:is([aria-current="page"], .ist-aktiv):hover {
	border-color: var(--kib-kellerbraun);
	background-color: var(--kib-kellerbraun);
	color: var(--kib-kalkweiss);
	font-weight: 600;
}

/* Touch-Geräte jeder Breite (Tablet): Filter-Knöpfe mindestens 44 px hoch (Handy ≤ 560 px regelt basis.css) */
@media (pointer: coarse) {
	.kib-blog-filter a {
		min-height: 44px;
	}
}

/* Kategorie-Beschreibung als Einleitung */
.wp-block-term-description.is-style-lead p {
	margin: 0;
	max-width: var(--kib-mass);
}

.wp-block-term-description.is-style-lead p + p {
	margin-top: 16px;
}

/* 5 · Liste, leerer Zustand, Seitenzahlen ------------------------------- */

.kib-blog-liste-sektion .wp-block-query > .wp-block-post-template {
	margin-top: 0;
}

.kib-blog-liste-sektion .wp-block-query-no-results > :first-child {
	margin-block-start: 0;
}

.kib-blog-liste-sektion .wp-block-query-no-results > * + * {
	margin-block-start: 24px;
}

.wp-block-query-pagination.kib-seitenzahlen {
	margin-top: 64px;
	gap: 16px 24px;
	align-items: center;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	font-weight: 600;
}

/* Feste Ordnung auf jeder Seite: Zahlen links, „Neuere“/„Ältere“ rechts daneben (im Template stehen die Zahlen
   zuerst und das Layout ist linksbündig, damit Tab-Reihenfolge und Anblick gleich sind). Handy: Zahlen in eigener
   Zeile, darunter „Neuere“ links und „Ältere“ rechts. */
.kib-seitenzahlen .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 auto 0 0;
}

@media (max-width: 560px) {
	.kib-seitenzahlen .wp-block-query-pagination-numbers {
		flex: 1 0 100%;
	}

	.wp-block-query-pagination.kib-seitenzahlen > .wp-block-query-pagination-next {
		margin-left: auto;
	}
}

.kib-seitenzahlen .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--kib-kante);
	border-radius: var(--kib-radius-pill);
	color: var(--kib-tinte);
	font-weight: 500;
	text-decoration: none;
}

.kib-seitenzahlen a.page-numbers:hover {
	border-color: var(--kib-kellerbraun);
	color: var(--kib-kellerbraun);
}

.kib-seitenzahlen .page-numbers.current {
	border-color: var(--kib-kellerbraun);
	background-color: var(--kib-kellerbraun);
	color: var(--kib-kalkweiss);
	font-weight: 600;
}

.kib-seitenzahlen .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border-color: transparent;
}

/* Vor/Zurück: Textlink-Optik mit Pfeil */
.kib-seitenzahlen :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	color: var(--kib-kleks);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.kib-seitenzahlen :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	color: var(--kib-kleks-tief);
	text-decoration-thickness: 1.5px;
}

.kib-seitenzahlen .wp-block-query-pagination-previous::before,
.kib-seitenzahlen .wp-block-query-pagination-next::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/arrow-left.svg) center / contain no-repeat;
	mask: url(../img/icons/arrow-left.svg) center / contain no-repeat;
	transition: transform var(--kib-dauer-schnell) var(--kib-easing);
}

.kib-seitenzahlen .wp-block-query-pagination-next::after {
	-webkit-mask-image: url(../img/icons/arrow-right.svg);
	mask-image: url(../img/icons/arrow-right.svg);
}

.kib-seitenzahlen .wp-block-query-pagination-previous:hover::before {
	transform: translateX(-2px);
}

.kib-seitenzahlen .wp-block-query-pagination-next:hover::after {
	transform: translateX(2px);
}

/* Die Pfeile von WordPress selbst (falls im Editor eingeschaltet) nicht doppelt zeigen */
.kib-seitenzahlen :is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
	display: none;
}

/* 6 · Einzelbeitrag ------------------------------------------------------- */

/* Meta unter dem Titel: Datum · Lesezeit (Small, leise) */
.wp-block-group.kib-beitrag-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem;
	color: var(--kib-kellerbraun-hell);
}

.wp-block-group.kib-beitrag-meta > * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Abstand Unterstreichung → Meta wie im Entwurf (24 px) */
.kib-beitrag-kopf .wp-block-post-title + .kib-beitrag-meta {
	margin-block-start: 24px;
}

/* Band-Bild 21:9, Radius 24 */
.kib-beitrag-bild .wp-block-post-featured-image {
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	border-radius: var(--kib-radius-gross);
	background-color: var(--kib-sand);
}

.kib-beitrag-bild .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--kib-radius-gross);
}

/* Lesespalte 720 px (theme.json contentSize), linksbündig unter dem Titel.
   Gute Typografie für Janas Beiträge: Absätze, Zwischenüberschriften, Listen, Zitate, Bilder. */
.kib-beitrag-inhalt {
	color: var(--kib-tinte);
}

/* Erster Absatz als Einleitung (wie im Entwurf), solange Jana keine eigene Größe gewählt hat */
.kib-beitrag-inhalt > p:first-child:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 2rem;
	color: var(--kib-kellerbraun);
}

.kib-beitrag-inhalt > :is(h2, h3, h4, h5, h6) {
	margin-block-start: 56px;
}

.kib-beitrag-inhalt > h2 {
	margin-block-start: 64px;
}

.kib-beitrag-inhalt > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 16px;
}

.kib-beitrag-inhalt > :is(h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

.kib-beitrag-inhalt :is(ul, ol):not([class*="is-style-"]) {
	padding-left: 1.4em;
}

.kib-beitrag-inhalt :is(ul, ol):not([class*="is-style-"]) > li + li {
	margin-top: 8px;
}

.kib-beitrag-inhalt :is(ul, ol) ul,
.kib-beitrag-inhalt :is(ul, ol) ol {
	margin-top: 8px;
}

/* Zitat ohne eigenen Stil wie „Zitat zwischen Linien“ (Entwurf) */
.kib-beitrag-inhalt .wp-block-quote:not([class*="is-style-"]) {
	padding: 32px 0;
	border-top: 1px solid var(--kib-akzent);
	border-bottom: 1px solid var(--kib-akzent);
}

.kib-beitrag-inhalt .wp-block-quote:not([class*="is-style-"]) > p {
	max-width: 34ch;
}

.kib-beitrag-inhalt > .wp-block-quote,
.kib-beitrag-inhalt > .wp-block-pullquote {
	margin-block-start: 36px;
}

.kib-beitrag-inhalt > .wp-block-quote + *,
.kib-beitrag-inhalt > .wp-block-pullquote + * {
	margin-block-start: 36px;
}

/* Bilder im Text: Radius 16, Bildunterschrift Small leise */
.kib-beitrag-inhalt .wp-block-image img {
	border-radius: var(--kib-radius);
}

.kib-beitrag-inhalt > :is(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed) {
	margin-block-start: 40px;
}

.kib-beitrag-inhalt > :is(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed) + * {
	margin-block-start: 40px;
}

.kib-beitrag-inhalt figcaption,
.kib-beitrag-inhalt .wp-element-caption {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem;
	color: var(--kib-kellerbraun-hell);
	text-align: left;
}

/* Übernommene Altbeiträge färben einzelne Buchstaben mit reinem Rot (#ff0000, Inline-Stil aus dem alten Editor).
   Auf der Website in Kleks-Rot der Marke zeigen — Text und Inhalt bleiben unverändert. */
.kib-beitrag-inhalt :is([style*="color: #ff0000" i], [style*="color:#ff0000" i], [style*="color: #f00;" i], [style*="color: rgb(255, 0, 0)"]) {
	color: var(--kib-kleks) !important;
}

/* Hinweis-Karte am Ende („Veröffentlicht mit Einverständnis …“) */
.kib-beitrag-inhalt > .is-style-karte-schleier {
	margin-block-start: 40px;
}

/* Platzhalter (nur angemeldet sichtbar) mit etwas Luft */
.kib-beitrag-inhalt > .is-style-platzhalter + * {
	margin-block-start: 32px;
}

/* Block-Editor (Beitrag bearbeiten): Titel und Text wie auf der Website — linksbündig in der Inhaltsbreite.
   Greift nur, wenn das Template den Inhalt „breit + linksbündig“ setzt (single.html). */
.editor-styles-wrapper .is-root-container.wp-block-post-content.alignwide.is-content-justification-left,
.editor-styles-wrapper:has(.is-root-container.wp-block-post-content.alignwide.is-content-justification-left) .editor-visual-editor__post-title-wrapper {
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size, 1064px) + var(--wp--style--root--padding-left, 48px) + var(--wp--style--root--padding-right, 48px));
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper:has(.is-root-container.wp-block-post-content.alignwide.is-content-justification-left) .editor-visual-editor__post-title-wrapper > .wp-block-post-title {
	max-width: 26ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* „Auch aus der Praxis“ (Sand) direkt vor dem Kontaktband (Sand): feine Kante statt einer endlosen Sandfläche */
.kib-weiterlesen.has-sand-background-color + .kib-sektion.has-sand-background-color {
	border-top: 1px solid var(--kib-sand-tief);
}

/* 7 · „Deine Geschichte“ ------------------------------------------------- */

.kib-deine-geschichte-reihe > .kib-max-46ch {
	flex: 0 1 46ch;
	min-width: 0;
}

.kib-deine-geschichte-reihe .wp-block-buttons {
	margin: 0;
}

@media (max-width: 560px) {
	.kib-deine-geschichte-reihe > .kib-max-46ch {
		flex-basis: 100%;
	}
}