/* ==========================================================================
   Komm ins Bauchgefühl — muster-angebote.css
   Muster des Pakets „Angebote & Fachkraft“:
   - Rahmen-Karte        (patterns/rahmen-karte.php)  Klassen kib-rahmen, kib-rahmen-zeile
   - Qualifikation       (patterns/qualifikation.php) Klassen kib-qualifikation, kib-quali, kib-platzhalter-bild
   - Rollen              (patterns/rollen.php)        Klasse kib-rolle
   - Angebot-Kopf        (patterns/angebot-kopf.php)  nur Standard-Bausteine, kein eigenes CSS
   Maße nach design-referenz/screens/angebot.js, fachkraft.js, bereich.js (Rahmen).
   Alle 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 · Rahmen-Karte -------------------------------------------------------- */
/* Gruppe „Karte (Sand)“ + kib-kompakt (Radius 16, Innen 32) + kib-rahmen.
   Label „RAHMEN“ → Zeilen (Schlüssel Small leise / Wert Text), getrennt durch 1-px-Linie Sand tief,
   darunter breiter Primär-Button und optional Tertiär-Links. Abstände 16 px wie im Entwurf. */

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

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

/* Label erbt im Entwurf die Zeilenhöhe des Fließtexts (30 px) */
.wp-block-group.kib-rahmen > p:first-child {
	line-height: 1.875rem;
}

/* Button: 16 px Abstand + 8 px Zusatz (wie im Entwurf) */
.wp-block-group.kib-rahmen > .wp-block-buttons {
	margin-block-start: 24px;
}

/* Tertiär-Links unter dem Button: wieder 16 px */
.wp-block-group.kib-rahmen > .wp-block-buttons + .wp-block-buttons {
	margin-block-start: 16px;
}

.wp-block-group.kib-rahmen-zeile > * {
	margin-block-start: 0;
	margin-block-end: 0;
	line-height: 1.875rem;
}

.wp-block-group.kib-rahmen-zeile > * + * {
	margin-block-start: 2px;
}

/* Schlüssel: Small, leise */
.wp-block-group.kib-rahmen-zeile > :first-child {
	font-size: var(--wp--preset--font-size--small);
	color: var(--kib-kellerbraun-hell);
}

/* Linie zwischen den Zeilen: 1 px Sand tief, 16 px darunter */
.wp-block-group.kib-rahmen-zeile + .wp-block-group.kib-rahmen-zeile {
	padding-top: 16px;
	border-top: 1px solid var(--kib-sand-tief);
}

/* Rahmen-Karte auf hellem Grund innerhalb einer Sand-Sektion: Linie in feiner Kante */
.wp-block-group.kib-rahmen:is(.is-style-karte-hell, .is-style-karte-rand) .kib-rahmen-zeile + .kib-rahmen-zeile {
	border-top-color: var(--kib-kante);
}

/* 2 · Qualifikation ------------------------------------------------------- */
/* Helle Karten (karte-hell + kib-kompakt + kib-quali) untereinander, 16 px Abstand.
   Vor jedem Titel ein Kleks: erste Karte groß mit Kern (28 px), weitere einfarbig 16 px,
   gedreht 0° / 40° / −25° wie im Entwurf (DREHUNG). Text rückt um Kleks + 24 px ein. */

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

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

.wp-block-group.kib-quali:is(.kib-kompakt, .is-style-karte-hell, .kib-quali) {
	--kib-quali-innen: 32px;
	--kib-quali-kleks: 16px;
	position: relative;
	/* Feste Spur für den Kleks (28 px, so breit wie der große der ersten Karte): Texte aller Karten
	   beginnen auf derselben Linie (Umbau 18.10.2026). */
	padding-left: calc(var(--kib-quali-innen) + 28px + 20px);
}

@media (max-width: 680px) {
	.wp-block-group.kib-quali:is(.kib-kompakt, .is-style-karte-hell, .kib-quali) {
		--kib-quali-innen: 20px;
		padding-right: 20px;
	}
}

.wp-block-group.kib-quali::before {
	content: "";
	position: absolute;
	left: var(--kib-quali-innen);
	top: calc(var(--kib-quali-innen) + 1rem - 10px); /* halbe Titelzeile (2rem) − 10 px: 6 px bei 16 px Grundschrift, wandert mit */
	width: var(--kib-quali-kleks);
	height: var(--kib-quali-kleks);
	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;
}

