/*
 * Schlanke Login-Darstellung. Die Design-Tokens selbst kommen aus
 * auswertung.css und koennen installationsseitig ueberschrieben werden.
 */

.bze-login-body {
	min-height: 100vh;
	margin: 0;
	background: var(--bze-bg);
	color: var(--bze-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bze-login-shell {
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: var(--bze-space-6) var(--bze-space-4);
}

.bze-login-card {
	width: min(100%, 400px);
	padding: var(--bze-space-6);
	border: 1px solid var(--bze-border);
	border-radius: var(--bze-radius-md);
	background: var(--bze-surface);
	box-shadow: var(--bze-shadow-md);
}

.bze-login-brand {
	margin-bottom: var(--bze-space-5);
	text-align: center;
}

.bze-login-logo {
	display: block;
	width: auto;
	max-width: min(240px, 100%);
	max-height: 72px;
	margin: 0 auto var(--bze-space-4);
	object-fit: contain;
}

.bze-login-company {
	margin-bottom: var(--bze-space-3);
	color: var(--bze-primary);
	font-size: 18px;
	font-weight: 700;
}

.bze-login-brand h1 {
	margin: 0 0 var(--bze-space-2);
	color: var(--bze-text);
	font-size: 28px;
	line-height: 1.2;
}

.bze-login-brand p,
.bze-login-help {
	margin: 0;
	color: var(--bze-text-muted);
	font-size: 14px;
}

.bze-login-card form p {
	margin: 0 0 var(--bze-space-4);
}

.bze-login-card form label {
	display: block;
	margin-bottom: var(--bze-space-1);
	color: var(--bze-text-muted);
	font-size: 13px;
	font-weight: 500;
}

.bze-login-card input[type="text"],
.bze-login-card input[type="password"] {
	width: 100%;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--bze-border);
	border-radius: var(--bze-radius-sm);
	background: var(--bze-surface);
	color: var(--bze-text);
	font: inherit;
	font-size: 15px;
	letter-spacing: normal;
}

.bze-login-card input[type="text"]:focus-visible,
.bze-login-card input[type="password"]:focus-visible,
.bze-login-card input[type="checkbox"]:focus-visible,
.bze-login-card a:focus-visible,
.bze-login-card input[type="submit"]:focus-visible {
	outline: 2px solid var(--bze-primary);
	outline-offset: 2px;
}

.bze-login-card .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: var(--bze-space-2);
	min-height: 44px;
	margin: 0;
	color: var(--bze-text);
	font-size: 14px;
}

.bze-login-card input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
}

.bze-login-card .login-submit {
	margin-bottom: var(--bze-space-3);
}

