/*
 * Anmeldeseite (wp-login.php) im Design der Website – eingebunden über inc/login.php nach den WordPress-Stilen.
 * Sand, oben das zentrierte Logo, darunter das Formular als weiße Karte: Felder mit Linie wie die Formulare der
 * Website (.mgh-feld), Checkbox wie dort, Button wie .mgh-btn. Nur Werte aus tokens.css.
 * Gilt auch für „Passwort vergessen“, „Neues Passwort“ und die Meldungen von WordPress und WP Cerber.
 */

body.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	background-color: var(--color-sand);
	color: var(--color-dunkelgruen);
	font-family: var(--text-text-2-family);
	font-size: var(--text-text-2-size);
	line-height: var(--text-text-2-line-height);
}

.login #login {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--login-breite) + var(--login-abstand) * 2);
	margin: 0 auto;
	padding: var(--login-abstand);
}

/* Logo (zentriert) – Seitenverhältnis wie die Datei, damit nichts beschnitten wird */
.login h1.wp-login-logo a {
	width: var(--login-logo-breite);
	height: auto;
	aspect-ratio: 1214 / 459;
	margin: 0 auto var(--login-abstand);
	background-image: url("../icons/logo-guesthouse.svg");
	background-position: center;
	background-size: contain;
}

.login h1.wp-login-logo a:focus-visible {
	outline: var(--fokus-rahmen) solid var(--color-dunkelgruen);
	outline-offset: var(--fokus-abstand);
	box-shadow: none;
}

/* Formular als Karte */
.login form {
	margin: 0;
	padding: var(--login-innenabstand);
	border: 0;
	border-radius: var(--radius-gross);
	background-color: var(--color-weiss);
	box-shadow: none;
	color: var(--color-dunkelgruen);
}

/* #login wie in den WordPress-Stilen (sonst gewinnen deren margin-bottom: 0) */
#login form p,
#login form .user-pass-wrap {
	margin: 0 0 var(--formular-zeilenabstand);
}

.login label {
	display: block;
	margin: 0;
	color: var(--color-dunkelgruen);
	font-size: var(--text-text-3-size);
	line-height: var(--text-text-3-line-height);
}

/* Felder wie .mgh-feld: ohne Rahmen, Linie unten, beim Überfahren/Fokus dunkelgrün */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: calc(var(--anfrage-zeile) - var(--anfrage-label-height));
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: var(--anfrage-linie) solid var(--color-warmgrau);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--color-dunkelgruen);
	font-family: inherit;
	font-size: var(--text-text-2-size);
	line-height: var(--text-text-2-line-height);
}

.login form .input:hover,
.login form .input:focus,
.login input:is([type="text"], [type="password"], [type="email"]):hover,
.login input:is([type="text"], [type="password"], [type="email"]):focus {
	border-bottom-color: var(--color-dunkelgruen);
	outline: none;
	box-shadow: none;
}

/* Vom Browser vorausgefüllte Felder nicht hellgelb */
.login input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-dunkelgruen);
	box-shadow: inset 0 0 0 var(--anfrage-zeile) var(--color-weiss);
	caret-color: var(--color-dunkelgruen);
}

/* Passwort anzeigen: Icon rechts im Feld */
.login .wp-pwd {
	position: relative;
}

.login .wp-pwd .input.password-input {
	padding-right: var(--menue-schliessen);
}

.login .button.wp-hide-pw {
	top: 0;
	right: 0;
	width: var(--menue-schliessen);
	height: calc(var(--anfrage-zeile) - var(--anfrage-label-height));
	min-width: 0;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: var(--button-radius);
	background: transparent;
	box-shadow: none;
	color: var(--color-dunkelgruen);
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
	background: transparent;
	color: var(--color-dunkelgruen);
}

.login .button.wp-hide-pw:focus {
	border: 0;
	box-shadow: none;
}

.login .button.wp-hide-pw:focus-visible {
	outline: var(--fokus-rahmen) solid var(--color-dunkelgruen);
	outline-offset: calc(-1 * var(--fokus-rahmen));
}

/* Angemeldet bleiben – Checkbox wie im Formular der Website */
#login form .forgetmenot {
	display: flex;
	align-items: center;
	gap: var(--anfrage-check-gap);
	float: none;
	margin-bottom: var(--formular-zeilenabstand);
}

.login form .forgetmenot label {
	display: inline;
	margin: 0;
	font-size: var(--text-text-2-size);
	line-height: var(--text-text-2-line-height);
	cursor: pointer;
}

.login input[type="checkbox"] {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	flex: none;
	width: var(--anfrage-check);
	min-width: 0;
	height: var(--anfrage-check);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--anfrage-check-radius);
	background: var(--color-sand);
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.login input[type="checkbox"]:checked {
	background: var(--color-dunkelgruen);
}

.login input[type="checkbox"]:checked::before {
	content: "";
	width: var(--anfrage-haken-width);
	height: var(--anfrage-haken-height);
	margin: 0;
	background-color: var(--color-weiss);
	-webkit-mask: url("../icons/haken.svg") center / 100% 100% no-repeat;
	mask: url("../icons/haken.svg") center / 100% 100% no-repeat;
}

.login input[type="checkbox"]:focus {
	box-shadow: none;
	outline: none;
}

