/**
 * Kijuju – globaler Footer
 * Korrigierte Fassung v6 – 2026-08-06
 *
 * Enthält:
 * - Kontaktbereich
 * - Förder- und Partnerlogos
 * - Copyright
 * - rechtliches Menü
 * - responsive Darstellung
 */


/* =========================================================
   Designvariablen
   ========================================================= */

:root {
	--kijuju-footer-background: #111111;
	--kijuju-footer-text: #ffffff;
	--kijuju-footer-muted: #d8d6d0;
	--kijuju-footer-border: rgb(255 255 255 / 18%);
	--kijuju-footer-accent: #18d8ad;
	--kijuju-footer-focus: #ec1e64;
}


/* =========================================================
   Allgemeine Footer-Grundlagen
   ========================================================= */

#footer {
	position: relative;
	z-index: 1;

	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;

	color: var(--kijuju-footer-text);
	background-color: var(--kijuju-footer-background);
}

#footer,
#footer [data-row],
#footer [data-row] > .ct-container {
	background-color: var(--kijuju-footer-background);
}

/* Blocksys feste Footer-Zeilenhöhen zurücksetzen. */
#footer [data-row="middle"],
#footer [data-row="bottom"] {
	--height: auto !important;

	height: auto !important;
	min-height: 0 !important;
}

#footer .ct-widget,
#footer .wp-block-group,
#footer .wp-block-image,
#footer figure,
#footer p {
	margin-top: 0;
	margin-bottom: 0;
}

#footer a {
	color: var(--kijuju-footer-text);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.18em;

	transition:
		color 160ms ease,
		text-decoration-color 160ms ease;
}

#footer a:hover {
	color: var(--kijuju-footer-accent);
}

#footer a:focus-visible {
	outline: 3px solid var(--kijuju-footer-focus);
	outline-offset: 4px;
}


/* =========================================================
   Hauptzeile: Kontakt und Partnerlogos
   ========================================================= */

#footer [data-row="middle"] > .ct-container {
	display: grid !important;
	grid-template-columns:
		minmax(270px, 0.3fr)
		minmax(0, 0.7fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;

	height: auto !important;
	min-height: 0 !important;
	padding-top: 22px;
	padding-bottom: 20px;
}


/* =========================================================
   Kontaktbereich
   ========================================================= */

#footer [data-column="widget-area-1"] {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: stretch;
	justify-content: center;

	min-width: 0;
	padding-right: clamp(26px, 3.5vw, 48px);

	border-right: 1px solid var(--kijuju-footer-border);
}

#footer [data-column="widget-area-1"] .ct-widget {
	width: 100%;
	min-width: 0;
}

#footer [data-column="widget-area-1"] :is(h1, h2, h3) {
	margin: 0 0 0.55rem;

	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;

	color: var(--kijuju-footer-text);
}

/*
 * Grundformat für den Kontaktblock.
 * Die drei Unterbereiche werden über zusätzliche Span-Klassen
 * unabhängig voneinander gewichtet.
 */
#footer [data-column="widget-area-1"] #block-5 p,
#footer [data-column="widget-area-1"] .kijuju-footer-contact {
	font-size: 0.95rem;
	font-weight: 450;
	line-height: 1.38;

	color: var(--kijuju-footer-text);
}

#footer .kijuju-footer-contact__names,
#footer .kijuju-footer-contact__organisation,
#footer .kijuju-footer-contact__details {
	display: block;
}

#footer .kijuju-footer-contact__names {
	margin-bottom: 1rem;

	font-size: 1rem;
	line-height: 1.4;
}

/* Nur die längere Organisationsbeschreibung wird zurückgenommen. */
#footer .kijuju-footer-contact__organisation {
	max-width: 38ch;
	margin-bottom: 1rem;

	font-size: 0.82rem;
	line-height: 1.38;

	color: var(--kijuju-footer-muted);
}

#footer .kijuju-footer-contact__details {
	font-size: 0.95rem;
	line-height: 1.38;
}


/* =========================================================
   Partner- und Förderlogos
   ========================================================= */

#footer [data-column="widget-area-2"] {
	--kijuju-footer-logo-cell: clamp(116px, 11.5vw, 165px);

	display: flex;
	align-items: center;
	justify-content: flex-end;

	width: 100%;
	min-width: 0;
}

#footer [data-column="widget-area-2"] .ct-widget {
	width: 100%;
	min-width: 0;
}

/*
 * Vier begrenzte Grid-Spalten halten die Logos zusammen,
 * richten sie rechts aus und verhindern jede Überlagerung.
 */
#footer [data-column="widget-area-2"] .wp-block-group {
	display: grid !important;
	grid-template-columns: repeat(4, var(--kijuju-footer-logo-cell));
	align-items: center;
	justify-content: end !important;
	justify-items: end;
	gap: 10px;

	width: fit-content;
	max-width: 100%;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
}

#footer [data-column="widget-area-2"] .wp-block-image {
	position: static;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	width: var(--kijuju-footer-logo-cell);
	min-width: 0;
	height: auto;
	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;
}

#footer [data-column="widget-area-2"] .wp-block-image img {
	position: static;

	display: block;

	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;

	object-fit: contain;
	transform: none;
}


