/*
 * Anmeldeseite in der Hausoptik (Klasse LoginChrome).
 *
 * Laedt auf jeder Anmeldeseite des Kerns (wp-login.php bzw. eine Adresse,
 * die sie einbindet), nach dem Kern-Stylesheet 'login'. Alle Regeln haengen
 * an body.hrb-es-login: Die Klasse fehlt im Anmeldedialog bei abgelaufener
 * Sitzung (interim-login) und auf der Bestaetigung der Admin-E-Mail-Adresse —
 * beide bleiben in der Kern-Darstellung.
 *
 * Aufbau (Entscheidung 14.10.2026, Variante A; der Balken ist inzwischen
 * Graphit statt Hausfarbe):
 *   - links ein Balken in Graphit (--hrb-login-primary) ueber ein Drittel der
 *     Breite, darin die Felder direkt auf dem Balken: Beschriftungen weiss,
 *     Felder weiss, die Hauptaktion weiss mit graphitfarbener Schrift,
 *     Fokusring weiss (Graphit verschwaende auf dem Balken)
 *   - rechts die Flaeche wie die Backend-Seite, darin Logo (in den
 *     Originalfarben, als Hintergrundbild), Site-Name und die Karte
 *     „Empfohlene Systemumgebung“ mit Symbolen in der Hauptfarbe #1C61AB
 *   - bis 782 px: alles auf dem Balken, Logo oberhalb der Felder
 *   - Kopfzeichen des Kerns (Site-Name ueber dem Formular) entfaellt, der
 *     Name steht in der rechten Flaeche
 *
 * Kontraste: Weiss auf #626970 5,6 : 1; #626970 auf Weiss ebenso. Symbole
 * der Karte #1C61AB auf #F0F0F1 5,5 : 1. Fehler #B32D2E auf #FCF0F1 5,6 : 1.
 *
 * Aufbau der Datei:
 *   1. Gestaltungsgroessen
 *   2. Seitenraster: Balken und Flaeche
 *   3. Rechte Flaeche: Logo und Name
 *   4. Felder und Beschriftungen
 *   5. Schaltflaechen
 *   6. Links, Sprachumschalter
 *   7. Rueckmeldungen
 *   8. Schmale Bildschirme (bis 782 px)
 */

/* -------------------------------------------------------- 1. Gestaltungsgroessen */

/* Werte wie theme.css (Farbrollen dort). */
body.hrb-es-login {
	--hrb-login-primary: #626970;
	--hrb-login-primary-tint: #f5f8fe;
	--hrb-login-text: #626970;
	--hrb-login-page: #f0f0f1;
	--hrb-login-focus: #3c434a;
	--hrb-login-error: #b32d2e;
	--hrb-login-error-bg: #fcf0f1;
	--hrb-login-error-border: #d63638;
	--hrb-login-success: #00703c;
	--hrb-login-success-bg: #edfaef;
	--hrb-login-radius: 4px;
	--hrb-login-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Ein Drittel, aber nie schmaler als Formular plus Rand. */
	--hrb-login-bar: max(33.333vw, 400px);
	--hrb-login-form: 320px;
}

/* -------------------------------------------- 2. Seitenraster: Balken und Flaeche */

/*
 * Raster statt fester Positionen: #login und Sprachumschalter in der linken
 * Spalte, die rechte Flaeche (Markup aus LoginChrome::render_aside(), am
 * Ende des Body) in der rechten. Der Balken ist ein Hintergrundverlauf mit
 * harter Kante — er reicht damit immer ueber die volle Hoehe.
 */
body.hrb-es-login {
	display: grid;
	grid-template-columns: var(--hrb-login-bar) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: 100vh;
	height: auto;
	font-family: var(--hrb-login-font);
	color: #fff;
	background: linear-gradient(to right,
			var(--hrb-login-primary) 0,
			var(--hrb-login-primary) var(--hrb-login-bar),
			var(--hrb-login-page) var(--hrb-login-bar));
}

body.hrb-es-login #login {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	width: var(--hrb-login-form);
	margin: 0;
	padding: 48px 0 24px;
}

