/* ==========================================================================
   Komm ins Bauchgefühl — bausteine.css
   Block-Styles (is-style-<name>, registriert in inc/block-styles.php) und
   Zusatzklassen für Buttons, nach design-referenz/components/*.jsx.
   Kleks und Linien als CSS-Masken: Farbe kommt aus background-color.
   Schriftgrößen und Zeilenhöhen in rem (16 px Grundschrift = Entwurf; eine größere
   Browser-Schriftgröße vergrößert Text und Zeilenabstand gemeinsam). Abstände bleiben px.
   ========================================================================== */

/* 1 · Kicker, Labels ----------------------------------------------------- */

.is-style-kicker,
.is-style-kicker-schlicht,
.is-style-kicker-leise {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.8125rem; /* 13px */
	line-height: 1rem; /* 16px */
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	max-width: none;
}

/* Kicker mit Kleks (11 px, Bereichsfarbe, im Bereich Körperarbeit 140° gedreht) */
.is-style-kicker {
	position: relative;
	padding-left: 20px;
	color: var(--kib-akzent-text);
}

.is-style-kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - 5.5px);
	width: 11px;
	height: 11px;
	background-color: var(--kib-akzent);
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	transform: rotate(var(--kib-kleks-drehung, 0deg));
}

/* Kicker schlicht: Standard-Kicker der Sektionsköpfe (Salbei tief, ohne Kleks) */
.is-style-kicker-schlicht {
	color: var(--kib-salbei-tief);
}

/* Kicker leise: „Der übliche Weg“ */
.is-style-kicker-leise {
	color: var(--kib-kellerbraun-hell);
}

/* Label in Bereichsfarbe ohne Kleks („RAHMEN“, „KURZ GESAGT“): kicker-schlicht + kib-text-akzent */
:is(.is-style-kicker-schlicht, .is-style-kicker-leise).kib-text-akzent {
	color: var(--kib-akzent-text);
}

/* Abstand Kicker → Überschrift: 16 px */
:is(.is-style-kicker, .is-style-kicker-schlicht, .is-style-kicker-leise) + :is(h1, h2, h3, h4, .wp-block-heading, .wp-block-post-title, .wp-block-query-title) {
	margin-block-start: 16px;
}