/* =========================================================
   Untere Footer-Zeile
   ========================================================= */

#footer [data-row="bottom"] > .ct-container {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;

	height: auto !important;
	min-height: 0 !important;
	padding-top: 8px;
	padding-bottom: 12px;

	border-top: 1px solid var(--kijuju-footer-border);
}


/* =========================================================
   Copyright
   ========================================================= */

#footer .ct-footer-copyright,
#footer .ct-footer-copyright p {
	margin: 0;

	font-size: 0.82rem;
	font-weight: 450;
	line-height: 1.35;

	color: var(--kijuju-footer-muted);
}


/* =========================================================
   Rechtliches Menü
   ========================================================= */

#footer-menu > .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 26px;

	margin: 0;
	padding: 0;

	list-style: none;
}

#footer-menu > .menu > .menu-item {
	margin: 0;
	padding: 0;
}

#footer-menu > .menu > .menu-item > .ct-menu-link {
	display: inline-flex;
	align-items: center;

	min-height: 34px;
	padding: 0.1rem 0;

	font-size: 0.8rem;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-transform: uppercase;

	color: var(--kijuju-footer-text);
}

#footer-menu > .menu > .menu-item > .ct-menu-link:hover {
	color: var(--kijuju-footer-accent);
}


/* =========================================================
   Kritischer Landscape-Bereich: 1000–1199 px
   ========================================================= */

@media (min-width: 1000px) and (max-width: 1199px) {

	#footer [data-row="middle"] > .ct-container {
		grid-template-columns:
			minmax(260px, 0.31fr)
			minmax(0, 0.69fr);
		gap: 22px;
	}

	#footer [data-column="widget-area-1"] {
		padding-right: 20px;
	}

	#footer [data-column="widget-area-2"] {
		--kijuju-footer-logo-cell: clamp(106px, 10.8vw, 128px);
	}

	#footer [data-column="widget-area-2"] .wp-block-group {
		gap: 8px;
	}
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 999px) {

	#footer [data-row="middle"] > .ct-container {
		grid-template-columns:
			minmax(210px, 0.32fr)
			minmax(0, 0.68fr);
		gap: 26px;

		padding-top: 22px;
		padding-bottom: 20px;
	}

	#footer [data-column="widget-area-1"] {
		padding-right: 26px;
	}

	#footer .kijuju-footer-contact__organisation {
		font-size: 0.8rem;
	}

	/* Zwei kompakte, rechtsbündige Logo-Spalten. */
	#footer [data-column="widget-area-2"] {
		--kijuju-footer-logo-cell: clamp(116px, 16vw, 158px);
	}

	#footer [data-column="widget-area-2"] .wp-block-group {
		grid-template-columns: repeat(2, var(--kijuju-footer-logo-cell));
		justify-content: end !important;
		justify-items: end;
		gap: 18px 14px;
	}
}


/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 767px) {

	#footer [data-row="middle"] > .ct-container {
		grid-template-columns: 1fr;
		gap: 22px;

		padding-top: 28px;
		padding-bottom: 22px;
	}

	#footer [data-column="widget-area-1"] {
		display: block;

		padding-right: 0;
		padding-bottom: 24px;

		border-right: 0;
		border-bottom: 1px solid var(--kijuju-footer-border);
	}

	#footer [data-column="widget-area-1"] :is(h1, h2, h3) {
		margin-bottom: 0.6rem;
	}

	#footer .kijuju-footer-contact__names {
		margin-bottom: 0.9rem;
	}

	#footer .kijuju-footer-contact__organisation {
		max-width: 52ch;
		margin-bottom: 0.9rem;

		font-size: 0.84rem;
		line-height: 1.4;
	}

	#footer [data-column="widget-area-2"] {
		--kijuju-footer-logo-cell: min(158px, calc((100vw - 64px) / 2));

		justify-content: flex-start;
	}

	#footer [data-column="widget-area-2"] .wp-block-group {
		grid-template-columns: repeat(2, var(--kijuju-footer-logo-cell));
		justify-content: start !important;
		justify-items: start;
		gap: 22px 14px;

		margin: 0 auto 0 0 !important;
	}

	#footer [data-column="widget-area-2"] .wp-block-image {
		justify-content: flex-start;
	}

	#footer [data-row="bottom"] > .ct-container {
		grid-template-columns: 1fr;
		gap: 6px;

		padding-top: 10px;
		padding-bottom: 16px;
	}

	#footer-menu > .menu {
		justify-content: flex-start;
		gap: 6px 22px;
	}
}


/* =========================================================
   Sehr schmale Mobilgeräte
   ========================================================= */

@media (max-width: 420px) {

	#footer [data-row="middle"] > .ct-container {
		padding-top: 24px;
	}

	#footer [data-column="widget-area-2"] {
		--kijuju-footer-logo-cell: min(138px, calc((100vw - 52px) / 2));
	}

	#footer [data-column="widget-area-2"] .wp-block-group {
		gap: 18px 10px;
	}

	#footer .ct-footer-copyright,
	#footer .ct-footer-copyright p,
	#footer-menu > .menu > .menu-item > .ct-menu-link {
		font-size: 0.78rem;
	}
}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	#footer a {
		transition: none;
	}
}