body.hrb-es-login .language-switcher {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	width: var(--hrb-login-form);
	margin: 0;
	padding: 0 0 32px;
}

/* Kopfzeichen des Kerns: der Name steht rechts; die Seite traegt ihren Titel als h1.screen-reader-text. */
body.hrb-es-login #login h1.wp-login-logo {
	display: none;
}

/* ---------------------------------------------- 3. Rechte Flaeche: Logo und Name */

body.hrb-es-login .hrb-es-login-aside {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	width: min(520px, 80%);
	padding: 48px 0;
	text-align: center;
}

body.hrb-es-login .hrb-es-login-aside__logo {
	display: block;
	width: 100%;
	aspect-ratio: 2560 / 620;
	background-image: url("../media/logo.png");
	background-repeat: no-repeat;
	background-size: contain;
	/*
	background: var(--hrb-login-primary);
	-webkit-mask: url("../media/logo.png") center / contain no-repeat;
	mask: url("../media/logo.png") center / contain no-repeat;
	*/
}

body.hrb-es-login .hrb-es-login-aside__name {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hrb-login-text);
}

/* ------------------------------------------------- 4. Felder und Beschriftungen */

/* Formular ohne Karte: die Felder stehen direkt auf dem Balken. */
body.hrb-es-login #login form {
	margin: 0 0 24px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

body.hrb-es-login #login label,
body.hrb-es-login #login form p,
body.hrb-es-login #login form .description,
body.hrb-es-login #login .indicator-hint {
	color: #fff;
}

body.hrb-es-login #login label {
	font-weight: 600;
}

body.hrb-es-login #login .forgetmenot label,
body.hrb-es-login #login .pw-weak label {
	font-weight: 400;
}

body.hrb-es-login #login input[type="text"],
body.hrb-es-login #login input[type="password"],
body.hrb-es-login #login input[type="email"] {
	font-size: 18px;
	color: var(--hrb-login-text);
	background: #fff;
	border: 1px solid #fff;
	border-radius: var(--hrb-login-radius);
	box-shadow: none;
}

body.hrb-es-login #login input[type="checkbox"] {
	border-color: #fff;
	box-shadow: none;
}

/*
 * Fokus: weisser Ring mit Abstand (Balkenfarbe) um das weisse Feld, dazu die
 * Graphit-Kante des Backends am Feld selbst.
 */
body.hrb-es-login #login input[type="text"]:focus,
body.hrb-es-login #login input[type="password"]:focus,
body.hrb-es-login #login input[type="email"]:focus,
body.hrb-es-login #login input[type="checkbox"]:focus,
body.hrb-es-login .language-switcher select:focus {
	border-color: var(--hrb-login-focus);
	box-shadow: none;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Auge im Passwortfeld: liegt auf Weiss, deshalb Graphit. */
body.hrb-es-login #login .button.wp-hide-pw {
	color: var(--hrb-login-focus);
}

body.hrb-es-login #login .button.wp-hide-pw:focus {
	border-color: var(--hrb-login-focus);
	box-shadow: 0 0 0 1px var(--hrb-login-focus);
}

/* ------------------------------------------------------------ 5. Schaltflaechen */

body.hrb-es-login #login .button,
body.hrb-es-login .language-switcher .button {
	min-height: 36px;
	padding: 0 14px;
	font-family: var(--hrb-login-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 34px;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	border-radius: var(--hrb-login-radius);
	box-shadow: none;
	text-shadow: none;
}

body.hrb-es-login #login .button:hover,
body.hrb-es-login .language-switcher .button:hover {
	color: var(--hrb-login-primary);
	background: #fff;
	border-color: #fff;
}

/* Hauptaktion: weiss mit Schrift in der Balkenfarbe. */
body.hrb-es-login #login .button-primary {
	min-height: 40px;
	padding: 0 20px;
	line-height: 38px;
	color: var(--hrb-login-primary);
	background: #fff;
	border-color: #fff;
}