/* Auf Dunkel: Kicker in Ocker */
:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) :is(.is-style-kicker, .is-style-kicker-schlicht) {
	color: var(--kib-ocker);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-kicker::before {
	background-color: var(--kib-ocker);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-kicker-leise {
	color: var(--kib-invers-leise);
}

/* 2 · Überschriften ------------------------------------------------------ */

/* Handgeführte Unterstreichung 124 × 8 px, 18 px unter der Schrift, in Bereichsfarbe */
.is-style-unterstrichen::after {
	content: "";
	display: block;
	width: 124px;
	max-width: 100%;
	height: 8px;
	margin-top: 18px;
	background-color: var(--kib-akzent-linie);
	-webkit-mask: url(../img/weg-unterstreichung.svg) 0 0 / 124px 8px no-repeat;
	mask: url(../img/weg-unterstreichung.svg) 0 0 / 124px 8px no-repeat;
}

.has-text-align-center.is-style-unterstrichen::after {
	margin-left: auto;
	margin-right: auto;
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-unterstrichen::after {
	background-color: var(--kib-invers-linie);
}

/* Display: Dachmarke (Startseite-H1) */
.is-style-display {
	font-variation-settings: var(--kib-fraunces-display);
	font-weight: 400;
	letter-spacing: -0.015em;
}

/* Fraunces klein: Vita-Titel */
.is-style-fraunces-klein {
	font-variation-settings: var(--kib-fraunces-klein);
}

/* 3 · Absätze ------------------------------------------------------------- */

/* Lead 20/32, Kellerbraun hell */
.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 2rem; /* 32px */
	color: var(--kib-kellerbraun-hell);
	max-width: var(--kib-mass);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-lead {
	color: var(--kib-invers-leise);
}

/* Slogan: Fraunces kursiv in H3-Größe, Kleks-Rot, Laufweite normal (Entwurf startseite.js: ohne letterSpacing) */
.is-style-slogan {
	font-family: var(--wp--preset--font-family--serif);
	font-variation-settings: var(--kib-fraunces-heading);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 2rem; /* 32px */
	letter-spacing: normal;
	color: var(--kib-kleks);
	max-width: 32ch;
	text-wrap: balance;
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-slogan {
	color: var(--kib-ocker);
}

/* Kosten-Label: Pill in Bereichs-Schleier, Kleks 10 px */
.is-style-kosten {
	display: block;
	position: relative;
	width: fit-content;
	max-width: 100%;
	padding: 7px 14px 7px 34px;
	border-radius: var(--kib-radius-pill);
	background-color: var(--kib-akzent-schleier);
	color: var(--kib-tinte);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.9375rem; /* 15px */
	line-height: 1.25rem; /* 20px */
}

.is-style-kosten::before {
	content: "";
	position: absolute;
	left: 12px;
	top: calc(50% - 5px);
	width: 10px;
	height: 10px;
	background-color: var(--kib-akzent);
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

/* Kategorie-Label (Tag): Pill 13/16, 600, Versalien. Farbe über tag-autismus | tag-koerper | tag-gedanken | tag-bereich | tag-sand */
.is-style-tag {
	display: block;
	width: fit-content;
	max-width: 100%;
	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: 0.8125rem; /* 13px */
	line-height: 1rem; /* 16px */
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.is-style-tag a {
	color: inherit;
	text-decoration: none;
}

.is-style-tag.tag-autismus,
.tag-autismus .is-style-tag {
	background-color: var(--kib-kleks-schleier);
	color: var(--kib-kleks-tief);
}

.is-style-tag.tag-koerper,
.tag-koerper .is-style-tag {
	background-color: var(--kib-salbei-schleier);
	color: var(--kib-salbei-tief);
}

.is-style-tag.tag-gedanken,
.tag-gedanken .is-style-tag {
	background-color: var(--kib-ocker-schleier);
	color: var(--kib-kellerbraun);
}

.is-style-tag.tag-bereich {
	background-color: var(--kib-akzent-schleier);
	color: var(--kib-akzent-tief);
}

.is-style-tag.tag-sand {
	background-color: var(--kib-sand);
	color: var(--kib-kellerbraun-hell);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-tag:not([class*="tag-"]) {
	background-color: var(--kib-invers-flaeche);
	color: var(--kib-kalkweiss);
}

/* Zurück-Link: „← Startseite“ (Small, leise, Pfeil links). Höhe wie im Entwurf 18 px
   (Button mit Zeilenhöhe normal); der Link sitzt oben in der Zeile, damit keine Grundlinien-Lücke
   entsteht. ≤ 560 px macht basis.css den Link 44 px hoch (Tippfläche), der Absatz wächst mit. */
.is-style-zurueck {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.125rem; /* 18px */
	color: var(--kib-kellerbraun-hell);
}

.is-style-zurueck a {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.is-style-zurueck a::before {
	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);
}

.is-style-zurueck a:hover {
	color: var(--kib-kellerbraun);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.is-style-zurueck a:hover::before {
	transform: translateX(-2px);
}

/* 4 · Listen ------------------------------------------------------------- */

/* Kleks-Aufzählung: 12 px, ohne Kern, Drehung je Zeile, 16 px Abstand, 1-px-Linie */
:is(ul, ol):is(.is-style-kleks, .is-style-kleks-ohne-linie) {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li {
	position: relative;
	padding-left: 28px;
	line-height: 1.875rem; /* 30px */
}

:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li + li {
	margin-top: 16px;
}

.is-style-kleks > li + li {
	padding-top: 16px;
	border-top: 1px solid var(--kib-kante);
}

/* Kleks 2 px über der Mitte der ersten Zeile: halbe Zeilenhöhe − 6 px (halber Kleks) − 2 px = 7 px */
:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.9375rem - 8px);
	width: 12px;
	height: 12px;
	background-color: var(--kib-akzent);
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

.is-style-kleks > li + li::before {
	top: calc(0.9375rem + 8px); /* 16 px Innenabstand + 7 px */
}

:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li:nth-child(6n + 2)::before { transform: rotate(40deg); }
:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li:nth-child(6n + 3)::before { transform: rotate(-25deg); }
:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li:nth-child(6n + 4)::before { transform: rotate(70deg); }
:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li:nth-child(6n + 5)::before { transform: rotate(-50deg); }
:is(.is-style-kleks, .is-style-kleks-ohne-linie) > li:nth-child(6n + 6)::before { transform: rotate(15deg); }

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-kleks > li + li {
	border-top-color: var(--kib-invers-kante);
}

/* Fragenliste: Fraunces kursiv, feiner Kleks-Strich als Marker, Linien dazwischen */
:is(ul, ol).is-style-fragen {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: var(--kib-fraunces-klein);
	letter-spacing: -0.01em;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 2rem; /* 32px */
	color: var(--kib-kellerbraun);
}

.is-style-fragen > li {
	position: relative;
	padding: 24px 0 24px 42px;
}

.is-style-fragen > li + li {
	border-top: 1px solid var(--kib-kante);
}

/* Strich auf Höhe der ersten Zeile: 24 px Innenabstand + 15,4 px (knapp halbe Zeilenhöhe) = 39,4 px */
.is-style-fragen > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(24px + 0.9625rem);
	width: 18px;
	height: 1.25px;
	background-color: var(--kib-kleks);
}

.is-style-fragen.has-h-3-font-size > li::before {
	top: calc(24px + 0.9625rem);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-fragen {
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-fragen > li + li {
	border-top-color: var(--kib-invers-kante);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .is-style-fragen > li::before {
	background-color: var(--kib-ocker);
}

/* 5 · Karten (core/group) ----------------------------------------------- */

.wp-block-group:is(.is-style-karte, .is-style-karte-hell, .is-style-karte-rand, .is-style-karte-dunkel, .is-style-karte-schleier) {
	border-radius: var(--kib-radius-gross);
	padding: 48px;
	border: 1px solid transparent;
}

.wp-block-group.is-style-karte {
	background-color: var(--kib-sand);
	border-color: var(--kib-sand-tief);
}

.wp-block-group.is-style-karte-hell {
	background-color: var(--kib-kalkweiss);
	border-color: var(--kib-kante);
}

.wp-block-group.is-style-karte-rand {
	background-color: transparent;
	border-color: var(--kib-kante);
}

.wp-block-group.is-style-karte-dunkel {
	background-color: var(--kib-kellerbraun);
	border-color: var(--kib-kellerbraun);
	color: var(--kib-kalkweiss);
}

.wp-block-group.is-style-karte-schleier {
	background-color: var(--kib-akzent-schleier);
	border-radius: var(--kib-radius);
	padding: 32px;
}

/* Kompakte Karte: Radius 16, Innenabstand 32 (wie Card-Standard im Entwurf) */
.wp-block-group.kib-kompakt:is(.is-style-karte, .is-style-karte-hell, .is-style-karte-rand, .is-style-karte-dunkel, .is-style-karte-schleier) {
	border-radius: var(--kib-radius);
	padding: 32px;
}

@media (max-width: 560px) {
	.wp-block-group:is(.is-style-karte, .is-style-karte-hell, .is-style-karte-rand, .is-style-karte-dunkel) {
		padding: 32px;
	}
}

/* Bilder in Karten: Radius 16 */
:is(.is-style-karte, .is-style-karte-hell, .is-style-karte-rand, .is-style-karte-dunkel, .is-style-karte-schleier) .wp-block-image img {
	border-radius: var(--kib-radius);
}

/* Fotos wie im Entwurf (ImageFrame): 1-px-Kante Sand tief innerhalb des Radius und Sand-Fläche,
   solange das Bild lädt. Gilt für Bild-Blöcke und Beitragsbilder (Karten, Band im Beitrag).
   Die Kante liegt im Bildmaß (box-sizing), Größe und Lage des Bildes ändern sich nicht.
   Ausgenommen: Logos, Kleks der Dachmarke, Porträt im Kontaktband (eigene 3-px-Kante) und
   Bilder mit Zusatzklasse kib-ohne-rahmen (z. B. Grafiken mit transparentem Grund).
   Eigene Rahmen aus dem Editor (Inline-Stil) haben Vorrang. */
.wp-block-image:not(.kib-kopf-logo, .kib-fuss-logo, .kib-dachmarke-kleks, .kib-kontaktband-bild, .kib-ohne-rahmen) img,
.wp-block-post-featured-image:not(.kib-ohne-rahmen) img {
	box-sizing: border-box;
	border: 1px solid var(--kib-sand-tief);
	background-color: var(--kib-sand);
}

/* 6 · Platzhalter -------------------------------------------------------- */
/* Sichtbar nur für Angemeldete und immer im Editor: für Besucher serverseitig entfernt (inc/),
   zusätzlich per CSS versteckt (inc/block-styles.php und Regel am Ende dieses Abschnitts). */

.wp-block-group.is-style-platzhalter {
	border: 1.5px dashed var(--kib-kleks);
	border-radius: var(--kib-radius);
	background-color: var(--kib-kleks-schleier);
	padding: 24px 32px;
	color: var(--kib-tinte);
}

.wp-block-group.is-style-platzhalter > * + * {
	margin-block-start: 8px;
}

.wp-block-group.is-style-platzhalter > :first-child {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.8125rem; /* 13px */
	line-height: 1.875rem; /* 30px */
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kib-kleks);
}

.wp-block-group.is-style-platzhalter > :not(:first-child) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
}

/* Nur für Angemeldete (Zusatzklasse kib-nur-angemeldet, z. B. Vita-Eintrag mit offenem Platzhalter):
   Für Besucher entfernt inc/ den Block schon auf dem Server (A1); diese Regel ist die zweite Absicherung.
   Platzhalter sind immer versteckt, eine Gruppe mit kib-nur-angemeldet nur, solange in ihr noch ein
   Platzhalter steckt: Ist der Eintrag ausgefüllt und der Platzhalter gelöscht, sehen Besucher ihn
   (gleiche Logik wie der Server-Filter). Gilt nur auf der Website — im Editor ist
   body = .editor-styles-wrapper, dort bleibt alles sichtbar. */
body:not(.logged-in):not(.editor-styles-wrapper) :is(.is-style-platzhalter, .kib-nur-angemeldet:has(.is-style-platzhalter)) {
	display: none !important;
}

/* 7 · Buttons ------------------------------------------------------------ */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--kib-dauer-schnell) var(--kib-easing),
		background-color var(--kib-dauer-schnell) var(--kib-easing),
		border-color var(--kib-dauer-schnell) var(--kib-easing),
		text-decoration-color var(--kib-dauer-schnell) var(--kib-easing),
		transform var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: scale(var(--kib-druck));
}

/* Primär (Standard): Fläche in Bereichsfarbe. Eigene Farben aus dem Editor bleiben erhalten. */
:where(.wp-block-button:not(.is-style-sekundaer):not(.is-style-tertiaer):not(.is-style-invers):not(.is-style-outline)) > .wp-block-button__link:not(.has-background),
.wp-block-search__button:not(.has-background) {
	background-color: var(--kib-akzent);
	border-color: var(--kib-akzent);
}

:where(.wp-block-button:not(.is-style-sekundaer):not(.is-style-tertiaer):not(.is-style-invers):not(.is-style-outline)) > .wp-block-button__link:not(.has-background):hover,
.wp-block-search__button:not(.has-background):hover {
	background-color: var(--kib-akzent-tief);
	border-color: var(--kib-akzent-tief);
}

/* Sekundär: Rand + Schrift Kellerbraun, Hover gefüllt */
.wp-block-button:is(.is-style-sekundaer, .is-style-outline) > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--kib-kellerbraun);
	color: var(--kib-kellerbraun);
}

.wp-block-button:is(.is-style-sekundaer, .is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--kib-kellerbraun);
	border-color: var(--kib-kellerbraun);
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-button:is(.is-style-sekundaer, .is-style-outline) > .wp-block-button__link {
	border-color: var(--kib-kalkweiss);
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-button:is(.is-style-sekundaer, .is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--kib-kalkweiss);
	border-color: var(--kib-kalkweiss);
	color: var(--kib-kellerbraun);
}

/* Invers: auf Dunkel — Fläche Kalkweiß, Hover Sand */
.wp-block-button.is-style-invers > .wp-block-button__link {
	background-color: var(--kib-kalkweiss);
	border-color: var(--kib-kalkweiss);
	color: var(--kib-kellerbraun);
}

.wp-block-button.is-style-invers > .wp-block-button__link:hover {
	background-color: var(--kib-sand);
	border-color: var(--kib-sand);
	color: var(--kib-kellerbraun);
}

/* Tertiär: Textlink in Bereichsfarbe, unterstrichen 1 px / 6 px Abstand, Pfeil rechts */
.wp-block-button.is-style-tertiaer > .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	border-radius: 0;
	padding: 4px 0;
	color: var(--kib-akzent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.wp-block-button.is-style-tertiaer > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	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-button.is-style-tertiaer > .wp-block-button__link:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--kib-akzent-tief);
	text-decoration-thickness: 1.5px;
}

.wp-block-button.is-style-tertiaer > .wp-block-button__link:hover::after {
	transform: translateX(2px);
}

.wp-block-button.is-style-tertiaer > .wp-block-button__link:active {
	transform: none;
}

/* Tertiär auf Sand: Kleks tief bzw. Salbei tief Hover (Kontrast), Hover Kellerbraun */
:is(.has-sand-background-color, .is-style-karte) .wp-block-button.is-style-tertiaer > .wp-block-button__link {
	color: var(--kib-akzent-tief);
}

:is(.has-sand-background-color, .is-style-karte) .wp-block-button.is-style-tertiaer > .wp-block-button__link:hover {
	color: var(--kib-kellerbraun);
}

/* … und wieder normal auf einer hellen Karte innerhalb von Sand */
:is(.has-kalkweiss-background-color, .is-style-karte-hell) .wp-block-button.is-style-tertiaer > .wp-block-button__link {
	color: var(--kib-akzent-text);
}

:is(.has-kalkweiss-background-color, .is-style-karte-hell) .wp-block-button.is-style-tertiaer > .wp-block-button__link:hover {
	color: var(--kib-akzent-tief);
}

/* Tertiär auf Dunkel: Ocker, Hover Kalkweiß */
:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-button.is-style-tertiaer > .wp-block-button__link {
	color: var(--kib-ocker);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-button.is-style-tertiaer > .wp-block-button__link:hover {
	color: var(--kib-kalkweiss);
}

/* Größen: sm 10/18 · 15/20 — md 14/26 · 17/22 (Standard) — lg 18/34 · 20/24 */
.wp-block-button.kib-btn-sm > .wp-block-button__link {
	padding: 10px 18px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem; /* 20px */
}

.wp-block-button.kib-btn-lg > .wp-block-button__link {
	padding: 18px 34px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5rem; /* 24px */
}

.wp-block-button.is-style-tertiaer:is(.kib-btn-sm, .kib-btn-lg) > .wp-block-button__link {
	padding: 4px 0;
}

/* Volle Breite */
.wp-block-button.kib-btn-breit {
	flex: 1 1 100%;
	width: 100%;
}

.wp-block-button.kib-btn-breit > .wp-block-button__link {
	width: 100%;
}

/* Telefon-Icon vor dem Text (ersetzt beim Tertiär-Button den Pfeil) */
.wp-block-button.kib-icon-telefon > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/phone.svg) center / contain no-repeat;
	mask: url(../img/icons/phone.svg) center / contain no-repeat;
}

.wp-block-button.kib-btn-sm.kib-icon-telefon > .wp-block-button__link::before {
	width: 16px;
	height: 16px;
}

/* E-Mail-Icon (gleiche Bauart wie Telefon) */
.wp-block-button.kib-icon-mail > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/mail.svg) center / contain no-repeat;
	mask: url(../img/icons/mail.svg) center / contain no-repeat;
}

