/*
 * Konto-/Login-Menue im Header.
 *
 * Handgeschrieben, kein Build - style.css ist kompiliertes Webpack-Output ohne
 * Quelle. Deshalb stehen hier vollstaendige Selektorpfade: style.css stylt
 * Grundelemente mit Spezifitaeten bis (0,6,2), eine einzelne eigene Klasse
 * verliert dagegen fast immer (CLAUDE.md, "Eigenes CSS gegen style.css").
 *
 * .ls-icon-button am Button ist Pflicht und bleibt: die globale Regel
 * button:not(:is(.ls-icon-button,...)) macht aus jedem anderen Button eine
 * rote Pille.
 */

/* ------------------------------------------------------------- Der Trigger */

.mobile-menu .login-button button.ngo-account-trigger {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
	line-height: 1;
}

.mobile-menu .login-button button.ngo-account-trigger .ngo-account-trigger__label {
	line-height: 1;
	white-space: nowrap;
}

/* Mobil traegt der Header schon Logo und Burger - dort bleibt es beim blanken
   Icon in Originalgroesse. Das Label wird nur optisch entfernt, damit der
   Button seinen zugaenglichen Namen behaelt. */
@media (max-width: 1023px) {
	.mobile-menu .login-button button.ngo-account-trigger .ngo-account-trigger__label {
		border: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/*
 * Ab Desktop eine Pille, damit der Eintrag als Schaltflaeche lesbar ist und
 * nicht als dritter Menuepunkt. Die Werte sind die von .ls-button-outlined aus
 * style.css (2px Rahmen, radius 30px, font-weight 600, Primaerfarbe, Hover auf
 * Sekundaerfarbe) - nur kompakter, siehe die Hoehenrechnung unten. Bewusst
 * nachgebaut statt die Theme-Klasse zu setzen: deren padding von 10px 20px
 * muesste ohnehin ueberschrieben werden, und mobil soll gar keine Pille stehen.
 *
 * HOEHE: Die Menuepunkte daneben sind 20px bei line-height 1.5, also 30px hoch,
 * und sie bestimmen damit die Hoehe von nav.main-menu. .login-menu zentriert
 * sich darin (items-center). Solange der Button nicht hoeher als 30px wird,
 * liegen beide Textmitten aufeinander; jedes Pixel darueber schiebt die
 * Menuepunkte um ein halbes Pixel nach unten und den Button nach oben - genau
 * das war am 20.09.2026 als "nicht in einer Linie" zu sehen.
 * Hier: 16px Zeile + 2x4px padding + 2x2px Rahmen = 28px.
 */
@media (min-width: 1024px) {
	.mobile-menu .login-button button.ngo-account-trigger {
		background-color: transparent;
		border: 2px solid rgb(var(--color-primary));
		border-radius: 30px;
		color: rgb(var(--color-primary));
		font-weight: 600;
		padding: 4px 14px;
		transition: background-color .2s ease, border-color .2s ease, color .2s ease;
	}

	/* .text-icon am Wrapper setzt 24px - in der Pille zu gross. */
	.mobile-menu .login-button button.ngo-account-trigger i {
		font-size: var(--font-size-s);
	}

	.mobile-menu .login-button button.ngo-account-trigger .ngo-account-trigger__label {
		font-size: var(--font-size-s);
	}

	.mobile-menu .login-button button.ngo-account-trigger:hover,
	.mobile-menu .login-button button.ngo-account-trigger:focus-visible {
		border-color: rgb(var(--color-secondary));
		color: rgb(var(--color-secondary));
	}

	/* Offen: gefuellte Pille. Sagt dasselbe wie aria-expanded, nur sichtbar. */
	.mobile-menu .login-button.toggled button.ngo-account-trigger,
	.mobile-menu .login-button.toggled button.ngo-account-trigger:hover {
		background-color: rgb(var(--color-primary));
		border-color: rgb(var(--color-primary));
		color: rgb(var(--color-white));
	}
}

/* Gefuelltes Icon bei Hover und Tastaturfokus. Die bestehenden Regeln in
   style.css zielen auf ein <a>, das es hier nie gab, und auf .toggled - das
   deckt nur den geoeffneten Zustand ab. */
.mobile-menu .login-button button.ngo-account-trigger:hover i.icon-person_default,
.mobile-menu .login-button button.ngo-account-trigger:focus-visible i.icon-person_default {
	display: none;
}

.mobile-menu .login-button button.ngo-account-trigger:hover i.hidden.icon-person_filled,
.mobile-menu .login-button button.ngo-account-trigger:focus-visible i.hidden.icon-person_filled {
	display: inline-block;
}

/* style.css setzt global button:focus-visible{outline:none}. Ohne Ring ist das
   Menue per Tastatur nicht mehr auffindbar - und per Tastatur erreichbar ist es
   erst seit diesem Umbau. */
.mobile-menu .login-button button.ngo-account-trigger:focus-visible {
	outline: 2px solid rgb(var(--color-primary));
	outline-offset: 2px;
}

/* ------------------------------------------------------------- Das Overlay */

/*
 * Kopfzeile im Overlay: mit welchem Konto bin ich hier?
 *
 * Kein Link und kein Menuepunkt, deshalb bekommt die Zeile den gelben Punkt
 * nicht, den style.css jedem <li> im Flyout bei Hover und Fokus voransetzt
 * (.logged-in #mobile-login-flyout>ul>li:before).
 */
.mobile-menu #mobile-login-flyout > ul > li.ngo-account-identity {
	border-bottom: 1px solid rgb(var(--color-grey-light));
	display: block;
	margin-bottom: 8px;
	padding: 0 0 12px;
}

.mobile-menu #mobile-login-flyout > ul > li.ngo-account-identity:before {
	content: none;
}

.mobile-menu #mobile-login-flyout > ul > li.ngo-account-identity .ngo-account-identity__label {
	color: rgb(var(--color-grey-dark));
	display: block;
	font-size: var(--font-size-xxs);
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.mobile-menu #mobile-login-flyout > ul > li.ngo-account-identity .ngo-account-identity__mail {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: 500;
	line-height: 1.35;
	/* Das Panel ist innen 220px breit, Adressen sind laenger. */
	overflow-wrap: anywhere;
}


/*
 * Auf Desktop haengt das Panel bisher an der statischen Position des Flyouts
 * plus right:-2.5rem. Mit einem Label wird der Trigger breiter, und die
 * statische Position wandert mit - das Panel stuende dann rechts daneben.
 * Hier bekommt es einen festen Anker: rechte Kante buendig mit dem Trigger.
 */
@media (min-width: 1024px) {
	.mobile-menu #mobile-login-flyout {
		left: auto;
		right: 0;
		top: 100%;
	}

	.mobile-menu #mobile-login-flyout > ul {
		left: auto;
		right: 0;
		top: 0;
	}
}