/* ==========================================================================
   Komm ins Bauchgefühl — kopf.css (Paket Kopf & Fuß)
   Kopfzeile: parts/header.html → patterns/kopf.php
   Schublade: parts/menue-schublade.html → patterns/kopf-schublade.php
   Vorlage: design-referenz/components/navigation/SiteHeader.jsx, tokens/responsive.css.

   Umbrüche (wie responsive.css):
     ≤ 1360 Telefon weg · 1001–1180 Dachmarke weg · ≤ 1256 Innenabstand 24, Abstände enger
     ≤ 1000 Navigation → Knopf „Menü“ + Schublade · ≤ 560 Dachmarke + Button weg, Innenabstand 18
   Zusätzlich (der Entwurf läuft dort über den Rand): 561–760 Dachmarke weg;
   ab 1257 darf die Kopfzeile breiter als der Inhalt (1064) werden, ohne den Seitenrand zu überschreiten.
   Reicht der Platz trotzdem nicht (Jana ergänzt/verlängert Menüpunkte, größere Textabstände), blendet
   kopf.js stufenweise aus: Telefon → Dachmarke → „Menü“ + Schublade (Abschnitt 7).
   ========================================================================== */

/* 0 · Sprungziele und Fokus nicht unter der klebenden Kopfzeile (WCAG 2.4.11) -----
   --kib-kopf-abstand = Unterkante der klebenden Kopfzeile inkl. Admin-Leiste (setzt kopf.js);
   ohne Skript gilt die höchste Kopfzeile (85 px: Bereichsleiste, ≤ 560 px). */

html {
	scroll-padding-top: calc(var(--kib-kopf-abstand, 85px) + var(--kib-abschnitte-hoehe, 0px) + 16px);
}

/* Weiches Scrollen zu Sprungmarken (Umbau 06.11.2026); bei „Bewegung reduzieren“ sofort (basis.css). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* 1 · Rahmen: klebend, Kalkweiß, 1-px-Unterkante, Farbleiste nur mit Bereich ---- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* Die Admin-Leiste scrollt hier mit. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.kib-kopf {
	--kib-kopf-rand: var(--wp--style--root--padding-left, 48px);
	margin-block: 0;
	padding-top: 18px;
	padding-bottom: 18px;
	background-color: var(--kib-kalkweiss, #F7F3EC);
	border-bottom: 1px solid var(--kib-kante, #DED2C1);
	color: var(--kib-kellerbraun, #3B322C);
	font-family: var(--wp--preset--font-family--grotesk);
}

body:is(.bereich-autismus, .bereich-koerper) .kib-kopf {
	border-top: 4px solid var(--kib-akzent, #842F45);
}

@media (max-width: 1256px) {
	.kib-kopf.kib-kopf {
		--kib-kopf-rand: 24px;
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 560px) {
	.kib-kopf.kib-kopf {
		--kib-kopf-rand: 18px;
		padding-left: 18px;
		padding-right: 18px;
	}
}

.kib-kopf .kib-kopf-innen {
	gap: 48px;
	align-items: center;
	min-height: 42px;
}

@media (max-width: 1256px) {
	/* Wie im Entwurf: Container 1160 abzüglich 2 × 24 Innenabstand (statt 2 × 48) */
	.kib-kopf .kib-kopf-innen {
		gap: 24px;
	}

	.kib-kopf .kib-kopf-innen.alignwide {
		/* --kib-kopf-bedarf: gemessene Breite der Zeile (kopf.js) — ein längeres Menü darf die Zeile bis zum Seitenrand verbreitern */
		max-width: max(calc(var(--wp--style--global--wide-size, 1064px) + 48px), var(--kib-kopf-bedarf, 0px));
	}
}

@media (max-width: 359px) {
	/* 320 px: Logo 190 + „Menü“ passen sonst nicht zwischen die 18-px-Ränder (Knopf bleibt 44 px hoch) */
	.kib-kopf .kib-kopf-innen {
		gap: 8px;
	}
}