.bze-login-card input[type="submit"] {
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 var(--bze-space-4);
	border: 1px solid var(--bze-primary);
	border-radius: var(--bze-radius-sm);
	background: var(--bze-primary);
	color: var(--bze-surface);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bze-login-card input[type="submit"]:hover,
.bze-login-card input[type="submit"]:active {
	border-color: var(--bze-primary-hover);
	background: var(--bze-primary-hover);
}

.bze-login-help {
	margin-top: var(--bze-space-2);
	text-align: center;
}

.bze-login-help a,
.bze-login-demo a {
	color: var(--bze-primary);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.bze-login-error {
	margin-bottom: var(--bze-space-4);
	padding: var(--bze-space-3);
	border: 1px solid var(--bze-danger);
	border-radius: var(--bze-radius-sm);
	background: color-mix(in srgb, var(--bze-danger) 8%, var(--bze-surface));
	color: var(--bze-danger);
	font-size: 14px;
}

.bze-login-demo {
	margin-top: var(--bze-space-5);
	padding: var(--bze-space-4);
	border: 1px solid var(--bze-border);
	border-radius: var(--bze-radius-sm);
	background: color-mix(in srgb, var(--bze-warning) 16%, var(--bze-surface));
}

.bze-login-demo h2 {
	margin: 0 0 var(--bze-space-2);
	font-size: 15px;
}

.bze-login-demo ul {
	margin: 0 0 var(--bze-space-3);
	padding: 0;
	list-style: none;
}

.bze-login-demo li {
	margin: var(--bze-space-1) 0;
	font-size: 12px;
}

.bze-login-demo code {
	font-size: 12px;
}

/* wp-login.php: gleiche Design-Sprache, WordPress-Authentifizierung bleibt unveraendert. */
body.login {
	background: var(--bze-bg);
	color: var(--bze-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.login #login {
	width: min(400px, calc(100% - 32px));
	padding-top: 7vh;
}

body.login #login h1 a {
	width: auto;
	height: auto;
	margin-bottom: var(--bze-space-4);
	background: none;
	color: var(--bze-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-indent: 0;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
	padding: var(--bze-space-5);
	border: 1px solid var(--bze-border);
	border-radius: var(--bze-radius-md);
	background: var(--bze-surface);
	box-shadow: var(--bze-shadow-md);
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	height: 44px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--bze-border);
	border-radius: var(--bze-radius-sm);
	background: var(--bze-surface);
	color: var(--bze-text);
	font-family: inherit;
	font-size: 15px;
	letter-spacing: normal;
}

body.login .button-primary {
	min-height: 44px;
	border-color: var(--bze-primary);
	border-radius: var(--bze-radius-sm);
	background: var(--bze-primary);
	box-shadow: none;
	font-weight: 700;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	border-color: var(--bze-primary-hover);
	background: var(--bze-primary-hover);
}

body.login input:focus,
body.login a:focus,
body.login .button:focus {
	outline: 2px solid var(--bze-primary);
	outline-offset: 2px;
	box-shadow: none;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--bze-primary);
}

@media (max-width: 640px) {
	.bze-login-shell {
		padding: var(--bze-space-4);
	}

	.bze-login-card {
		padding: var(--bze-space-5);
	}
}

/* 1.1.0: Bildschirm-Skala; der Bestand oberhalb bleibt für den Druck erhalten. */
@media screen {
	.bze-login-company { font-size: var(--bze-font-size-small, 14px); font-weight: var(--bze-font-weight-emphasis, 600); }
	.bze-login-brand h1 { font-size: var(--bze-font-size-h1, 32px); }
	.bze-login-brand p, .bze-login-help { font-size: var(--bze-font-size-small, 14px); }
	.bze-login-card form label { font-size: var(--bze-font-size-small, 14px); font-weight: var(--bze-font-weight-emphasis, 600); }
	.bze-login-card input[type="text"], .bze-login-card input[type="password"] { font-size: var(--bze-font-size-body, 16px); }
	.bze-login-card .login-remember label { font-size: var(--bze-font-size-small, 14px); }
	.bze-login-card input[type="submit"] { font-weight: var(--bze-font-weight-emphasis, 600); }
	.bze-login-help a, .bze-login-demo a { font-weight: var(--bze-font-weight-emphasis, 600); }
	.bze-login-error { font-size: var(--bze-font-size-small, 14px); }
	.bze-login-demo h2 { font-size: var(--bze-font-size-h2, 24px); }
	.bze-login-demo li { font-size: var(--bze-font-size-small, 14px); }
	.bze-login-demo code { font-size: var(--bze-font-size-small, 14px); }
	body.login #login h1 a { font-size: var(--bze-font-size-h1, 32px); font-weight: var(--bze-font-weight-heading, 700); }
	body.login form .input, body.login input[type="text"], body.login input[type="password"], body.login input[type="email"] { font-size: var(--bze-font-size-body, 16px); }
	body.login .button-primary { font-weight: var(--bze-font-weight-emphasis, 600); }
}

@media screen {
	body.login, .bze-login-body { font-family:var(--bze-font-family,system-ui); font-size:var(--bze-font-size-body,16px); font-weight:400; }
	body.login :is(p,label,.message,.notice), body.login #nav, body.login #backtoblog { font-size:var(--bze-font-size-small,14px); line-height:1.5; }
	body.login :is(input[type=text],input[type=password],input[type=email],input[type=submit],button), .bze-login-card input[type=submit] { min-height:48px; font-family:var(--bze-font-family,system-ui); font-size:var(--bze-font-size-body,16px); font-weight:400; }
	body.login input[type=submit], .bze-login-card input[type=submit] { font-weight:600; }
	body.login label:has(input[type=checkbox]) { display:inline-flex; align-items:center; min-height:48px; }
	body.login :is(#nav,#backtoblog) a, body.login .privacy-policy-link { display:inline-flex; align-items:center; min-height:48px; }
	.bze-login-help a, .bze-login-demo a { min-height:48px; }
}

@media screen {
	body.login :is(select,button,input:not([type=checkbox]):not([type=hidden])) { min-height:48px; min-width:48px; height:auto; font-family:var(--bze-font-family,system-ui); font-size:var(--bze-font-size-body,16px); }
	.bze-login-help a, .bze-login-demo a { display:inline-flex; align-items:center; min-width:48px; }
}

/* WordPress-Login: separates Label mit for-Zuordnung, inklusive Hilfe-Knopf. */
@media screen {
	body.login #login h1 a { display:flex; align-items:center; justify-content:center; min-height:48px; }
	body.login .forgetmenot { position:relative; display:flex; align-items:center; gap:8px; min-height:48px; width:100%; }
	body.login .forgetmenot input[type=checkbox] { position:relative; z-index:1; flex:none; width:24px; height:24px; margin:0; }
	body.login .forgetmenot label { display:inline-flex; align-items:center; min-height:48px; flex:1; cursor:pointer; }
	body.login .forgetmenot label::before { content:""; position:absolute; inset:0; }
	body.login .forgetmenot .wp-tooltip { position:relative; z-index:1; flex:none; }
	body.login .wp-tooltip__bubble, body.login .wp-tooltip__text { font-size:var(--bze-font-size-small,14px); line-height:1.5; }
}