/* ==========================================================================
   Komm ins Bauchgefühl — muster-start.css (Paket Startseite)
   Muster: dachmarke, zweiteilung, weg-schritte, weg-schritte-text, vergleich,
   wertepaare, kosten-karten, zitat, kontaktband.
   Gilt für Website und Editor (functions.php lädt alle assets/css/*.css).
   Marke: keine Schatten, keine Verläufe. Farben nur über --kib-*-Variablen,
   damit die Bereichsfarbe (body- oder Block-Klasse bereich-*) durchschlägt.
   ========================================================================== */

/* 0 · Gemeinsam ---------------------------------------------------------- */

/* Kicker mit 14-px-Kleks und 10 px Abstand (Zweiteilung, „Bei mir“) */
.is-style-kicker.kib-kleks-14 {
	padding-left: 24px;
}

.is-style-kicker.kib-kleks-14::before {
	width: 14px;
	height: 14px;
	top: calc(50% - 7px);
}

/* Bilder in den Mustern: kein Abstand unter der Bild-Figur (Abstände kommen aus dem Layout) */
:is(.kib-dachmarke, .kib-zweiteilung, .kib-weg-schritte, .kib-kontaktband) .wp-block-image {
	margin-bottom: 0;
}

/* 1 · Dachmarke ---------------------------------------------------------- */
/* Raster 1,1fr / 0,9fr (55 % / 45 %), Spaltenabstand 64 px, unten bündig.
   Einspaltig ≤ 980 px über kib-zweispaltig (Zeilenabstand 64 px). */

.wp-block-columns.kib-dachmarke-spalten {
	column-gap: 64px;
}

/* Lead max. 46 Zeichen: is-style-lead (68ch, bausteine.css) käme sonst später und gewinnt */
.is-style-lead.kib-max-46ch {
	max-width: 46ch;
}

.wp-block-image.kib-dachmarke-kleks {
	flex: none;
}

.wp-block-image.kib-dachmarke-kleks img {
	width: 64px;
	height: 64px;
	border-radius: 0;
}

.kib-dachmarke-titel > .wp-block-heading {
	margin: 0;
	min-width: 0;
	/* schmal wie im Entwurf „Komm ins / Bauchgefühl“ (balance würde „Komm / ins …“ trennen) */
	text-wrap: wrap;
}

/* 2 · Zweiteilung -------------------------------------------------------- */
/* Zwei gleich breite Hälften über die volle Breite. Jede Hälfte: 5-px-Leiste in
   Bereichsfarbe, Innenabstand 64 / Seitenrand / 96, Inhalt untereinander (32 px),
   Wege unten bündig. Dazwischen die 1-px-Weg-Linie. ≤ 900 px untereinander,
   die Trennlinie wird zur unteren Kante der linken Hälfte. */

.kib-zweiteilung {
	border-top: 1px solid var(--kib-kante);
	border-bottom: 1px solid var(--kib-kante);
}

.wp-block-columns.kib-zweiteilung-spalten {
	margin-top: 0;
	margin-bottom: 0;
	column-gap: 0;
	row-gap: 0;
}

.kib-zweiteilung-spalten > .wp-block-column.kib-haelfte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-top: 5px solid var(--kib-akzent);
	padding: 64px var(--wp--style--root--padding-right, 48px) var(--wp--preset--spacing--90, 96px) var(--wp--style--root--padding-left, 48px);
}

.kib-zweiteilung-spalten > .wp-block-column.kib-haelfte:first-child {
	border-right: 1px solid var(--kib-weg-linie);
}

/* In der Hälfte stehen alle Teile 32 px auseinander, auch Kicker → Überschrift */
.kib-zweiteilung-spalten > .kib-haelfte > .is-style-kicker + .wp-block-heading {
	margin-block-start: 32px;
}

/* Kosten-Hinweis und Wege (Button + Tertiär-Link) unten bündig — in beiden Hälften auf einer Linie,
   auch wenn die Texte darüber unterschiedlich lang sind (Umbau 18.10.2026). */
