:root {
	--kijuju-header-logo-overlap: 30px;
	--kijuju-header-menu-text: #111111;
	--kijuju-header-menu-accent: #ec1e64;
	--kijuju-header-background: #ffffff;
	--kijuju-header-focus: #18d8ad;
}


/* =========================================================
   Allgemeiner Header
   ========================================================= */

#header {
	position: relative;
	z-index: 100;
	background-color: var(--kijuju-header-background);
}


/*
 * Blocksy darf den nach unten überstehenden Teil des Logos
 * nicht abschneiden.
 */
#header [data-device="desktop"],
#header [data-device="desktop"] [data-row="middle"],
#header [data-device="desktop"] [data-row="middle"] > .ct-container,
#header [data-device="desktop"] [data-column],
#header [data-device="desktop"] [data-items="primary"] {
	overflow: visible;
}


/* =========================================================
   Jury-Logo – allgemein
   ========================================================= */

#header .kijuju-header-logo .site-logo-container,
#header .kijuju-header-logo img {
	display: block;
}

#header .kijuju-header-logo img {
	display: block;
	width: auto;
	object-fit: contain;
}


/* =========================================================
   Jury-Logo – Desktop
   ========================================================= */

#header [data-device="desktop"] .kijuju-header-logo {
	position: relative;
	z-index: 20;
	transform: translateY(var(--kijuju-header-logo-overlap));
}

#header [data-device="desktop"] .kijuju-header-logo img {
	display: block;
	width: auto;
	height: 180px;
	max-height: none;
	object-fit: contain;
}


/* =========================================================
   Rechte Desktop-Spalte
   Navigation und Förderlogo
   ========================================================= */

#header [data-device="desktop"] [data-column="end"] [data-items="primary"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(18px, 2vw, 32px);
	min-width: 0;
}

#header [data-device="desktop"] nav[data-id="menu"] {
	min-width: 0;
}


/* =========================================================
   Desktop-Hauptnavigation
   ========================================================= */

#header-menu-1 > .menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(4px, 0.8vw, 14px);
	margin: 0;
	padding: 0;
}

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

#header-menu-1 > .menu > .menu-item > .ct-menu-link {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;
	padding: 0.55rem;

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

	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;

	color: var(--kijuju-header-menu-text);
	background-color: transparent;

	transition:
		color 160ms ease,
		background-color 160ms ease;
}


/* Hover-Zustand */

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


/*
 * Aktuelle Seite bzw. aktueller Navigationsbereich.
 * Die pinke Fläche orientiert sich am ausgewählten Entwurf.
 */

#header-menu-1 > .menu > .current-menu-item > .ct-menu-link,
#header-menu-1 > .menu > .current-menu-ancestor > .ct-menu-link,
#header-menu-1 > .menu > .current-page-ancestor > .ct-menu-link,
#header-menu-1 > .menu > .current_page_item > .ct-menu-link {
	color: #ffffff;
	background-color: var(--kijuju-header-menu-accent);
}


/* Tastaturfokus */

#header-menu-1 > .menu > .menu-item > .ct-menu-link:focus-visible {
	position: relative;
	z-index: 2;
	outline: 3px solid var(--kijuju-header-focus);
	outline-offset: 3px;
}


/* =========================================================
   STARK-gemacht-Logo – gemeinsame Grundlagen
   ========================================================= */

#header .ct-header-text[data-id="text"],
#header .ct-header-text[data-id="text"] .entry-content,
#header .ct-header-text[data-id="text"] p {
	margin: 0;
	padding: 0;
}

#header .kijuju-header-sponsor {
	display: block;
	width: 110px;
	max-width: 100%;
	height: auto;
	margin: 0;
	object-fit: contain;
}


/* =========================================================
   Schmalere Desktopansichten
   ========================================================= */

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

	#header [data-device="desktop"] .kijuju-header-logo {
		transform: translateY(28px);
	}

	#header [data-device="desktop"] .kijuju-header-logo img {
		height: 160px;
	}

	#header [data-device="desktop"] [data-column="end"] [data-items="primary"] {
		gap: 14px;
	}

	#header-menu-1 > .menu {
		gap: 0;
	}

	#header-menu-1 > .menu > .menu-item > .ct-menu-link {
		padding-inline: 0.4rem;
		font-size: 0.84rem;
	}

	#header [data-device="desktop"] .kijuju-header-sponsor {
		width: 96px;
	}
}


/* =========================================================
   Tablet und Mobil
   ========================================================= */


/*
 * Auch Blocksys Tablet-/Mobil-Header muss den überstehenden Teil des
 * Logos sichtbar lassen. Bei 999px wechselt Blocksy auf data-device="mobile".
 */
#header [data-device="mobile"],
#header [data-device="mobile"] [data-row="middle"],
#header [data-device="mobile"] [data-row="middle"] > .ct-container,
#header [data-device="mobile"] [data-column],
#header [data-device="mobile"] [data-items="primary"] {
	overflow: visible;
}


