/* ==========================================================================
   Komm ins Bauchgefühl — fuss.css (Paket Kopf & Fuß)
   Fußzeile: parts/footer.html → patterns/fuss.php
   Vorlage: design-referenz/components/navigation/SiteFooter.jsx, tokens/responsive.css.
   Kellerbraun, Spalten 1,5fr + 4 × 1fr (≤ 1000 zwei Spalten, ≤ 560 eine), Weg-Linie invers,
   Telefon · E-Mail · Copyright. Links invers-leise, Hover Kalkweiß, Fokus Ocker.
   ========================================================================== */

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.kib-fuss {
	margin-block: 0;
	padding-top: 96px;
	padding-bottom: 48px;
	background-color: var(--kib-kellerbraun, #3B322C);
	color: var(--kib-kalkweiss, #F7F3EC);
	font-family: var(--wp--preset--font-family--grotesk);
	--kib-fokus-farbe: var(--kib-ocker, #C99A5B);
}

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

/* Spalten */
.kib-fuss .kib-fuss-spalten {
	/* Marke nimmt den Rest, die vier Linkspalten sind so breit wie ihr Inhalt (Runde 4: kein Loch vor „Rechtliches“) */
	grid-template-columns: minmax(0, 1fr) repeat(4, auto);
	column-gap: clamp(32px, 4vw, 56px);
	row-gap: 48px;
	align-items: start;
}

@media (max-width: 1000px) {
	.kib-fuss .kib-fuss-spalten {
		grid-template-columns: 1fr 1fr;
		row-gap: 48px;
	}
}

@media (max-width: 560px) {
	.kib-fuss .kib-fuss-spalten {
		grid-template-columns: 1fr;
	}
}

.kib-fuss .kib-fuss-marke,
.kib-fuss .kib-fuss-spalte {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kib-fuss .kib-fuss-marke {
	gap: 24px;
}

.kib-fuss .kib-fuss-spalte {
	gap: 16px;
}

.kib-fuss .kib-fuss-marke > *,
.kib-fuss .kib-fuss-spalte > * {
	margin: 0;
}

/* Marke: Logo invers, Slogan, Satz */
.kib-fuss .kib-fuss-logo {
	line-height: 0;
}

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

.kib-fuss .kib-fuss-slogan {
	max-width: 24ch;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;
	color: var(--kib-kalkweiss, #F7F3EC);
}

.kib-fuss .kib-fuss-text {
	max-width: 30ch;
	font-size: 15px;
	line-height: 24px;
	color: var(--kib-invers-leise, #C9BFB2);
}

/* Spaltentitel: Label 13/16, 600, Versalien, Ocker; Bereiche mit Kleks 10 px */
.kib-fuss .kib-fuss-titel {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: none;
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kib-ocker, #C99A5B);
}

.kib-fuss :is(.kib-fuss-autismus, .kib-fuss-koerper) .kib-fuss-titel::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background-color: var(--kib-kleks-hell, #D6546C);
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

.kib-fuss .kib-fuss-koerper .kib-fuss-titel::before {
	background-color: #8C9A82;
}

/* Linklisten */
.kib-fuss .kib-fuss-links {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kib-fuss .kib-fuss-links li {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 30px;
}

.kib-fuss .kib-fuss-links li::marker {
	content: none;
}

.kib-fuss .kib-fuss-links a,
.kib-fuss .kib-fuss-unten a {
	color: var(--kib-invers-leise, #C9BFB2);
	text-decoration: none;
}
/* Letzte Spalte („Rechtliches“) ab 1001 px: „Datenschutzerklärung“ ragt zwischen 1001 und 1100 px
   (wie im Entwurf) über die Spalte in den Seitenrand. Die Spalte reicht deshalb 32 px in den Rand
   (Spurbreiten unverändert, min-width: 0), und erst wenn der Link auch das überschreitet
   (vergrößerte Text-/Zeichenabstände, WCAG 1.4.12), bricht er um statt seitlich zu scrollen.
   Bei normaler Darstellung bleibt alles wie bisher. */
@media (min-width: 1001px) {
	.kib-fuss .kib-fuss-spalten > .kib-fuss-spalte:last-child {
		margin-inline-end: -32px;
	}

	.kib-fuss .kib-fuss-spalten > .kib-fuss-spalte:last-child .kib-fuss-links a {
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}

.kib-fuss .kib-fuss-links a:hover,
.kib-fuss .kib-fuss-unten a:hover {
	color: var(--kib-kalkweiss, #F7F3EC);
}

/* Weg-Linie, invers */
.kib-fuss .kib-fuss-trenner.wp-block-separator {
	width: 100%;
	max-width: none;
	height: 16px;
	margin: 64px 0 24px;
	border: 0;
	opacity: 1;
	color: transparent;
	background-color: var(--kib-invers-linie, rgba(247, 243, 236, 0.38));
	-webkit-mask: url(../img/weg-trenner.svg) center / 100% 16px no-repeat;
	mask: url(../img/weg-trenner.svg) center / 100% 16px no-repeat;
}

/* Unten: Telefon · E-Mail | © */
.kib-fuss .kib-fuss-unten {
	gap: 32px;
	align-items: center;
}

.kib-fuss .kib-fuss-kontakt {
	gap: 32px;
}

.kib-fuss .kib-fuss-unten p,
.kib-fuss .kib-fuss-unten .wp-block-buttons {
	margin: 0;
	max-width: none;
	font-size: 15px;
	line-height: 30px;
	color: var(--kib-invers-leise, #C9BFB2);
}

/* Telefon und E-Mail sind Button-Blöcke mit Bindung an „bauchgefuehl/kontakt“ (Wert aus
   Einstellungen → Allgemein, bleibt auch nach dem Speichern im Website-Editor aktuell).
   Gestaltet wie schlichte Textlinks: Button-Fläche, Rand, Innenabstand und Button-Schrift aus. */
.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) {
	display: flex;
	gap: 0;
}

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

.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .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-invers-leise, #C9BFB2);
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	word-break: normal;
}

.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--kib-kalkweiss, #F7F3EC);
}

.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .wp-block-button__link:active {
	transform: none;
}

.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .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-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .wp-block-button__link::after {
	content: none;
}

.kib-fuss .kib-fuss-mail .wp-block-button__link::before {
	-webkit-mask-image: url(../img/icons/mail.svg);
	mask-image: url(../img/icons/mail.svg);
}

.kib-fuss .kib-fuss-mail .wp-block-button__link {
	overflow-wrap: anywhere;
}

/* Erzwungene Farben (Windows-Kontrastmodus): Symbole sind CSS-Masken → in Systemfarbe zeichnen */
@media (forced-colors: active) {
	.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .wp-block-button__link::before {
		forced-color-adjust: none;
		background-color: LinkText;
	}
}

/* Tippflächen ≥ 44 px */
@media (max-width: 560px) {
	.kib-fuss .kib-fuss-links a,
	.kib-fuss .kib-fuss-unten a,
	.kib-fuss :is(.kib-fuss-tel, .kib-fuss-mail) .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}