.kib-zweiteilung-spalten > .kib-haelfte > .is-style-kosten {
	margin-top: auto;
}

.kib-zweiteilung-spalten > .kib-haelfte > :has(+ .is-style-kosten) {
	margin-bottom: 32px;
}

.kib-zweiteilung-spalten > .kib-haelfte > .wp-block-buttons:last-child {
	margin-top: 0;
	padding-top: 44px;
}

@media (max-width: 900px) {
	.wp-block-columns.kib-zweiteilung-spalten {
		flex-wrap: wrap !important;
	}

	.kib-zweiteilung-spalten > .wp-block-column.kib-haelfte {
		flex-basis: 100% !important;
		flex-grow: 1;
	}

	.kib-zweiteilung-spalten > .wp-block-column.kib-haelfte:first-child {
		border-right: 0;
		border-bottom: 1px solid var(--kib-weg-linie);
	}
}

/* 3 · Weg-Schritte (mit Bild) ------------------------------------------- */
/* Kicker „Schritt N“ mit 12-px-Kleks (Drehung über kib-dreh-*), 24 px unter dem Bild. */

.kib-weg-schritt .is-style-kicker {
	padding-left: 22px;
	line-height: 1.875rem;
}

.kib-weg-schritt .is-style-kicker::before {
	width: 12px;
	height: 12px;
	top: calc(50% - 6px);
}

.kib-weg-schritt > .wp-block-image + .is-style-kicker {
	margin-block-start: 24px;
}

/* Titel wie im Entwurf ohne die Überschriften-Laufweite −0,01em (WegSchritte: Fraunces 24/32, 500, normal) */
.kib-weg-schritt > .wp-block-heading {
	letter-spacing: normal;
}

/* 4 · Weg-Schritte als Liste (ohne Bild) --------------------------------- */
/* Je Schritt: Kleks 18 px in einer 28-px-Spalte, 16 px Abstand, Titel 20/30 fett. */

.kib-weg-schritt-text {
	position: relative;
	padding-left: 44px;
}

.kib-weg-schritt-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.9375rem - 9px); /* halbe Titelzeile (1,875rem) − halber Kleks: 6 px bei 16 px Grundschrift, wandert mit */
	width: 18px;
	height: 18px;
	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;
}

.kib-weg-schritt-text:nth-child(3n + 2)::before {
	transform: rotate(40deg);
}

.kib-weg-schritt-text:nth-child(3n + 3)::before {
	transform: rotate(-25deg);
}

.kib-weg-schritt-text > p:first-child {
	line-height: 1.875rem;
}

/* 5 · Vergleich ---------------------------------------------------------- */
/* Raster 1fr · Pfeil 28 px · 1,25fr, 32 px Abstand, gleiche Höhe.
   Der Pfeil ist reine Gestaltung (::before), kein Block. ≤ 900 px untereinander,
   der Pfeil steht dann links und zeigt nach unten. */

.kib-vergleich {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
	column-gap: 32px;
	row-gap: 32px;
	align-items: stretch;
}

.kib-vergleich > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.kib-vergleich > :nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.kib-vergleich > :nth-child(2) {
	grid-column: 3;
	grid-row: 1;
}

.kib-vergleich::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	width: 28px;
	height: 28px;
	background-color: var(--kib-akzent);
	-webkit-mask: url(../img/icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../img/icons/arrow-right.svg) center / contain no-repeat;
}

/* Labels „Der übliche Weg“ / „Bei mir“ stehen im Entwurf in der Zeilenhöhe des Fließtexts (30 px) */
.kib-vergleich > .wp-block-group > :is(.is-style-kicker, .is-style-kicker-leise):first-child {
	line-height: 1.875rem;
}

/* „Bei mir“: Sand-Fläche ohne sichtbare Kante (wie im Entwurf) */
.wp-block-group.is-style-karte.kib-vergleich-bei-mir {
	border-color: var(--kib-sand);
}