#header [data-device="mobile"] .kijuju-header-logo {
	position: relative;
	z-index: 20;
	transform: translateY(18px);
}

#header [data-device="mobile"] .kijuju-header-logo img {
	display: block;
	width: auto;
	height: 126px;
	max-height: none;
	object-fit: contain;
}


/*
 * In der rechten mobilen Spalte stehen das Förderlogo
 * und der Menüschalter nebeneinander.
 */

#header [data-device="mobile"] [data-column="end"] [data-items="primary"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(8px, 2.5vw, 16px);
	min-width: 0;
}


/* Förderlogo im mobilen Header */

#header [data-device="mobile"] .kijuju-header-sponsor {
	display: block;
	width: clamp(76px, 24vw, 100px);
	max-width: 100%;
	height: auto;
	object-fit: contain;
}


/* Menüschalter */

#header [data-device="mobile"] .ct-header-trigger {
	display: grid;
	flex: 0 0 44px;

	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;

	color: var(--kijuju-header-menu-text);

	place-items: center;
}

#header [data-device="mobile"] .ct-header-trigger:hover {
	color: var(--kijuju-header-menu-accent);
}

#header [data-device="mobile"] .ct-header-trigger:focus-visible {
	outline: 3px solid var(--kijuju-header-focus);
	outline-offset: 3px;
}



/* =========================================================
   Kleinere Tablets und Smartphones
   ========================================================= */

@media (max-width: 767px) {

	#header [data-device="mobile"] .kijuju-header-logo {
		transform: translateY(14px);
	}

	#header [data-device="mobile"] .kijuju-header-logo img {
		height: 108px;
	}
}

@media (max-width: 520px) {

	#header [data-device="mobile"] .kijuju-header-logo {
		transform: translateY(10px);
	}

	#header [data-device="mobile"] .kijuju-header-logo img {
		height: 90px;
	}
}


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

@media (max-width: 380px) {

	#header [data-device="mobile"] .kijuju-header-logo {
		transform: translateY(8px);
	}

	#header [data-device="mobile"] .kijuju-header-logo img {
		height: 78px;
	}

	#header [data-device="mobile"] .kijuju-header-sponsor {
		width: 72px;
	}

	#header [data-device="mobile"] [data-column="end"] [data-items="primary"] {
		gap: 6px;
	}
}


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

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

	#header-menu-1 > .menu > .menu-item > .ct-menu-link {
		transition: none;
	}
}

/* =========================================================
   Anchor-Navigation auf der Startseite
   ========================================================= */

/*
 * Die JavaScript-Logik markiert alle gültigen Menü-Links zu
 * Startseiten-Ankern mit .kijuju-anchor-link.
 *
 * Dadurch funktioniert dieselbe Logik sowohl für das Desktop-Menü
 * als auch für Blocksys separates mobiles Offcanvas-Menü.
 *
 * WordPress/Blocksy darf Links zur Startseite nicht zusätzlich
 * über current-menu-item/current_page_item hervorheben.
 */
body.home a.kijuju-anchor-link {
	color: var(--kijuju-header-menu-text) !important;
	background-color: transparent !important;
}


/* Normaler Hover-Zustand */

body.home a.kijuju-anchor-link:hover {
	color: var(--kijuju-header-menu-accent) !important;
	background-color: transparent !important;
}


/*
 * Nur der Anchor, dessen Hash aktuell ausgewählt ist, wird
 * hervorgehoben.
 *
 * Desktop: weiße Schrift auf pinker Fläche.
 */

body.home a.kijuju-anchor-link.kijuju-anchor-active {
	color: #ffffff !important;
	background-color: var(--kijuju-header-menu-accent) !important;
}


/*
 * Auch beim Hover bleibt der aktive Desktop-Link aktiv sichtbar.
 */

body.home a.kijuju-anchor-link.kijuju-anchor-active:hover {
	color: #ffffff !important;
	background-color: var(--kijuju-header-menu-accent) !important;
}


@media (max-width: 999px) {

	/*
	 * Nicht aktive Anchor-Links:
	 * hell wie die übrigen Links im mobilen Menü.
	 */
	body.home a.kijuju-anchor-link {
		color: #ffffff !important;
		background-color: transparent !important;
	}

	/*
	 * Hover bleibt pink.
	 */
	body.home a.kijuju-anchor-link:hover {
		color: var(--kijuju-header-menu-accent) !important;
		background-color: transparent !important;
	}

	/*
	 * Nur der aktuell gewählte Anchor ist pink.
	 */
	body.home a.kijuju-anchor-link.kijuju-anchor-active,
	body.home a.kijuju-anchor-link.kijuju-anchor-active:hover {
		color: var(--kijuju-header-menu-accent) !important;
		background-color: transparent !important;
	}
}