.login input[type="checkbox"]:focus-visible {
	outline: var(--fokus-rahmen) solid var(--color-dunkelgruen);
	outline-offset: var(--fokus-abstand);
}

/* Hilfe-Symbol neben „Angemeldet bleiben“ samt Erklärung */
.login .wp-tooltip__toggle,
.login .wp-tooltip__close {
	border: 0;
	background: transparent;
	color: var(--color-dunkelgruen);
	cursor: pointer;
}

.login .wp-tooltip__toggle:focus-visible,
.login .wp-tooltip__close:focus-visible {
	outline: var(--fokus-rahmen) solid var(--color-dunkelgruen);
	box-shadow: none;
}

.login .wp-tooltip__bubble {
	border: 0;
	border-radius: var(--button-radius);
	background-color: var(--color-sand);
	box-shadow: none;
	color: var(--color-dunkelgruen);
	font-size: var(--text-text-3-size);
	line-height: var(--text-text-3-line-height);
}

/* Button wie .mgh-btn (Dunkelgrün, Hover mit Rahmen), volle Breite */
#login form p.submit {
	margin: 0;
	padding: 0;
}

.login .button-primary,
.login.wp-core-ui .button-primary.button-large {
	float: none;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--button-padding-y) var(--button-padding-x);
	border: 0;
	border-radius: var(--button-radius);
	background-color: var(--color-dunkelgruen);
	box-shadow: inset 0 0 0 var(--button-border) transparent;
	color: var(--color-weiss);
	font-family: var(--text-button-family);
	font-size: var(--text-button-size);
	font-weight: var(--text-button-weight);
	line-height: var(--text-button-line-height);
	letter-spacing: var(--text-button-letter-spacing);
	text-transform: var(--text-button-text-transform);
	text-shadow: none;
	cursor: pointer;
}

.login .button-primary:hover,
.login .button-primary:focus,
.login.wp-core-ui .button-primary.button-large:hover,
.login.wp-core-ui .button-primary.button-large:focus {
	background-color: transparent;
	box-shadow: inset 0 0 0 var(--button-border) var(--color-dunkelgruen);
	color: var(--color-dunkelgruen);
}

.login .button-primary:focus-visible,
.login.wp-core-ui .button-primary.button-large:focus-visible {
	outline: var(--fokus-rahmen) solid var(--color-dunkelgruen);
	outline-offset: var(--fokus-abstand);
}

/* Passwortstärke (Neues Passwort setzen) */
.login #pass-strength-result {
	margin: var(--zeile-text-3) 0 0;
	padding: var(--faq-antwort-top) var(--anfrage-check-gap);
	border: 0;
	border-radius: var(--button-radius);
	background-color: var(--color-sand);
	color: var(--color-dunkelgruen);
	font-size: var(--text-text-3-size);
}

.login #pass-strength-result.short,
.login #pass-strength-result.bad {
	background-color: var(--color-fehler);
	color: var(--color-weiss);
}

.login #pass-strength-result.good {
	background-color: var(--color-gelb);
}

.login #pass-strength-result.strong {
	background-color: var(--color-hellgruen);
}

.login .description,
.login .indicator-hint,
.login form .pw-weak label {
	color: var(--color-dunkelgruen);
	font-size: var(--text-text-3-size);
	line-height: var(--text-text-3-line-height);
}

/* Meldungen (Fehler, Hinweise, Erfolg) */
.login .message,
.login .notice,
.login .success,
.login #login_error {
	margin: 0 0 var(--formular-zeilenabstand);
	padding: var(--anfrage-check-gap);
	border: 0;
	border-left: var(--fokus-rahmen) solid var(--color-mittelgruen);
	border-radius: var(--button-radius);
	background-color: var(--color-weiss);
	box-shadow: none;
	color: var(--color-dunkelgruen);
	font-size: var(--text-text-3-size);
	line-height: var(--text-text-3-line-height);
}

.login .notice-error,
.login #login_error {
	border-left-color: var(--color-fehler);
}

.login .notice-success,
.login .success {
	border-left-color: var(--color-dunkelgruen);
}

/* Links wie im Fließtext: unterstrichen, beim Überfahren ohne Linie */
.login :is(.message, .notice, #login_error) a,
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--color-dunkelgruen);
	text-decoration: underline;
	text-underline-offset: var(--link-unterstrich-abstand);
}

.login :is(.message, .notice, #login_error) a:hover,
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color: var(--color-dunkelgruen);
	text-decoration: none;
}

/* Links unter dem Formular */
.login #nav,
.login #backtoblog {
	margin: var(--formular-zeilenabstand) 0 0;
	padding: 0;
	font-size: var(--text-text-3-size);
	line-height: var(--text-text-3-line-height);
	text-align: center;
}

.login #backtoblog {
	margin-top: var(--zeile-text-3);
}

.login .privacy-policy-page-link {
	margin: var(--login-abstand) 0 0;
	font-size: var(--text-text-3-size);
	line-height: var(--text-text-3-line-height);
}

.login a:focus-visible {
	outline: var(--fokus-rahmen) solid var(--color-dunkelgruen);
	outline-offset: var(--fokus-abstand);
	box-shadow: none;
}