/*
 * Gestaltung außerhalb der Planseite: Benutzermenü in der Navigation und
 * Anmeldeformular. Beides kann auf jeder Seite des Auftritts erscheinen,
 * deshalb ein eigenes, schlankes Stylesheet.
 */

/* Benutzermenü ----------------------------------------------------------- */

.dpm-usermenu__icon {
	display: inline-block;
	vertical-align: -0.15em;
}

/*
 * Ausgeloggt eine Kontur, eingeloggt dieselbe Form flächig im Akzentgrün.
 * Der Zustand ist damit auch im Augenwinkel erkennbar, ohne zusätzliches
 * Markup und ohne einen zweiten Satz Symbole.
 */
.dpm-usermenu--in .dpm-usermenu__icon {
	fill: #8ba37c;
	stroke: #8ba37c;
}

.dpm-usermenu--out .dpm-usermenu__icon {
	fill: none;
	stroke: currentcolor;
}

/*
 * Salient rendert dasselbe Menü mehrfach: im Kopfbereich, im Sticky-Header und
 * im mobilen Menü. Unterhalb von 1000 px erscheint zusätzlich eine eigene
 * Kopfleiste neben dem Hamburger-Symbol – dort wäre der Eintrag ein zweites Mal
 * zu sehen, ohne seine Unterpunkte. Diese Kopie wird ausgeblendet; die Fassung
 * im aufgeklappten Menü bleibt.
 */
/*
 * Zur Spezifität: Salient setzt dort
 *   .nectar-mobile-only.mobile-header li { display: flex }
 * das ist (0,2,1). Der erste Selektor hier liegt bei (0,3,1) und gewinnt damit
 * ohne !important. Die beiden folgenden fangen den Fall ab, dass nur eine der
 * beiden Klassen gesetzt ist.
 */
.nectar-mobile-only.mobile-header li.dpm-usermenu,
.nectar-mobile-only li.dpm-usermenu,
.mobile-header li.dpm-usermenu {
	display: none;
}

/* Im mobilen Menü darf das Symbol mitwachsen. */
#slide-out-widget-area .dpm-usermenu__icon,
.slide-out-widget-area .dpm-usermenu__icon,
#mobile-menu .dpm-usermenu__icon {
	width: 1em;
	height: 1em;
}

/*
 * Salient blendet Untermenüs im Kopfbereich per Hover ein. Für die
 * Tastaturbedienung fehlt der Fokus-Zustand – der wird hier ergänzt.
 */
.dpm-usermenu:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Anmeldeformular -------------------------------------------------------- */

/*
 * Salient zeichnet Eingabefelder mit durchsichtigem Rahmen und nahezu weißem
 * Hintergrund – auf einer leeren Seite ist das Formular dadurch praktisch
 * unsichtbar. Hier bekommen die Felder eine erkennbare Begrenzung, die
 * Beschriftungen stehen als Block darüber statt daneben.
 */

.dpm-login {
	max-width: 26rem;
}

.dpm-login__title {
	margin-block-end: 1rem;
}

/*
 * Salient gibt jedem Absatz 30 px Innenabstand nach unten und eine Zeilenhöhe
 * von 36 px. In einem Formular summiert sich das je Feldgruppe auf über 240 px
 * Höhe. Hier wird beides für die Formularabsätze zurückgesetzt.
 */
.dpm-login #loginform p {
	margin: 0 0 1rem;
	padding: 0;
	line-height: 1.4;
}

.dpm-login #loginform label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.dpm-login #loginform input[type="text"],
.dpm-login #loginform input[type="password"] {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid rgb(0 0 0 / 25%);
	border-radius: 4px;
	background: #fff;
	font-size: 1rem;
	line-height: 1.4;
}

.dpm-login #loginform input[type="text"]:focus,
.dpm-login #loginform input[type="password"]:focus {
	border-color: #8ba37c;
	outline: 2px solid rgb(139 163 124 / 40%);
	outline-offset: 1px;
}

/* Die Erinnerungs-Auswahl gehört in eine Zeile mit ihrer Beschriftung. */
.dpm-login #loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.dpm-login #loginform .login-remember input {
	width: auto;
	margin: 0;
}

.dpm-login #loginform .login-submit {
	margin-block-start: 1.25rem;
}

.dpm-login #loginform input[type="submit"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: 4px;
	background: #8ba37c;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

.dpm-login #loginform input[type="submit"]:hover {
	background: #7a9169;
}

.dpm-login__error {
	padding: 0.6rem 0.85rem;
	margin-block-end: 1rem;
	border-inline-start: 4px solid #b3261e;
	background: rgb(179 38 30 / 8%);
}

.dpm-login__lost {
	margin-block-start: 1rem;
	font-size: 0.9rem;
}