/* ==========================================================================
   Komm ins Bauchgefühl — muster-ueber-kosten.css
   Muster der Seiten „Über mich“ und „Kosten & Kostenträger“:
   ueber-mich-kopf, expertise, vita, kosten-wege, preise, grenzen, haeufig-gefragt.
   Vorlage: design-referenz/screens/ueber-mich.js und kosten.js.

   Gestaltet wird über Zusatzklassen (kib-*) und die Reihenfolge der Blöcke,
   nicht über Inline-Stile — so kann Jana Einträge im Editor duplizieren,
   umstellen und neu schreiben, ohne dass die Optik verloren geht.
   Marke: keine Schatten, keine Verläufe, nur Fraunces + Karla.
   ========================================================================== */

/* 1 · Über-mich-Kopf: Freisteller-Bild ------------------------------------ */

/* Freisteller (PNG mit transparentem Grund) auf Sand, 1-px-Kante, unten bündig — wie ImageFrame „freisteller“ */
.wp-block-image.kib-freisteller img {
	box-sizing: border-box;
	background-color: var(--kib-sand);
	border: 1px solid var(--kib-sand-tief);
	border-radius: var(--kib-radius-gross);
	object-position: center bottom;
}

/* 2 · Einleitung: Karte „Was ich mitbringe“ ------------------------------- */
/* Eintrag = Gruppe .kib-mitbringe-eintrag: 1. Absatz = Titel, weitere Absätze = Zusatz (klein, leise). */

.kib-mitbringe > .is-style-kicker-schlicht:first-child,
.kib-preis-karte > .is-style-kicker-schlicht:first-child {
	line-height: 1.875rem; /* Label steht im Entwurf in einer 30-px-Zeile */
}

.kib-mitbringe .kib-mitbringe-eintrag {
	position: relative;
	padding-left: 28px;
}

.kib-mitbringe .kib-mitbringe-eintrag + .kib-mitbringe-eintrag {
	padding-top: 24px;
	border-top: 1px solid var(--kib-sand-tief);
}

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

.kib-mitbringe .kib-mitbringe-eintrag > :first-child {
	font-weight: 600;
	line-height: 1.875rem;
	color: var(--kib-kellerbraun);
}

.kib-mitbringe .kib-mitbringe-eintrag > :not(:first-child) {
	margin-block-start: 3px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem;
	color: var(--kib-kellerbraun-hell);
}

/* Kleks 12 px, Drehung je Zeile 0 / 40 / −25 / 70 / −50 / 15° */
.kib-mitbringe .kib-mitbringe-eintrag::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.9375rem - 9px); /* an der ersten Zeile (1,875rem): 6 px bei 16 px Grundschrift, wandert mit */
	width: 12px;
	height: 12px;
	background-color: var(--kib-kleks);
	-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-eintrag-drehung, 0deg));
}

.kib-mitbringe .kib-mitbringe-eintrag + .kib-mitbringe-eintrag::before {
	top: calc(24px + 0.9375rem - 9px); /* 24 px Innenabstand + 6 px */
}

.kib-mitbringe .kib-mitbringe-eintrag:nth-of-type(6n + 2) { --kib-eintrag-drehung: 40deg; }
.kib-mitbringe .kib-mitbringe-eintrag:nth-of-type(6n + 3) { --kib-eintrag-drehung: -25deg; }
.kib-mitbringe .kib-mitbringe-eintrag:nth-of-type(6n + 4) { --kib-eintrag-drehung: 70deg; }
.kib-mitbringe .kib-mitbringe-eintrag:nth-of-type(6n + 5) { --kib-eintrag-drehung: -50deg; }
.kib-mitbringe .kib-mitbringe-eintrag:nth-of-type(6n + 6) { --kib-eintrag-drehung: 15deg; }

/* Feste Drehung (Zusatzklasse) für Einträge nach dem offenen Eintrag — bleibt wie im Entwurf,
   auch wenn der offene Eintrag für Besucher nicht ausgeliefert wird. */
.kib-mitbringe .kib-mitbringe-eintrag.kib-mitbringe-dreh-minus-50 { --kib-eintrag-drehung: -50deg; }

/* Offener Eintrag (enthält einen Platzhalter): Kleks Salbei tief, Hinweis als roter Text wie im Entwurf */
.kib-mitbringe .kib-mitbringe-eintrag:has(.is-style-platzhalter)::before {
	background-color: var(--kib-salbei-tief);
}

.kib-mitbringe .kib-mitbringe-eintrag > .wp-block-group.is-style-platzhalter {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

.kib-mitbringe .kib-mitbringe-eintrag > .wp-block-group.is-style-platzhalter > p {
	margin-block-start: 0;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kib-kleks);
}

/* 3 · Expertise: zwei Bereichskarten ------------------------------------- */