.wp-block-button.is-style-tertiaer:is(.kib-icon-telefon, .kib-icon-mail, .kib-ohne-pfeil) > .wp-block-button__link::after {
	content: none;
}

/* 8 · Zitate ------------------------------------------------------------- */

/* Grundzitat: Fraunces kursiv 24/32, ohne Rahmen und Anführungszeichen-Grafik */
.wp-block-quote {
	margin-left: 0;
	margin-right: 0;
}

.wp-block-quote > p {
	margin: 0;
	max-width: var(--kib-mass-eng);
	font-variation-settings: var(--kib-fraunces-heading);
	text-wrap: balance;
}

.wp-block-quote > p + p {
	margin-top: 0.5em;
}

.wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	letter-spacing: 0;
	color: var(--kib-kellerbraun-hell);
}

/* Zitat-Fläche: groß (H2 32/40; mit Schriftgröße H1 44/52), zentrieren erlaubt */
.wp-block-quote.is-style-zitat-flaeche {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.25;
}

.wp-block-quote.is-style-zitat-flaeche.has-h-1-font-size {
	line-height: 1.1818;
}

.wp-block-quote.is-style-zitat-flaeche.has-text-align-center > p,
.wp-block-quote.is-style-zitat-flaeche.has-text-align-center cite {
	margin-left: auto;
	margin-right: auto;
}