/* Ab 1257 px ist die Zeile breiter als der Inhalt (1064): Logo + Dachmarke 409, Navigation 514,
   Button 131 (+ Telefon 130 ab 1361) und Abstände. Wie im Entwurf beginnt sie an der linken
   Inhaltskante und reicht nach rechts darüber hinaus — aber nie über den Seitenrand: fehlt Platz,
   rückt sie nach links und die Abstände schrumpfen bis 24 px (im Entwurf lief sie dort aus dem Bild).
   Ist das Menü länger als vorgesehen, gilt die gemessene Breite --kib-kopf-bedarf (kopf.js). */
@media (min-width: 1257px) {
	.kib-kopf .kib-kopf-innen.alignwide {
		--kib-kopf-min: max(1102px, var(--kib-kopf-bedarf, 0px)); /* 409 + 514 + 131 + 2 × 24 */
		--kib-kopf-max: max(1150px, var(--kib-kopf-bedarf, 0px) + 48px); /* 409 + 514 + 131 + 2 × 48 */
		max-width: var(--kib-kopf-max);
		margin-left: max(0px, min((100% - var(--wp--style--global--wide-size, 1064px)) / 2, 100% - var(--kib-kopf-min))) !important;
		margin-right: auto !important;
		gap: 24px;
	}
}

@media (min-width: 1361px) {
	.kib-kopf .kib-kopf-innen.alignwide {
		--kib-kopf-min: max(1256px, var(--kib-kopf-bedarf, 0px)); /* + Telefon 130 + 24 */
		--kib-kopf-max: max(1304px, var(--kib-kopf-bedarf, 0px) + 48px);
	}
}

/* 2 · Marke: Logo │ Komm ins Bauchgefühl ---------------------------------- */

.kib-kopf .kib-kopf-marke {
	gap: 18px;
	flex-shrink: 0;
}

.kib-kopf .kib-kopf-logo {
	margin: 0;
	flex-shrink: 0;
	line-height: 0;
}

.kib-kopf .kib-kopf-logo a {
	display: block;
	border-radius: 2px;
}

@media (max-width: 1000px) {
	/* Tippfläche ≥ 44 px (Logo bleibt 190 × 35, Kopfzeile gleich hoch) */
	.kib-kopf .kib-kopf-logo a {
		padding-block: 4.5px;
		margin-block: -4.5px;
	}
}

.kib-kopf .kib-kopf-logo img {
	display: block;
	width: 190px;
	height: 35px;
	max-width: none;
	border-radius: 0;
}