/* Erste Karte: großer Kleks mit Kern (Bildmarke), bündig mit der Titeloberkante */
.wp-block-group.kib-qualifikation > .kib-quali:first-child {
	--kib-quali-kleks: 28px;
}

.wp-block-group.kib-qualifikation > .kib-quali:first-child::before {
	top: calc(var(--kib-quali-innen) + 1rem - 16px); /* bei 16 px Grundschrift bündig, wächst mit der Titelzeile */
	background: url(../img/kleks.svg) center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}

.wp-block-group.kib-qualifikation > .kib-quali:nth-child(3n + 2)::before {
	transform: rotate(40deg);
}

.wp-block-group.kib-qualifikation > .kib-quali:nth-child(3n + 3)::before {
	transform: rotate(-25deg);
}

/* Inhalt der Karte: Titel (H3) → 8 px → Zeile; Platzhalter 8 + 12 px darunter */
.wp-block-group.kib-quali > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

.wp-block-group.kib-quali > .is-style-platzhalter {
	margin-block-start: 20px;
}

/* Titel wie im Entwurf zeilenweise füllen (nicht ausbalancieren) — sonst trennt das Handy
   „Staatlich aner-kannte Erzieherin“ statt „Staatlich anerkannte / Erzieherin“. */
.wp-block-group.kib-quali > .wp-block-heading,
.wp-block-group.kib-rolle > .wp-block-heading {
	text-wrap: wrap;
}

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

/* Bild-Platzhalter (zweites Porträt): Platzhalter-Kasten im Bildformat 4:5, ≤ 980 px 3:2.
   Nur für Angemeldete sichtbar (wie jeder Platzhalter). Wird durch einen Bild-Block ersetzt. */
.wp-block-group.is-style-platzhalter.kib-platzhalter-bild {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 4 / 5;
	border-radius: var(--kib-radius-gross);
}

@media (max-width: 980px) {
	.wp-block-group.is-style-platzhalter.kib-platzhalter-bild {
		aspect-ratio: 3 / 2;
	}
}

/* 3 · Rollen („Für wen ich da bin“) --------------------------------------- */
/* Drei Spalten im Kartenraster (kib-karten-3), je 1,5-px-Linie oben in Bereichsfarbe,
   24 px Luft, Label (für wen) → 12 px → Titel in H2-Größe (Gewicht 400) → 12 px → Text. */

.wp-block-group.kib-rolle {
	padding-top: 24px;
	border-top: 1.5px solid var(--kib-akzent);
}

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

.wp-block-group.kib-rolle > * + *,
.wp-block-group.kib-rolle > .is-style-kicker-schlicht + .wp-block-heading {
	margin-block-start: 12px;
}

/* Label erbt im Entwurf die Zeilenhöhe des Fließtexts (30 px) */
.wp-block-group.kib-rolle > p:first-child {
	line-height: 1.875rem;
}

:is(.kib-dunkel, .has-kellerbraun-background-color) .wp-block-group.kib-rolle {
	border-top-color: var(--kib-ocker);
}

/* 4 · Arbeitsweise (Fachkraft) -------------------------------------------- */
/* Spalte mit Zusatzklasse kib-arbeitsweise: Kopf (Kicker, H2, Lead) → 48 px → Weg-Schritte als Liste. */

.wp-block-column.kib-arbeitsweise > .is-style-lead + * {
	margin-block-start: 48px;
}


/* Qualifikations-Karte mit Liste (Fortbildungen), Runde 3 */
.wp-block-group.kib-quali > ul.kib-quali-liste {
	margin-block-start: 12px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-group.kib-quali > ul.kib-quali-liste > li {
	padding-block: 6px;
}

/* Qualifikation (Runde 4): Kopf über zwei Spalten, darunter Fortbildungen als Kartenraster */
.kib-quali-kopf > *,
.kib-fortbildungen > *,
.kib-fortbildung > * {
	margin-block: 0;
}

.kib-quali-kopf > .is-style-kicker + .wp-block-heading {
	margin-block-start: 16px;
}

.kib-quali-kopf > .wp-block-heading + .is-style-lead {
	margin-block-start: 24px;
}

.kib-fortbildung > h3 + p {
	margin-block-start: 6px;
	color: var(--kib-kellerbraun-hell);
}