/* Zitat zwischen Linien (im Beitrag): Linien in Bereichsfarbe, Text 24/32, max. 34 Zeichen */
.wp-block-quote.is-style-zitat-linien {
	padding: 32px 0;
	border-top: 1px solid var(--kib-akzent);
	border-bottom: 1px solid var(--kib-akzent);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

.wp-block-quote.is-style-zitat-linien > p {
	max-width: 34ch;
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-quote {
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-quote cite {
	color: var(--kib-invers-leise);
}

/* 9 · Trenner (core/separator) ------------------------------------------- */

.wp-block-separator {
	border: 0;
	height: 1px;
	opacity: 1;
	background-color: var(--kib-weg-linie);
}

.wp-block-separator.has-css-opacity,
.wp-block-separator.has-alpha-channel-opacity {
	opacity: 1;
}

/* Weg-Linie: handgeführt, volle Breite, 16 px hoch */
.wp-block-separator.is-style-weg {
	height: 16px;
	width: 100%;
	max-width: none;
	background-color: var(--kib-weg-linie);
	-webkit-mask: url(../img/weg-trenner.svg) 0 0 / 100% 16px no-repeat;
	mask: url(../img/weg-trenner.svg) 0 0 / 100% 16px no-repeat;
}

.wp-block-separator.is-style-weg.has-background:not(.has-weg-linie-background-color) {
	background-color: currentColor;
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) .wp-block-separator.is-style-weg {
	background-color: var(--kib-invers-linie);
}

/* Kleks-Trenner: Kleks 16 px zwischen zwei 1-px-Linien */
.wp-block-separator.is-style-kleks-trenner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 16px;
	width: 100%;
	max-width: none;
	background: url(../img/kleks-trenner.svg) center / 16px 16px no-repeat;
}

.wp-block-separator.is-style-kleks-trenner::before,
.wp-block-separator.is-style-kleks-trenner::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--kib-weg-linie);
}