body.hrb-es-login #login .button-primary:hover,
body.hrb-es-login #login .button-primary:active {
	color: var(--hrb-login-primary);
	background: var(--hrb-login-primary-tint);
	border-color: var(--hrb-login-primary-tint);
}

body.hrb-es-login #login .button:focus,
body.hrb-es-login #login .button:focus-visible,
body.hrb-es-login .language-switcher .button:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: none;
}

/* Das Auge im Passwortfeld ist eine .button, aber keine Schaltflaeche im Sinne oben. */
body.hrb-es-login #login .button.wp-hide-pw {
	min-height: 40px;
	padding: 5px 9px;
	line-height: normal;
	background: transparent;
	border-color: transparent;
}

body.hrb-es-login #login .button.wp-hide-pw:hover {
	color: var(--hrb-login-primary);
	background: transparent;
	border-color: transparent;
}

/* ------------------------------------------------------ 6. Links, Sprachumschalter */

body.hrb-es-login #login #nav {
	margin: 0;
	padding: 0;
	font-size: 14px;
}

body.hrb-es-login #login a,
body.hrb-es-login #login #nav a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.hrb-es-login #login a:hover,
body.hrb-es-login #login #nav a:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

body.hrb-es-login #login a:focus,
body.hrb-es-login #login #nav a:focus {
	color: #fff;
	box-shadow: none;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Ohne Link (ein Plugin hat ihn entfernt) bleibt nur ein leerer Absatz; :empty greift wegen des Leerraums nicht. */
body.hrb-es-login #backtoblog:not(:has(a)) {
	display: none;
}

body.hrb-es-login .language-switcher label .dashicons {
	color: #fff;
}

body.hrb-es-login .language-switcher select {
	min-height: 36px;
	font-family: var(--hrb-login-font);
	color: var(--hrb-login-text);
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: var(--hrb-login-radius);
}

/* --------------------------------------------------------------- 7. Rueckmeldungen */

/*
 * Weisse Kaesten wie im Backend, Text dunkel. Fehler rot wie im Backend
 * (immer mit Text), Erfolg gruen, Hinweise mit Graphit-Kante.
 */
body.hrb-es-login #login .message,
body.hrb-es-login #login .notice,
body.hrb-es-login #login .success {
	margin-bottom: 20px;
	padding: 8px 12px;
	color: var(--hrb-login-text);
	background: #fff;
	border: 0;
	border-left: 4px solid var(--hrb-login-focus);
	border-radius: var(--hrb-login-radius);
}

body.hrb-es-login #login .message p,
body.hrb-es-login #login .notice p,
body.hrb-es-login #login .success p {
	color: inherit;
}

body.hrb-es-login #login .notice-error {
	color: var(--hrb-login-error);
	background: var(--hrb-login-error-bg);
	border-left-color: var(--hrb-login-error-border);
}

body.hrb-es-login #login .success {
	color: var(--hrb-login-success);
	background: var(--hrb-login-success-bg);
	border-left-color: var(--hrb-login-success);
}

/* Links in den Kaesten liegen auf hellem Grund. */
body.hrb-es-login #login .message a,
body.hrb-es-login #login .notice a,
body.hrb-es-login #login .success a {
	color: inherit;
}

body.hrb-es-login #login .message a:focus,
body.hrb-es-login #login .notice a:focus,
body.hrb-es-login #login .success a:focus {
	outline-color: var(--hrb-login-focus);
}

body.hrb-es-login .browser-card {
	--text: #626970;
	--surface: #ffffff;
	--background: #f0f0f1;
	/* Symbole: Hauptfarbe, nicht die Hausfarbe #03A9F4 (auf Weiss nur 2,6 : 1). */
	--accent: #1c61ab;
	--border: #dedfe1;

	max-width: 680px;
	margin: 20px 0;
	overflow: hidden;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.hrb-es-login .browser-card-header {
	padding: 16px 20px;
	background: var(--text);
	border-bottom: 1px solid var(--border);
	text-align: center;
}

body.hrb-es-login .info-icon,
body.hrb-es-login .browser-icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	color: var(--accent);
}