.kib-kopf .kib-dachmarke {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.005em;
	font-variation-settings: "opsz" 18, "SOFT" 40;
	color: var(--kib-kellerbraun, #3B322C);
	white-space: nowrap;
}

.kib-kopf .kib-dachmarke::before {
	content: "";
	flex: none;
	width: 1px;
	height: 28px;
	background-color: var(--kib-kante, #DED2C1);
}

@media (min-width: 1001px) and (max-width: 1180px), (max-width: 760px) {
	.kib-kopf .kib-dachmarke {
		display: none;
	}
}

/* 3 · Navigation als Leiste (ab 1001 px) ---------------------------------- */

.kib-kopf nav.kib-kopf-nav {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	color: var(--kib-kellerbraun, #3B322C);
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	gap: 32px;
	flex-wrap: nowrap;
}

@media (max-width: 1256px) {
	.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		gap: 16px;
	}
}

/* Hauptpunkte: Small 500, aktiv 600 in Bereichsfarbe + 1,5-px-Unterstrich */
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1.5px solid transparent;
	transition: border-color var(--kib-dauer-schnell, 140ms) var(--kib-easing, ease), color var(--kib-dauer-schnell, 140ms) var(--kib-easing, ease);
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	white-space: nowrap;
	text-decoration: none;
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover {
	border-bottom-color: var(--kib-kante, #DED2C1);
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) {
	color: var(--kib-akzent, #842F45);
	border-bottom-color: var(--kib-akzent, #842F45);
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	font-weight: 600;
}

/* Bereichspunkte: Kleks 10 px, 60 % (aktiv 100 %); Körperarbeit Salbei tief, 140° gedreht */
.kib-kopf .wp-block-navigation-item.kib-nav-koerper {
	--kib-nav-farbe: var(--kib-koerper-akzent, #58634F);
	--kib-nav-drehung: 140deg;
}

.kib-kopf .wp-block-navigation-item.kib-nav-autismus {
	--kib-nav-farbe: var(--kib-autismus-akzent, #842F45);
	--kib-nav-drehung: 0deg;
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:is(.kib-nav-koerper, .kib-nav-autismus) > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background-color: var(--kib-nav-farbe);
	opacity: 0.6;
	transform: rotate(var(--kib-nav-drehung));
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:is(.kib-nav-koerper, .kib-nav-autismus):is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::before {
	opacity: 1;
}

/* Pfeil (Untermenü-Knopf): Lucide chevron-down 14 px, 60 % */
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
	width: 14px;
	height: 14px;
	margin: 0 0 0 6px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
}

.kib-kopf nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

.kib-kopf nav .wp-block-navigation__submenu-icon::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/chevron-down.svg) center / contain no-repeat;
	mask: url(../img/icons/chevron-down.svg) center / contain no-repeat;
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon:is(:focus-visible, [aria-expanded="true"]) {
	opacity: 1;
	outline-offset: 1px;
}

/* Untermenü: Kalkweiß, 1-px-Rand, 3-px-Oberkante in Farbe des Bereichs, Radius 16, min. 252 px, kein Schatten */
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	top: 100%;
	left: -16px;
	right: auto;
	min-width: 252px;
	margin-top: 10px;
	padding: 12px;
	gap: 0;
	background-color: var(--kib-kalkweiss, #F7F3EC);
	border: 1px solid var(--kib-kante, #DED2C1);
	border-top: 3px solid var(--kib-nav-farbe, var(--kib-akzent, #842F45));
	border-radius: 16px;
	box-shadow: none;
	color: var(--kib-tinte, #2A2521);
	font-weight: 400;
}

/* Brücke über die 10-px-Lücke, damit das Untermenü beim Hinüberfahren offen bleibt */
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	top: -14px;
	height: 14px;
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 22px;
	font-weight: 400;
	color: var(--kib-tinte, #2A2521);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--kib-dauer-schnell, 140ms) var(--kib-easing, ease);
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--kib-sand, #E9DFCF);
}

.kib-kopf nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	outline-offset: -2px;
}

/* Escape schließt ein per Maus geöffnetes Untermenü (kopf.js setzt kib-zu, bis die Maus den Punkt verlässt) */
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child.kib-zu > .wp-block-navigation__submenu-container {
	visibility: hidden;
	opacity: 0;
}

/* Aktuelle Seite im Untermenü (und in der Schublade, Abschnitt 6): nicht nur die Sand-Fläche, sondern auch
   Schriftstärke 600 und eine 3-px-Linie links in der Farbe des Bereichs (WCAG 1.4.1 / 1.4.11) */
.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	position: relative;
	font-weight: 600;
}

.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background-color: var(--kib-nav-farbe, var(--kib-akzent, #842F45));
}

/* 4 · Telefon und Button rechts -------------------------------------------- */

.kib-kopf .kib-kopf-aktion {
	gap: 24px;
	flex-shrink: 0;
}

.kib-kopf .kib-kopf-tel {
	margin: 0;
	max-width: none;
	font-size: 15px;
	line-height: 24px;
	white-space: nowrap;
}

/* Telefon in Kopfzeile und Schublade ist ein Button-Block mit Bindung an „bauchgefuehl/kontakt“
   (Wert aus Einstellungen → Allgemein, bleibt auch nach dem Speichern im Website-Editor aktuell).
   Gestaltet wie ein schlichter Textlink: Button-Fläche, Rand, Innenabstand und Button-Schrift aus. */
.kib-kopf .kib-kopf-tel,
.kib-schublade .kib-schublade-tel {
	gap: 0;
}

.kib-kopf .kib-kopf-tel .wp-block-button,
.kib-schublade .kib-schublade-tel .wp-block-button {
	display: flex; /* Link als Flex-Element: keine zusätzliche Zeilenbox (sonst 3 px höher) */
	margin: 0;
}

.kib-kopf .kib-kopf-tel .wp-block-button__link,
.kib-schublade .kib-schublade-tel .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: transparent;
	color: var(--kib-kellerbraun-hell, #5A4E45);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	word-break: normal;
}

.kib-kopf .kib-kopf-tel .wp-block-button__link:hover,
.kib-schublade .kib-schublade-tel .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--kib-kellerbraun, #3B322C);
	text-decoration: underline;
}

.kib-kopf .kib-kopf-tel .wp-block-button__link:active,
.kib-schublade .kib-schublade-tel .wp-block-button__link:active {
	transform: none;
}

.kib-kopf .kib-kopf-tel .wp-block-button__link::before,
.kib-schublade .kib-schublade-tel .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/phone.svg) center / contain no-repeat;
	mask: url(../img/icons/phone.svg) center / contain no-repeat;
}

.kib-kopf .kib-kopf-tel .wp-block-button__link::after,
.kib-schublade .kib-schublade-tel .wp-block-button__link::after {
	content: none;
}

.kib-kopf .kib-kopf-cta {
	margin: 0;
	flex-shrink: 0;
	flex-wrap: nowrap;
}

.kib-kopf .kib-kopf-cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 1360px) {
	.kib-kopf .kib-kopf-tel {
		display: none;
	}
}

@media (max-width: 560px) {
	.kib-kopf .kib-kopf-aktion {
		display: none;
	}
}

/* 5 · Knopf „Menü“ und Schließen-Knopf (gleiche Form, Rand, Radius 12) ------ */

.kib-kopf nav .wp-block-navigation__responsive-container-open,
.kib-schublade .kib-schublade-zu {
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--kib-kante, #DED2C1);
	border-radius: 12px;
	background-color: var(--kib-kalkweiss, #F7F3EC);
	color: var(--kib-kellerbraun, #3B322C);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 15px;
	line-height: 18px; /* Entwurf: line-height normal → 38 px hoch */
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--kib-dauer-schnell, 140ms) var(--kib-easing, ease), border-color var(--kib-dauer-schnell, 140ms) var(--kib-easing, ease);
}

.kib-kopf nav .wp-block-navigation__responsive-container-open:hover,
.kib-schublade .kib-schublade-zu:hover {
	background-color: var(--kib-sand, #E9DFCF);
}

.kib-kopf nav .wp-block-navigation__responsive-container-open::before,
.kib-schublade .kib-schublade-zu::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/menu.svg) center / contain no-repeat;
	mask: url(../img/icons/menu.svg) center / contain no-repeat;
}

.kib-schublade .kib-schublade-zu::before {
	-webkit-mask-image: url(../img/icons/x.svg);
	mask-image: url(../img/icons/x.svg);
}

.kib-schublade .kib-schublade-zu svg {
	display: none;
}

@media (min-width: 1001px) {
	.kib-kopf nav .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

@media (max-width: 1000px) {
	.kib-kopf nav .wp-block-navigation__responsive-container-open {
		display: inline-flex;
	}

	.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 560px) {
	.kib-kopf nav .wp-block-navigation__responsive-container-open,
	.kib-schublade .kib-schublade-zu {
		min-height: 44px;
	}
}

@media (max-width: 359px) {
	.kib-kopf nav .wp-block-navigation__responsive-container-open,
	.kib-schublade .kib-schublade-zu {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Solange die Schublade offen ist, liegt der Schließen-Knopf genau über „Menü“ (Lage setzt kopf.js). */
html.has-modal-open .kib-kopf nav .wp-block-navigation__responsive-container-open {
	opacity: 0;
}

/* 6 · Schublade (bis 1000 px): klappt unter der Kopfzeile auf ------------- */

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--kib-kopf-unten, 80px);
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	background-color: transparent;
	color: var(--kib-tinte, #2A2521);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: kib-schublade-ein var(--kib-dauer, 240ms) var(--kib-easing, ease);
}

@keyframes kib-schublade-ein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: 100%;
	max-width: none;
	margin: 0;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	padding: 24px 24px 32px;
	background-color: var(--kib-kalkweiss, #F7F3EC);
	border-bottom: 1px solid var(--kib-kante, #DED2C1);
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	max-width: var(--wp--style--global--wide-size, 1160px);
	margin: 0 auto;
	padding: 0;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: 0;
}

/* Einträge: Body 17/24, Hauptpunkte 600, Unterpunkte 400 und 30 px eingerückt, aktiv Sand */
.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	color: var(--kib-tinte, #2A2521);
	text-decoration: none;
	transition: background-color var(--kib-dauer-schnell, 140ms) var(--kib-easing, ease);
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 12px 14px 12px 30px;
	font-weight: 400;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--kib-sand, #E9DFCF);
}

/* Aktuelle Seite: zusätzlich 600 und 3-px-Linie (::before, siehe Untermenü in Abschnitt 3) */
.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	position: relative;
	font-weight: 600;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline-offset: -2px;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 2px 0 0;
	padding: 0;
	overflow: visible;
	visibility: visible;
	opacity: 1;
	border: 0;
	border-radius: 0;
	background: none;
}

.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Telefon + „Erstgespräch anfragen“ aus der Vorlage „Menü-Schublade“ */
.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container {
	display: block;
	margin-top: 12px;
}

.kib-schublade {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px; /* wie im Entwurf: 2 px Zeilenabstand + 12 px */
}

.kib-schublade > * {
	margin: 0;
}

.kib-schublade .kib-schublade-tel {
	max-width: none;
	font-size: 15px;
	line-height: 30px;
}

.kib-schublade .kib-schublade-tel .wp-block-button__link {
	padding: 12px 14px;
	border-radius: 12px;
	font-weight: 400; /* wie Entwurf; die Schublade liegt in nav.kib-kopf-nav (500) */
}

.kib-schublade .kib-schublade-cta {
	margin: 0;
}

/* Schließen-Knopf: liegt über „Menü“ in der Kopfzeile (Werte von kopf.js, Rückfall rechts oben) */
.kib-kopf nav .wp-block-navigation__responsive-container .kib-schublade-zu {
	display: inline-flex;
	position: fixed;
	z-index: 3;
	top: var(--kib-menue-oben, 18px);
	left: var(--kib-menue-links, auto);
	right: var(--kib-menue-rechts, 24px);
	width: var(--kib-menue-breite, auto);
	height: var(--kib-menue-hoehe, auto);
}

/* 7 · Platz-Prüfung (kopf.js) ----------------------------------------------
   Passt die Zeile nicht zwischen die Ränder (Jana ergänzt oder verlängert Menüpunkte, größere
   Textabstände), setzt kopf.js nacheinander: ohne Telefon → ohne Dachmarke → „Menü“ mit Schublade
   (wie unter 1000 px; Telefon/Dachmarke kommen dann wieder, wenn Platz ist). */

.kib-kopf.kib-kopf-ohne-tel .kib-kopf-tel,
.kib-kopf.kib-kopf-ohne-dachmarke .kib-dachmarke {
	display: none;
}

.kib-kopf.kib-kopf-kompakt nav .wp-block-navigation__responsive-container-open {
	display: inline-flex;
}

.kib-kopf.kib-kopf-kompakt nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none;
}

@media (min-width: 1257px) {
	/* Ohne Telefon/Dachmarke ist die Zeile kürzer als die festen Werte oben: gemessene Breite verwenden */
	.kib-kopf:is(.kib-kopf-ohne-tel, .kib-kopf-ohne-dachmarke) .kib-kopf-innen.alignwide {
		--kib-kopf-min: var(--kib-kopf-bedarf, 1102px);
		--kib-kopf-max: calc(var(--kib-kopf-bedarf, 1102px) + 48px);
	}

	/* Mit „Menü“ steht die Zeile wie die Inhalte in der 1064-px-Breite */
	.kib-kopf.kib-kopf-kompakt .kib-kopf-innen.alignwide {
		--kib-kopf-min: var(--kib-kopf-bedarf, 0px);
		--kib-kopf-max: max(var(--wp--style--global--wide-size, 1064px), var(--kib-kopf-bedarf, 0px));
	}
}

/* 8 · Erzwungene Farben (Windows-Kontrastmodus) ------------------------------
   Symbole sind CSS-Masken auf einer Hintergrundfarbe — die würde hier durch „Canvas“ ersetzt und
   verschwinden. Deshalb in Systemfarben zeichnen; Unterstrich nur am aktiven Hauptpunkt. */

@media (forced-colors: active) {
	.kib-kopf nav .wp-block-navigation__submenu-icon::before,
	.kib-kopf nav .wp-block-navigation__responsive-container-open::before,
	.kib-schublade .kib-schublade-zu::before {
		forced-color-adjust: none;
		background-color: ButtonText;
	}

	.kib-kopf .kib-kopf-tel .wp-block-button__link::before,
	.kib-schublade .kib-schublade-tel .wp-block-button__link::before {
		forced-color-adjust: none;
		background-color: LinkText;
	}

	.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item,
	.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover {
		border-bottom-color: Canvas;
	}

	.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor) {
		border-bottom-color: Highlight;
	}

	.kib-kopf nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
	.kib-kopf nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
		forced-color-adjust: none;
		background-color: Highlight;
	}
}


/* 12 · Abschnittsleiste (assets/js/abschnitte.js, Umbau 18.10.2026) ----------------
   Schmale Leiste unter der klebenden Kopfzeile auf Seiten mit Sprungmarken (Körperarbeit, Autismus).
   Liegt absolut unter der Kopfzeile (ändert ihre Höhe nicht → kein Springen der Seite), erscheint erst,
   wenn die Sprungmarken im Seitenkopf aus dem Bild sind. Aktiver Abschnitt: Fläche im Bereichs-Schleier. */

.kib-abschnitte {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: -1;
	background-color: var(--kib-kalkweiss);
	border-bottom: 1px solid var(--kib-kante);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition:
		transform var(--kib-dauer, 0.25s) var(--kib-easing, ease),
		opacity var(--kib-dauer, 0.25s) var(--kib-easing, ease),
		visibility 0s linear var(--kib-dauer, 0.25s);
}

.kib-abschnitte.ist-sichtbar {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition:
		transform var(--kib-dauer, 0.25s) var(--kib-easing, ease),
		opacity var(--kib-dauer, 0.25s) var(--kib-easing, ease),
		visibility 0s;
}

.kib-abschnitte-innen {
	display: flex;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	padding: 4px 48px;
}

.kib-abschnitte-titel {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kib-akzent-text, var(--kib-kellerbraun));
}

.kib-abschnitte-titel::before {
	content: "";
	width: 10px;
	height: 10px;
	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;
	transform: rotate(var(--kib-kleks-drehung, 0deg));
}

.kib-abschnitte-liste {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kib-abschnitte-liste::-webkit-scrollbar {
	display: none;
}

.kib-abschnitte-liste > li {
	flex: none;
	margin: 0;
}

/* Ohne Titel beginnt der Text des ersten Punkts auf der Logo-Kante */
@media (min-width: 681px) {
	.kib-abschnitte-innen > .kib-abschnitte-liste:first-child {
		margin-left: -16px;
	}
}

.kib-abschnitte-liste a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--kib-radius-pill, 999px);
	color: var(--kib-kellerbraun-hell);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--kib-dauer-schnell, 0.15s) var(--kib-easing, ease),
		color var(--kib-dauer-schnell, 0.15s) var(--kib-easing, ease);
}

.kib-abschnitte-liste a:hover {
	color: var(--kib-tinte);
	background-color: var(--kib-sand);
}

.kib-abschnitte-liste a[aria-current] {
	color: var(--kib-akzent-text, var(--kib-tinte));
	background-color: var(--kib-akzent-schleier, var(--kib-sand));
	font-weight: 600;
}

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

/* Fortschritt: feine Linie in Bereichsfarbe an der Unterkante */
.kib-abschnitte-fortschritt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background-color: var(--kib-akzent, var(--kib-kleks));
	transform: scaleX(0);
	transform-origin: left center;
}

@media (max-width: 680px) {
	.kib-abschnitte-innen {
		padding-left: 8px;
		padding-right: 0;
	}

	.kib-abschnitte-titel {
		display: none;
	}

	.kib-abschnitte-liste a {
		padding: 0 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kib-abschnitte,
	.kib-abschnitte.ist-sichtbar {
		transition: none;
	}
}