.wp-block-separator.is-style-kleks-trenner::before {
	margin-right: 16px;
}

.wp-block-separator.is-style-kleks-trenner::after {
	margin-left: 16px;
}

/* 10 · Suche und einfache Listen (Templates search/index) --------------- */

.wp-block-search.kib-suche {
	max-width: 560px;
}

.wp-block-search__inside-wrapper {
	gap: 12px;
}

.wp-block-search__input {
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--kib-kante-feld);
	border-radius: var(--kib-radius);
	background-color: var(--kib-kalkweiss-hoch);
	color: var(--kib-tinte);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--body);
}

/* Platzhalter „Stichwort“ wie im Formular (formular.css): Kellerbraun hell, 80 % → 4,6:1 auf der Feldfläche */
.wp-block-search__input::placeholder {
	color: var(--kib-kellerbraun-hell);
	opacity: 0.8;
}

.wp-block-search__input:focus {
	border-color: var(--kib-kellerbraun);
}

.wp-block-search__button {
	margin-left: 0;
}

.wp-block-search.kib-suche + .kib-liste {
	margin-block-start: 64px;
}

.kib-liste .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kib-liste .wp-block-post-template > li {
	padding: 32px 0;
	border-top: 1px solid var(--kib-kante);
}

.kib-liste .wp-block-post-template > li:last-child {
	border-bottom: 1px solid var(--kib-kante);
}