/* Karte hell, Radius 16, Innenabstand 48 (≤ 560: 32 aus bausteine.css), Oberkante 4 px in Bereichsfarbe */
.wp-block-group.kib-expertise-karte {
	display: flex;
	flex-direction: column;
	border-radius: var(--kib-radius);
	border-top: 4px solid var(--kib-akzent);
}

/* Link immer unten, mindestens 24 px Abstand */
.wp-block-group.kib-expertise-karte > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: 24px;
}

/* 4 · Vita-Zeitleiste ---------------------------------------------------- */
/* Eintrag = Gruppe .kib-vita-eintrag: 1. Absatz = Jahr, Überschrift = Titel, danach Text (oder Platzhalter).
   Raster 108 px | 30 px | Rest (≤ 560 px: 64 | 22 | Rest), senkrechte Linie mit Kleks als Punkt.
   Farbe des Punkts: ohne Bereich Kellerbraun hell, mit Zusatzklasse bereich-autismus / bereich-koerper in Bereichsfarbe. */

.kib-vita > .kib-vita-eintrag {
	--kib-vita-spalte: 108px;
	--kib-vita-mitte: 30px;
	position: relative;
	display: grid;
	grid-template-columns: var(--kib-vita-spalte) var(--kib-vita-mitte) minmax(0, 1fr);
	align-items: start;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-bottom: 48px;
}

/* senkrechte Linie (beim letzten Eintrag nicht) */
.kib-vita > .kib-vita-eintrag::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--kib-vita-spalte);
	width: 1px;
	background-color: var(--kib-kante);
}

.kib-vita > .kib-vita-eintrag:last-of-type {
	padding-bottom: 0;
}

.kib-vita > .kib-vita-eintrag:last-of-type::before {
	content: none;
}

.kib-vita > .kib-vita-eintrag > * {
	grid-column: 3;
	margin-block-start: 0;
	margin-block-end: 0;
	max-width: 52ch;
}

.kib-vita > .kib-vita-eintrag > * + * + * {
	margin-block-start: 6px;
}

/* Jahr: rechtsbündig, Small 600, leise */
.kib-vita > .kib-vita-eintrag > :first-child {
	position: relative;
	grid-column: 1;
	grid-row: 1 / span 12; /* über alle Zeilen, damit ein zweizeiliges Jahr den Text nicht nach unten schiebt */
	max-width: none;
	padding-top: 1px;
	padding-right: 24px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--kib-kellerbraun-hell);
	text-align: right;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Punkt: Kalkweiß-Hof (verdeckt die Linie) + Kleks 12 px */
.kib-vita > .kib-vita-eintrag > :first-child::before,
.kib-vita > .kib-vita-eintrag > :first-child::after {
	content: "";
	position: absolute;
}

.kib-vita > .kib-vita-eintrag > :first-child::before {
	top: calc(0.75rem - 8px); /* Mitte der Jahreszeile (1,5rem): 4 px bei 16 px Grundschrift */
	right: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--kib-kalkweiss);
}

.kib-vita > .kib-vita-eintrag > :first-child::after {
	top: calc(0.75rem - 6px);
	right: -6px;
	width: 12px;
	height: 12px;
	background-color: var(--kib-vita-farbe, var(--kib-kellerbraun-hell));
	-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-vita-drehung, 0deg));
}

.kib-vita > .kib-vita-eintrag:is(.bereich-autismus, .bereich-koerper) {
	--kib-vita-farbe: var(--kib-akzent);
}

/* Drehung je Eintrag wie im Entwurf (Länge der Jahresangabe × 23°) */
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 1) { --kib-vita-drehung: 115deg; }
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 2) { --kib-vita-drehung: 207deg; }
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 3) { --kib-vita-drehung: 138deg; }
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 4) { --kib-vita-drehung: 230deg; }
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 5) { --kib-vita-drehung: 207deg; }
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 6) { --kib-vita-drehung: 161deg; }
.kib-vita > .kib-vita-eintrag:nth-of-type(7n + 7) { --kib-vita-drehung: 230deg; }

/* Feste Drehung je Eintrag (Zusatzklasse): Die Einträge nach dem offenen Eintrag behalten ihre Drehung
   aus dem Entwurf, auch wenn der offene Eintrag für Besucher nicht ausgeliefert wird. */
.kib-vita > .kib-vita-eintrag.kib-vita-dreh-161 { --kib-vita-drehung: 161deg; }
.kib-vita > .kib-vita-eintrag.kib-vita-dreh-207 { --kib-vita-drehung: 207deg; }
.kib-vita > .kib-vita-eintrag.kib-vita-dreh-230 { --kib-vita-drehung: 230deg; }

