/* ==========================================================================
   Komm ins Bauchgefühl — muster-bereiche.css
   Muster des Pakets „Bereichsseiten“ (Körperarbeit, Autismus, Elternarbeit):
   - Kurz-gesagt-Karte   (einstieg, elternarbeit)      Klasse kib-kurz-karte
   - Ablauf              (ablauf)                       Klassen kib-ablauf-karte, kib-ablauf-nummer, kib-ablauf-titel
   - Karten zu Unterseiten (unterseiten, gehoert-dazu)  Klasse kib-unterseite
   - Beiträge zum Bereich (Seiten koerperarbeit/autismus/elternarbeit) Klasse kib-bereich-beitraege
   - Fragenliste, Zitat dunkel, Bild + Text: nur Standard-Bausteine (bausteine.css)
   Maße nach design-referenz/screens/bereich.js und teile.js (KleksListe, PostCard).
   Farben folgen dem Bereich (--kib-akzent …), keine Schatten, keine Verläufe.
   Gilt für Website und Editor (functions.php reiht alle assets/css/*.css ein).
   ========================================================================== */

/* 1 · Karte „Kurz gesagt“ / „Womit wir anfangen“ ------------------------- */
/* Helle Karte (karte-hell + kib-kompakt) mit Label und Kleks-Liste.
   Im Entwurf erbt das Label die Zeilenhöhe des Fließtexts (30 px); Label → Liste 16 px. */

.wp-block-group.kib-kurz-karte > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

.wp-block-group.kib-kurz-karte > p:first-child {
	line-height: 1.875rem;
}

/* 2 · Ablauf „In drei Schritten“ ----------------------------------------- */
/* Helle Karten (karte-hell + kib-kompakt + kib-ablauf-karte): Nummer (Fraunces 24, Bereichsfarbe),
   Titel (Karla 17/600), Text — jeweils 16 px Abstand, Zeilenhöhe 30 px wie im Entwurf. */

.wp-block-group.kib-ablauf-karte > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

p.kib-ablauf-nummer {
	font-family: var(--wp--preset--font-family--serif);
	font-variation-settings: var(--kib-fraunces-heading);
	font-weight: 500;
	line-height: 1.875rem;
	color: var(--kib-akzent-text);
}

.kib-dunkel p.kib-ablauf-nummer,
.has-kellerbraun-background-color p.kib-ablauf-nummer {
	color: var(--kib-ocker);
}

h3.kib-ablauf-titel,
h4.kib-ablauf-titel {
	font-family: var(--wp--preset--font-family--grotesk);
	font-variation-settings: normal;
	font-weight: 600;
	line-height: 1.875rem;
	letter-spacing: 0;
	color: var(--kib-kellerbraun);
}

/* 3 · Karten zu Unterseiten („Gehört dazu“) ----------------------------- */
/* Wie die Beitragskarte des Entwurfs (PostCard, hell): Bild 3:2 (Radius 16), Kategorie-Label,
   Titel H3, Text, „Lesen →“ rechts unten. Die ganze Karte ist anklickbar (Titel-Link, nur Website). */

.wp-block-group.kib-unterseite {
	position: relative;
	display: flex;
	flex-direction: column;
	transition: border-color var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-group.kib-unterseite > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-group.kib-unterseite > * + * {
	margin-block-start: 16px;
}

/* Bild → Label 24 px */
.wp-block-group.kib-unterseite > .wp-block-image + * {
	margin-block-start: 24px;
}

/* „Lesen →“ sitzt unten (gleich hohe Karten im Raster) */
.wp-block-group.kib-unterseite > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-top: 16px;
}

.wp-block-group.kib-unterseite > p:not([class*="is-style-"]) {
	max-width: var(--kib-mass-eng);
}

.wp-block-group.kib-unterseite:hover,
.wp-block-group.kib-unterseite:focus-within {
	border-color: var(--kib-weg-linie);
}

.kib-unterseite :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Karte klickbar — nur auf der Website, damit im Editor jeder Block erreichbar bleibt */
.wp-site-blocks .kib-unterseite :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-site-blocks .kib-unterseite:hover :is(h2, h3, h4) a {
	color: var(--kib-kellerbraun);
}

/* „Lesen →“: Small 600, Unterstrich 1 px / 6 px, Pfeil 16 px, Abstand 8 px */
.kib-unterseite .wp-block-button.is-style-tertiaer > .wp-block-button__link {
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.875rem;
	padding: 0;
	border-width: 0;
}

.kib-unterseite .wp-block-button.is-style-tertiaer > .wp-block-button__link::after {
	width: 16px;
	height: 16px;
}

.wp-site-blocks .kib-unterseite:hover .wp-block-button.is-style-tertiaer > .wp-block-button__link {
	text-decoration-thickness: 1.5px;
}

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