body.hrb-es-login .info-icon {
	width: 38px;
	height: 38px;
	background: var(--surface);
	border-radius: 8px;
}

body.hrb-es-login .info-icon svg {
	width: 23px;
	height: 23px;
}

body.hrb-es-login .browser-icon {
	width: 36px;
	height: 36px;
	background: var(--background);
	border-radius: 8px;
}

body.hrb-es-login .browser-icon svg {
	width: 22px;
	height: 22px;
}

body.hrb-es-login .browser-card svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.hrb-es-login .browser-card h3 {
	margin: 0;
	color: var(--border);
	font-size: 16px;
	font-weight: 650;
}

body.hrb-es-login .browser-card-header p {
	margin: 3px 0 0;
	color: var(--border);
	font-size: 13px;
}

body.hrb-es-login .browser-card-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 6px 20px;
}

body.hrb-es-login .browser-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: 16px 12px 16px 0;
}

body.hrb-es-login .browser-row+.browser-row {
	padding-left: 18px;
	border-left: 1px solid var(--border);
}

body.hrb-es-login .browser-row strong {
	display: block;
	margin-bottom: 4px;
	color: var(--text);
	font-size: 13px;
	font-weight: 650;
}

body.hrb-es-login .browser-row p {
	margin: 0 0 4px;
	color: var(--text);
	font-size: 13px;
	line-height: 1.5;
}

body.hrb-es-login .browser-row small {
	display: block;
	color: var(--text);
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.85;
}

/* ------------------------------------------------- 8. Schmale Bildschirme (bis 782 px) */

/*
 * Eine Spalte, alles auf dem Balken: Logo und Name oben (weiss), darunter Felder und
 * Sprachumschalter.
 */
@media screen and (max-width: 782px) {
	body.hrb-es-login {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto;
		background: var(--hrb-login-primary);
	}

	body.hrb-es-login .hrb-es-login-aside {
		grid-column: 1;
		grid-row: 1;
		gap: 12px;
		width: min(320px, 100% - 32px);
		padding: 32px 0 8px;
	}

	/*
	 * Logo in den Originalfarben auf einer weissen Flaeche. Frueher stand hier
	 * „background: #fff“ — die Kurzschreibweise loeschte das Hintergrundbild,
	 * uebrig blieb ein leerer weisser Kasten. Eine weisse Silhouette (Filter)
	 * scheidet aus: Das „hr“ im Kreis ist ausgespart und verschwaende.
	 */
	body.hrb-es-login .hrb-es-login-aside__logo {
		box-sizing: border-box;
		width: 220px;
		padding: 10px 14px;
		background-color: #fff;
		background-origin: content-box;
		background-clip: border-box;
		border-radius: 8px;
	}

	body.hrb-es-login .hrb-es-login-aside__name {
		font-size: 18px;
		color: #fff;
	}

	body.hrb-es-login #login {
		grid-row: 2;
		align-self: start;
		width: min(var(--hrb-login-form), 100% - 32px);
		padding-top: 24px;
	}

	/* Der Kern vergroessert die Auswahl hier; feste Breite liesse „Wechseln“ umbrechen. */
	body.hrb-es-login .language-switcher {
		grid-row: 3;
		width: auto;
		max-width: calc(100% - 32px);
	}
}

/*
 * Karte einspaltig. Mit demselben Praefix wie die Grundregeln oben — ohne
 * body.hrb-es-login verloren diese Regeln an Spezifitaet, die Karte blieb
 * auf schmalen Bildschirmen zweispaltig.
 */
@media (max-width: 520px) {
	body.hrb-es-login .browser-card-content {
		grid-template-columns: 1fr;
		padding: 4px 16px;
	}

	body.hrb-es-login .browser-row {
		padding: 14px 0;
	}

	body.hrb-es-login .browser-row+.browser-row {
		padding: 14px 0;
		border-top: 1px solid var(--border);
		border-left: none;
	}

	body.hrb-es-login .browser-card-header {
		padding: 14px 16px;
	}
}