/* Titel: Fraunces klein in H3-Größe (Stil „Fraunces klein“ am Überschrift-Block) */
.kib-vita > .kib-vita-eintrag > .wp-block-heading {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 2rem;
	-webkit-hyphens: manual;
	hyphens: manual; /* wie im Entwurf: Titel umbrechen, nicht trennen */
}

/* „Hier fing es an.“ */
.kib-vita > .kib-vita-anfang {
	position: relative;
	margin-block-start: 16px;
	padding-left: 138px;
	max-width: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.875rem;
	color: var(--kib-kellerbraun-hell);
}

.kib-vita > .kib-vita-anfang::before {
	content: "";
	position: absolute;
	left: 100px;
	top: calc(50% - 0.75px);
	width: 17px;
	height: 1.5px;
	background-color: var(--kib-weg-linie);
}

@media (max-width: 560px) {
	.kib-vita > .kib-vita-eintrag {
		--kib-vita-spalte: 64px;
		--kib-vita-mitte: 22px;
	}

	.kib-vita > .kib-vita-eintrag > :first-child {
		padding-right: 12px;
	}

	.kib-vita > .kib-vita-anfang {
		padding-left: 86px;
	}

	.kib-vita > .kib-vita-anfang::before {
		left: 56px;
	}
}

/* Schmaler als die Mobil-Vorlage (375 px): Die Textspalte ist dann nur 132–186 px breit, und
   basis.css bricht zu lange Wörter in Überschriften sonst ohne Trennstrich mitten im Wort um
   („Lebenscoachin|g“). Titel deshalb mit Trennstrich trennen, nur lange Wörter (ab 12 Zeichen).
   Der Text darunter braucht das erst unter 360 px („Gesprächsführung“ ragte sonst über die Karte).
   Ab 375 px bleibt alles wie im Entwurf. */
@media (max-width: 374px) {
	.kib-vita > .kib-vita-eintrag > .wp-block-heading {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 12 5 5;
	}
}

@media (max-width: 359px) {
	.kib-vita > .kib-vita-eintrag > :not(:first-child) {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 12 5 5;
	}
}

/* Legende unter der Zeitleiste: Kleks in Bereichsfarbe + Small leise */
.kib-legende-punkt {
	position: relative;
	padding-left: 24px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.875rem;
	color: var(--kib-kellerbraun-hell);
}

.kib-legende-punkt::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.9375rem - 6px); /* Mitte der Zeile (1,875rem): 9 px bei 16 px Grundschrift */
	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;
}

/* Offene Einträge (mit Platzhalter) sehen Besucher nicht: Sie tragen die Zusatzklasse kib-nur-angemeldet
   und werden für Nicht-Redakteure serverseitig entfernt (Theme, inc/; CSS-Rückfall in bausteine.css). */

/* 5 · Kosten: zwei Wege --------------------------------------------------- */

/* Karte hell (Radius 24, Innen 48) mit Oberkante 5 px in Bereichsfarbe, Button immer unten */
.wp-block-group.kib-weg-karte {
	display: flex;
	flex-direction: column;
	border-top: 5px solid var(--kib-akzent);
}

.wp-block-group.kib-weg-karte > .wp-block-buttons:last-child {
	margin-top: auto;
	padding-top: 32px;
}

/* Kleks-Liste mit mehr Luft (24 px über und unter der Linie) */
.kib-weg-karte .is-style-kleks > li + li {
	margin-top: 24px;
	padding-top: 24px;
}

.kib-weg-karte .is-style-kleks > li::before {
	top: calc(0.9375rem - 7px); /* wie bausteine.css: halbe Zeile − 7 px, 8 px bei 16 px Grundschrift */
}

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

/* 6 · Kosten: Preise ----------------------------------------------------- */

/* Preiskarte: hell, Radius 16, Innen 48 (≤ 560: 32) */
.wp-block-group.kib-preis-karte {
	border-radius: var(--kib-radius);
}

/* Zeile: links Leistung, rechts Preis (Fraunces H3), getrennt durch 1-px-Linie */
.wp-block-group.kib-preis-zeile {
	align-items: baseline;
}

.kib-preis-karte .kib-preis-zeile + .kib-preis-zeile {
	padding-top: 16px;
	border-top: 1px solid var(--kib-kante);
}

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

.kib-preis-zeile > :first-child {
	min-width: 0;
}

.kib-preis-zeile > :last-child {
	flex: none;
	font-family: var(--wp--preset--font-family--serif);
	font-variation-settings: var(--kib-fraunces-heading);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.875rem;
	font-weight: 500;
	color: var(--kib-kellerbraun);
	white-space: nowrap;
}

/* Sehr schmale Handys (< 360 px): Leistung und Preis rücken enger zusammen, ein zu langes Wort
   der Leistung wird an einer Silbe mit Trennstrich getrennt („Erstge-spräch“) statt ohne Strich
   mitten im Wort umzubrechen. Ab 360 px bleibt alles wie im Entwurf. */