.kib-liste .wp-block-post-template > li > * + * {
	margin-block-start: 12px;
}

.kib-liste .wp-block-post-title a {
	color: var(--kib-kellerbraun);
	text-decoration: none;
}

.kib-liste .wp-block-post-title a:hover {
	color: var(--kib-akzent-tief);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 6px;
}

.wp-block-post-excerpt__more-link {
	font-weight: 600;
	text-underline-offset: 6px;
}

.wp-block-query-pagination {
	margin-top: 48px;
	font-weight: 600;
}

/* Fragen zum Aufklappen (Block „Details“ + kib-aufklapp, Umbau 18.10.2026) ----------
   Optik wie die Fragenliste (kursive Fraunces, Strich davor, Linien dazwischen),
   rechts ein Plus, das beim Öffnen zum Minus wird. Ohne JavaScript (natives <details>). */

.kib-aufklapp-liste > * + * {
	margin-block-start: 0;
}

.wp-block-details.kib-aufklapp {
	border-top: 1px solid var(--kib-kante);
	padding: 0;
}

.wp-block-details.kib-aufklapp:last-child {
	border-bottom: 1px solid var(--kib-kante);
}

.wp-block-details.kib-aufklapp > summary {
	position: relative;
	display: block;
	min-height: 44px;
	padding: 24px 56px 24px 42px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: var(--kib-fraunces-klein);
	letter-spacing: -0.01em;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 2rem;
	color: var(--kib-kellerbraun);
	transition: color var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-details.kib-aufklapp > summary::-webkit-details-marker {
	display: none;
}

/* Strich links auf Höhe der ersten Zeile */
.wp-block-details.kib-aufklapp > summary::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(24px + 0.9625rem);
	width: 18px;
	height: 1.25px;
	background-color: var(--kib-akzent, var(--kib-kleks));
}

/* Pfeil rechts (Winkel aus zwei Kanten), dreht sich beim Öffnen nach oben */
.wp-block-details.kib-aufklapp > summary::after {
	content: "";
	position: absolute;
	right: 10px;
	top: calc(24px + 1rem - 9px);
	width: 11px;
	height: 11px;
	border-right: 1.75px solid var(--kib-akzent-text, var(--kib-kleks));
	border-bottom: 1.75px solid var(--kib-akzent-text, var(--kib-kleks));
	transform: rotate(45deg);
	transition: transform var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-details.kib-aufklapp[open] > summary::after {
	top: calc(24px + 1rem - 3px);
	transform: rotate(225deg);
}

.wp-block-details.kib-aufklapp > summary:hover {
	color: var(--kib-akzent-text, var(--kib-kleks));
}

.wp-block-details.kib-aufklapp > summary:focus-visible {
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 2px;
	border-radius: 4px;
}

.wp-block-details.kib-aufklapp > :not(summary) {
	margin: 0;
	padding: 0 56px 28px 42px;
	max-width: 60ch;
	color: var(--kib-tinte);
}