.kib-vergleich-aussage {
	letter-spacing: -0.01em;
	text-wrap: balance;
}

@media (max-width: 900px) {
	.kib-vergleich {
		grid-template-columns: minmax(0, 1fr);
	}

	.kib-vergleich::before {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		transform: rotate(90deg);
	}

	.kib-vergleich > :nth-child(2) {
		grid-column: 1;
		grid-row: 3;
	}
}

/* 6 · Wertepaare --------------------------------------------------------- */
/* „Ehrlich, nicht schonend“: die Abgrenzung (kursiv gesetzt) gedämpft. */

.kib-wertepaar-wort {
	letter-spacing: -0.01em;
	max-width: none;
}

.kib-wertepaar-wort :is(em, i) {
	font-style: italic;
	font-weight: 400;
	color: var(--kib-kellerbraun-hell);
}

/* 7 · Kosten-Karten ------------------------------------------------------ */
/* Karten-Radius 16 wie Card im Entwurf (Innenabstand bleibt 48). */

.kib-kosten-karten > .wp-block-group {
	border-radius: var(--kib-radius);
}

/* 8 · Zitat -------------------------------------------------------------- */

.kib-zitat .wp-block-quote {
	margin-top: 0;
	margin-bottom: 0;
}

/* 9 · Kontaktband -------------------------------------------------------- */
/* Porträt 88 px rund mit 3-px-Rand Kalkweiß; Text max. 34 Zeichen breit.
   Kicker, Unterstreichung und Button folgen der Bereichsfarbe des Body. */

.wp-block-image.kib-kontaktband-bild {
	flex: none;
}

.wp-block-image.kib-kontaktband-bild img {
	display: block;
	width: 88px;
	height: 88px;
	border: 3px solid var(--kib-kalkweiss);
	border-radius: 50%;
	object-fit: cover;
}

.kib-kontaktband-text {
	min-width: 0;
}

/* Telefon wie im Entwurf immer Kleks tief auf Sand (auch in den Bereichen), Hover Kellerbraun */
.kib-kontaktband .wp-block-button.is-style-tertiaer.kib-icon-telefon > .wp-block-button__link {
	color: var(--kib-kleks-tief);
}

.kib-kontaktband .wp-block-button.is-style-tertiaer.kib-icon-telefon > .wp-block-button__link:hover {
	color: var(--kib-kellerbraun);
}

/* ≤ 560 px: Porträt über dem Text, 24 px Abstand */
@media (max-width: 560px) {
	.wp-block-group.kib-kontaktband-kopf {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* 10 · Willkommen (Dachmarke, vollflächig) — Oktober 2026 ---------------- */
/* Erster Bildschirm: Sand-Fläche mindestens bis zur Fensterunterkante (unter der
   klebenden Kopfzeile), Inhalt vertikal mittig, ein großer ruhiger Kleks als Hintergrund. */

.kib-willkommen {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--kib-kopf-abstand, 85px));
}

.kib-willkommen > .kib-willkommen-innen {
	width: 100%;
}

.wp-block-columns.kib-dachmarke-spalten {
	column-gap: var(--wp--preset--spacing--90, 96px);
}

.kib-willkommen-text > .is-style-kicker-schlicht + .wp-block-heading {
	margin-block-start: 16px;
}

.kib-willkommen-text > .kib-willkommen-leitsatz {
	text-wrap: balance;
	max-width: 18ch;
}

.kib-willkommen-text > .kib-willkommen-leitsatz + .is-style-lead {
	margin-block-start: 24px;
}

.kib-willkommen-text > p:not([class*="is-style"]) {
	max-width: 52ch;
}

/* „Zu meinen zwei Bereichen“ mit Pfeil nach unten */
.kib-weiter-runter {
	margin-block-start: var(--wp--preset--spacing--80, 64px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.kib-weiter-runter a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--kib-kellerbraun);
	text-decoration: none;
}

.kib-weiter-runter a::after {
	content: "";
	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;
	transform: rotate(90deg);
	transition: transform var(--kib-dauer-normal, 240ms) var(--kib-easing, ease);
}