@media (max-width: 359px) {
	.wp-block-group.kib-preis-zeile {
		gap: 12px;
	}

	.kib-preis-zeile > :first-child {
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* Das Raster mit den offenen Hinweisen (Ausfallregelung, Zahlungsziel) trägt die Zusatzklasse
   kib-nur-angemeldet: Besucher bekommen es gar nicht ausgeliefert, es bleibt kein leerer Abstand. */

/* 7 · Kosten: Grenzen ---------------------------------------------------- */

/* Kartentitel in Karla 600 (Überschrift oder Absatz an erster Stelle) */
.kib-grenze-karte > :first-child {
	font-family: var(--wp--preset--font-family--grotesk);
	font-variation-settings: normal;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.875rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--kib-kellerbraun);
}

/* 8 · Kosten: Häufig gefragt --------------------------------------------- */

.kib-fragen-antworten > .kib-frage {
	margin-block-start: 0;
	margin-block-end: 0;
	padding-top: 32px;
	padding-bottom: 32px;
}

.kib-fragen-antworten > .kib-frage + .kib-frage {
	border-top: 1px solid var(--kib-sand-tief);
}

/* Frage: Fraunces kursiv in Lead-Größe 20/32 */
.kib-frage > .wp-block-heading {
	font-family: var(--wp--preset--font-family--serif);
	font-variation-settings: var(--kib-fraunces-klein);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 2rem;
	letter-spacing: 0;
	color: var(--kib-kellerbraun);
	-webkit-hyphens: manual;
	hyphens: manual; /* wie im Entwurf: umbrechen, nicht trennen */
}

/* Einzugsgebiet „Wo ich unterwegs bin“ (Umbau 18.10.2026) ---------------------- */
/* Drei Orte mit Kleks in der Bereichsfarbe; rechts eine Umkreis-Grafik aus Kreisen
   (Volltöne, keine Schatten/Verläufe). Beschriftungen sind Absätze im Editor. */

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

.kib-orte > .kib-ort + .kib-ort {
	margin-block-start: 0;
	border-top: 1px solid var(--kib-kante);
}

.kib-ort {
	padding: 22px 0 22px 30px;
	position: relative;
}

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

.kib-ort > * + * {
	margin-block-start: 8px;
}

.kib-ort::before {
	content: "";
	position: absolute;
	left: 0;
	top: 30px;
	width: 14px;
	height: 14px;
	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));
}

.kib-umkreis {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1;
	margin-inline: auto;
}

.kib-umkreis > p {
	margin: 0;
}

.kib-umkreis > .kib-umkreis-ring {
	position: absolute;
	box-sizing: border-box;
	border-radius: 50%;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--kib-kellerbraun-hell);
}

.kib-umkreis > .kib-umkreis-aussen {
	inset: 0;
	border: 1.5px dashed var(--kib-kante-feld);
	padding-top: 4.5%;
}

.kib-umkreis > .kib-umkreis-weit {
	inset: 14%;
	background-color: var(--kib-kalkweiss);
	border: 1px solid var(--kib-kante);
	padding-top: 5%;
}

.kib-umkreis > .kib-umkreis-nah {
	inset: 31%;
	background-color: var(--kib-kleks-schleier);
	padding-top: 5.5%;
	color: var(--kib-kleks);
}

.kib-umkreis > .kib-umkreis-mitte {
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -10%);
	width: 34%;
	text-align: center;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
	color: var(--kib-kellerbraun);
}

.kib-umkreis > .kib-umkreis-mitte::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 8px;
	background-color: var(--kib-kleks);
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

.kib-umkreis-legende {
	max-width: 46ch;
	margin: var(--wp--preset--spacing--60, 32px) auto 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--kib-kellerbraun-hell);
	text-align: center;
}

@media (max-width: 980px) {
	.kib-umkreis {
		max-width: 360px;
	}
}

@media (max-width: 480px) {
	.kib-umkreis > .kib-umkreis-ring,
	.kib-umkreis > .kib-umkreis-mitte {
		font-size: 0.75rem;
	}

	.kib-umkreis > .kib-umkreis-mitte::before {
		width: 22px;
		height: 22px;
		margin-bottom: 4px;
	}
}


/* Kosten-Karten: „Gilt für“ als Label mit Pillen je Leistung (Runde 3, 02.11.2026) ---- */
.kib-weg-karte .kib-gilt-fuer > * {
	margin-block: 0;
}

.kib-weg-karte .kib-gilt-fuer > * + * {
	margin-block-start: 10px;
}

.kib-weg-karte .kib-gilt-fuer-pillen {
	gap: 8px;
}

.kib-weg-karte .kib-gilt-fuer-pillen > .is-style-kosten {
	margin: 0;
}