/* „Lesen →“ als reiner Hinweis (Absatz, kein eigener Link) — wie im Entwurf (PostCard): Die Karte ist
   der Link (Titel-Link über die ganze Karte), „Lesen“ steht darin nur als Text. So gibt es je Karte
   einen Link und keinen zweiten, gleichlautenden „Lesen“-Link für Screenreader und Tastatur.
   Aussehen wie der Tertiär-Link oben: Small 600, Unterstrich 1 px / 6 px, Pfeil 16 px, 8 px Abstand. */
.wp-block-group.kib-unterseite > .kib-lesen-hinweis {
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: flex-end;
	margin-block-start: auto;
	padding-top: 16px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.875rem;
	font-weight: 600;
	color: var(--kib-akzent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: text-decoration-color var(--kib-dauer-schnell) var(--kib-easing);
}

.wp-block-group.kib-unterseite > .kib-lesen-hinweis::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-site-blocks .kib-unterseite:is(:hover, :focus-within) > .kib-lesen-hinweis {
	text-decoration-thickness: 1.5px;
}

.wp-site-blocks .kib-unterseite:is(:hover, :focus-within) > .kib-lesen-hinweis::after {
	transform: translateX(2px);
}

/* 4 · Beiträge zu diesem Bereich ----------------------------------------- */
/* Sektion „Aus der Praxis“ mit Abfrage-Schleife (Kategorie des Bereichs, 2 Beiträge) und den
   Beitragskarten des Blog-Pakets (kib-beitragskarte, blog.css). Ohne veröffentlichte Beiträge
   entfernt inc/blog.php die Sektion („kib-ausblenden-ohne-beitraege“); die Regel hier ist nur die
   Rückfallebene. Im Editor bleibt die Sektion sichtbar. */

.wp-site-blocks .kib-bereich-beitraege:not(:has(.wp-block-post)) {
	display: none;
}

/* Kopfzeile der Sektion: Überschrift links, „Alle Beiträge“ rechts unten (Abstand 48 px) */
.kib-bereich-beitraege-kopf > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Karten auf heller Sektion in Sand (Entwurf: PostCard ton="sand") */
.kib-bereich-beitraege:not(.has-sand-background-color) .wp-block-group.kib-beitragskarte {
	background-color: var(--kib-sand);
	border-color: var(--kib-sand-tief);
}

.kib-bereich-beitraege:not(.has-sand-background-color) .wp-block-group.kib-beitragskarte:hover {
	border-color: var(--kib-weg-linie);
}

.kib-bereich-beitraege:not(.has-sand-background-color) .kib-beitragskarte .wp-block-post-featured-image {
	background-color: var(--kib-sand-tief);
}

/* 9 · Sprungmarken unter dem Seitenkopf (Umbau 17.10.2026) ----------------- */
/* Statt eigener Unterseiten: Pillen-Links zu den Abschnitten der Bereichsseite.
   Farbe folgt dem Bereich (--kib-akzent …), Tippfläche ≥ 44 px, keine Schatten. */

.kib-sprungmarken {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	max-width: 56rem;
}

.kib-sprungmarken a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--kib-akzent-linie, var(--kib-kante-feld));
	border-radius: var(--kib-radius-pill);
	color: var(--kib-akzent-text, var(--kib-tinte));
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25rem;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--kib-dauer-schnell) var(--kib-easing),
		color var(--kib-dauer-schnell) var(--kib-easing);
}

.kib-sprungmarken a::after {
	content: "↓";
	font-weight: 400;
}

@media (max-width: 480px) {
	.kib-sprungmarken {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
}

.kib-sprungmarken a:is(:hover, :focus-visible) {
	background-color: var(--kib-akzent-schleier, var(--kib-sand));
}

.kib-sprungmarken a:focus-visible {
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 3px;
}

/* 10 · Karte „Meine zwei Bereiche“ (Über mich) ---------------------------- */

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

.kib-meine-bereiche > * + * {
	margin-block-start: 24px;
}

.kib-meine-bereiche .kib-mein-bereich {
	padding: 20px 22px;
	border-radius: var(--kib-radius-klein);
	background-color: var(--kib-akzent-schleier, var(--kib-sand));
}

.kib-meine-bereiche .kib-mein-bereich > * {
	margin-block: 0;
}

.kib-meine-bereiche .kib-mein-bereich > * + * {
	margin-block-start: 10px;
}

.kib-meine-bereiche .kib-mein-bereich .is-style-kicker {
	color: var(--kib-akzent-text);
}


/* „Kurz gesagt“ als vier Blöcke unter dem Text (Autismus, Runde 4) */
.kib-kurz-raster > * {
	margin-block: 0;
}

.kib-kurz-block {
	position: relative;
	padding-left: calc(24px + 14px + 14px) !important;
}

.kib-kurz-block::before {
	content: "";
	position: absolute;
	left: 24px;
	top: calc(24px + 0.9rem - 7px);
	width: 14px;
	height: 14px;
	background-color: var(--kib-akzent, 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-kurz-block > p {
	margin: 0;
}