.kib-weiter-runter a:hover {
	color: var(--kib-kleks);
}

.kib-weiter-runter a:hover::after {
	transform: rotate(90deg) translateX(3px);
}

@media (max-width: 980px) {
	.kib-willkommen {
		min-height: 0;
	}

	.kib-willkommen::after {
		width: 80vw;
		right: -30vw;
		bottom: -30vw;
	}

	.kib-weiter-runter {
		margin-block-start: var(--wp--preset--spacing--70, 48px);
	}
}

/* 11 · Zweiteilung: Hälften beim Überfahren leicht in Bereichsfarbe ------ */
.kib-zweiteilung-spalten > .wp-block-column.kib-haelfte {
	transition: background-color var(--kib-dauer-ruhig, 420ms) var(--kib-easing, ease);
}

.kib-zweiteilung-spalten > .kib-haelfte.bereich-koerper:is(:hover, :focus-within) {
	background-color: var(--kib-salbei-schleier, #E5E8E0);
}

.kib-zweiteilung-spalten > .kib-haelfte.bereich-autismus:is(:hover, :focus-within) {
	background-color: var(--kib-kleks-schleier, #F3E4E7);
}

/* Auf Touch-Geräten ohne Hover bleibt die Fläche ruhig (kein „klebender“ Hover nach dem Tippen) */
@media (hover: none) {
	.kib-zweiteilung-spalten > .kib-haelfte:is(.bereich-koerper, .bereich-autismus):hover:not(:focus-within) {
		background-color: transparent;
	}
}

/* 12 · Überleitung „Für beide Bereiche“ (Muster kapitel) ----------------- */
.kib-kapitel-innen > .kib-kapitel-zeichen {
	position: relative;
	width: 76px;
	height: 48px;
	margin: 0 0 var(--wp--preset--spacing--60, 32px);
}

.kib-kapitel-innen > .kib-kapitel-zeichen::before,
.kib-kapitel-innen > .kib-kapitel-zeichen::after {
	content: "";
	position: absolute;
	top: 0;
	width: 48px;
	height: 48px;
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

.kib-kapitel-innen > .kib-kapitel-zeichen::before {
	left: 0;
	background-color: var(--kib-salbei, #7E8C74);
	transform: rotate(140deg);
}

.kib-kapitel-innen > .kib-kapitel-zeichen::after {
	left: 28px;
	background-color: var(--kib-kleks-hell, #D6546C);
	mix-blend-mode: screen;
}

.kib-kapitel-innen > .is-style-kicker-schlicht + .wp-block-heading {
	margin-block-start: 16px;
}

/* Überleitung: bewusst große Überschrift als Zäsur zwischen Zweiteilung und den gemeinsamen Themen */
.kib-kapitel-innen > .wp-block-heading {
	font-size: clamp(2.75rem, 7.2vw, 5.25rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 400;
}

.kib-kapitel-innen > .wp-block-heading + .is-style-lead {
	margin-block-start: 24px;
	max-width: 56ch;
}


/* Kontaktband (Runde 4, 02.11.2026): links Porträt + Text, rechts helle Karte mit Button, Telefon, E-Mail. */
.wp-block-group.kib-kontaktband-innen {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: var(--wp--preset--spacing--80, 64px);
	align-items: center;
}

.kib-kontaktband-karte > * {
	margin-block: 0;
}

.kib-kontaktband-karte > * + * {
	margin-block-start: 16px;
}

.kib-kontaktband-karte .wp-block-buttons.kib-kontaktband-wege {
	gap: 12px;
}

.kib-kontaktband-karte .wp-block-button.kib-btn-lg,
.kib-kontaktband-karte .wp-block-button.kib-btn-lg > .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.kib-kontaktband-karte .wp-block-button.is-style-tertiaer > .wp-block-button__link {
	overflow-wrap: anywhere;
}

@media (max-width: 980px) {
	.wp-block-group.kib-kontaktband-innen {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60, 32px);
	}
}