/* header.css – Kopfbereich, Logo und Hauptnavigation.

   Nachbau der Live-Seite. Gemessene Werte (2026-08-21, www.achilles-stiftung.de):
   Balken 100px hoch, #a31214, Innenabstand 0 45px, fixiert, z-index 110.
   Menülinks 13px/700, 1px Sperrung, Grossbuchstaben, Zeilenhöhe = Balkenhöhe.
   Hover und Untermenü-Hover: #e6ae48. Untermenü: 235px, schwarz, #a6a6a6.
   Umbruch auf die mobile Navigation bei 1000px. */

.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 110;
	height: var(--header-h);
	background: var(--brand-red);
}

/* Die WordPress-Adminleiste ist selbst fixiert und läge sonst über dem Balken. */
.admin-bar .site-header {
	top: 32px;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 45px;
}

/* Der Inhalt beginnt unter dem fixierten Balken. */
.site-content {
	margin-top: var(--header-h);
}

/* --- Logo ------------------------------------------------------------------ */

/* Absolut positioniert, damit das schwarze Quadrat – wie live – randlos am
   linken Rand sitzt und die 45px Innenabstand des Balkens nicht mitnimmt. */
.site-branding {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.site-logo {
	display: block;
	height: 100%;
}

/* Bewusst NICHT `.site-logo img`: eine Typ-plus-Klasse-Auswahl schlaegt die
   Klassen-Auswahl in der Media Query unten und beide Logos waeren mobil 0px
   hoch. Jede Variante bekommt darum ihre eigene Regel. */
.site-logo__mark,
.site-branding .custom-logo {
	display: block;
	width: auto;
	height: 100%;
}

/* Bis 1000px übernimmt die Wortmarke, siehe Media Query unten. */
.site-logo__wordmark {
	display: none;
}

/* --- Hauptnavigation (ab 1001px) ------------------------------------------- */

.nav-toggle {
	display: none;
}

.main-navigation {
	margin-left: auto;
}

.main-navigation__list,
.main-navigation .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation__list {
	display: flex;
}

.main-navigation__list > li {
	position: relative;
}

.main-navigation a {
	display: block;
	padding: 0 10px;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: var(--header-h);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	color: var(--brand-gold);
}

/* Untermenü: aufklappendes schwarzes Panel unter dem Elternpunkt. */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 235px;
	padding: 14px 0 22px;
	background: var(--dropdown-bg);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.main-navigation__list > li:hover > .sub-menu,
.main-navigation__list > li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.main-navigation .sub-menu a {
	padding: 0 25px;
	color: var(--dropdown-link);
	font-size: 13px;
	font-weight: 600;
	line-height: 34px;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

/* Der Aufklapp-Button gehört zur mobilen Navigation; am Desktop reicht Hover
   beziehungsweise :focus-within. */
.submenu-toggle {
	display: none;
}

/* --- Mobile Navigation (bis 1000px) --------------------------------------- */

@media only screen and (max-width: 1000px) {

	.main-navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		margin-left: 0;
		background: var(--brand-red);
	}

	.main-navigation__list {
		display: none;
		padding: 10px 45px 24px;
	}

	.main-navigation.is-open .main-navigation__list {
		display: block;
	}

	.main-navigation__list > li {
		position: static;
	}

	/* Live-Werte der mobilen Navigation: 15px/700, Grossbuchstaben,
	   Innenabstand 9px 0. Erste Ebene #dd9933, zweite Ebene weiss. */
	.main-navigation__list > li > a {
		padding: 9px 0;
		color: var(--social-bg);
		font-size: 15px;
		line-height: 17px;
		letter-spacing: normal;
	}

	.main-navigation .sub-menu {
		position: static;
		top: auto;
		min-width: 0;
		padding: 0 0 6px 16px;
		background: none;
		visibility: visible;
		opacity: 1;
		display: none;
	}

	.main-navigation .sub-menu.is-open {
		display: block;
	}

	.main-navigation .sub-menu a {
		padding: 9px 0;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 17px;
		text-transform: uppercase;
		white-space: normal;
	}

	/* Elternpunkt und Aufklapp-Button in einer Zeile. */
	.main-navigation__list > li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.main-navigation__list > li.menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.main-navigation__list > li.menu-item-has-children > .sub-menu {
		flex: 0 0 100%;
	}

	.submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 35px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--social-bg);
		cursor: pointer;
	}

	.submenu-toggle[aria-expanded="true"] .achilles-icon {
		transform: rotate(180deg);
	}

	/* Hamburger links, Logo mittig – wie live. */
	.nav-toggle {
		display: flex;
		align-items: center;
		height: 100%;
		margin: 0 20px 0 0;
		padding: 0;
		border: 0;
		background: none;
		color: #fff;
		cursor: pointer;
	}

	.nav-toggle__icon--close,
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu {
		display: none;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
		display: block;
	}

	.site-branding {
		right: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-logo {
		height: auto;
	}

	/* Live zeigt hier die Wortmarke mit 26px Höhe; das läuft auf schmalen
	   Geräten über den rechten Rand hinaus. Deshalb dieselbe Höhe, aber
	   begrenzt auf die verfügbare Breite. */
	.site-logo__mark {
		display: none;
	}

	.site-logo__wordmark {
		display: block;
		width: min(366px, calc(100vw - 150px));
		height: auto;
	}
}

@media only screen and (max-width: 782px) {

	/* Die Adminleiste ist unter 783px nicht mehr fixiert, aber 46px hoch. */
	.admin-bar .site-header {
		top: 46px;
	}
}

@media only screen and (max-width: 566px) {

	.site-header__inner {
		padding: 0 25px;
	}

	.main-navigation__list {
		padding-right: 25px;
		padding-left: 25px;
	}
}