/* Media4Web Login – wp-login.php im MEDIA4WEB-Look
   Farben und Schriften wie auf media4web.de */

body.login {
	--m4-black: #000;
	--m4-panel: #141414;
	--m4-line: rgba(255, 255, 255, .12);
	--m4-grey: #a6a6a6;
	--m4-red: #e60000;
	--m4-red-hot: #ff2323;
	--m4-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
	--m4-body: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;

	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	box-sizing: border-box;
	background:
		radial-gradient(1100px 600px at 85% 110%, rgba(230, 0, 0, .16), transparent 60%),
		radial-gradient(700px 420px at 0% -10%, rgba(255, 255, 255, .05), transparent 60%),
		var(--m4-black);
	color: #fff;
	font-family: var(--m4-body);
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
}

body.login *, body.login *::before, body.login *::after { box-sizing: border-box; }

/* ---------- Marke ---------- */
.m4w-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1;
	margin: 0 0 28px;
	color: #fff;
	text-decoration: none;
}
.m4w-brand:focus { outline: 2px solid var(--m4-red); outline-offset: 6px; box-shadow: none; }
.m4w-mark {
	font-family: var(--m4-display);
	font-weight: 400;
	font-size: 3.4rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
}
.m4w-mark b { color: var(--m4-red); font-weight: 400; }
.m4w-brand small {
	margin-top: 8px;
	font-size: .8rem;
	color: var(--m4-grey);
	letter-spacing: .02em;
}

/* WordPress-Logo ausblenden (Marke steht darüber) */
.login h1.wp-login-logo,
.login h1:not(.screen-reader-text) { display: none; }

/* ---------- Kasten mit Sucher-Ecken ---------- */
#login {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 34px 32px 26px;
	background: var(--m4-panel);
	border: 1px solid var(--m4-line);
	border-radius: 10px;
}
#login::before {
	/* rote Sucher-Ecken wie im Hero von media4web.de */
	content: "";
	position: absolute;
	inset: -9px;
	pointer-events: none;
	--c: var(--m4-red);
	--l: 22px;
	--w: 2.5px;
	background:
		linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w),
		linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
		linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w),
		linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
		linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w),
		linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
		linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w),
		linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
	background-repeat: no-repeat;
}
#login::after {
	content: "● REC";
	position: absolute;
	top: 14px;
	right: 18px;
	font: 400 .95rem/1 var(--m4-display);
	letter-spacing: .08em;
	color: var(--m4-red-hot);
	animation: m4w-rec 1.6s steps(1) infinite;
}
@keyframes m4w-rec { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #login::after { animation: none; } }

/* ---------- Überschrift ---------- */
.m4w-head { margin: 0 0 22px; }
.m4w-head h2 {
	margin: 0;
	font-family: var(--m4-display);
	font-weight: 400;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: .02em;
	color: #fff;
}
.m4w-head p { margin: 10px 0 0; color: #d0d0d0; line-height: 1.5; font-size: .95rem; }

/* ---------- Formulare ---------- */
.login form {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
}
.login form p { margin-bottom: 0; }
.login label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .92rem;
	color: #fff;
	line-height: 1.4;
}
.login form .input,
.login input[type=text],
.login input[type=email],
.login input[type=password] {
	width: 100%;
	min-height: 48px;
	margin: 0 0 16px;
	padding: 11px 14px;
	font: 400 1rem/1.4 var(--m4-body);
	color: #fff;
	background: #0a0a0a;
	border: 1.5px solid #3a3a3a;
	border-radius: 6px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.login form .input:focus,
.login input[type=text]:focus,
.login input[type=email]:focus,
.login input[type=password]:focus {
	outline: none;
	border-color: var(--m4-red);
	box-shadow: 0 0 0 3px rgba(230, 0, 0, .3);
}
.login input:-webkit-autofill {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
	box-shadow: 0 0 0 1000px #1a1a1a inset !important;
	caret-color: #fff;
}

/* Passwortfeld mit Auge-Knopf */
.login .user-pass-wrap, .login .wp-pwd { position: relative; }
.login .wp-pwd .input, .login .wp-pwd input[type=password], .login .wp-pwd input[type=text] { padding-right: 52px; }
.login .button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--m4-grey);
	box-shadow: none;
}
.login .button.wp-hide-pw:hover, .login .button.wp-hide-pw:focus { color: #fff; background: transparent; box-shadow: none; }
.login .button.wp-hide-pw .dashicons { width: 20px; height: 20px; font-size: 20px; top: 0; }

/* Angemeldet bleiben */
.login .forgetmenot { display: flex; align-items: center; width: 100%; float: none; clear: both; margin: 2px 0 20px; }
.login .forgetmenot label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; color: #d0d0d0; }
.login input[type=checkbox] {
	width: 20px; height: 20px; min-width: 20px; margin: 0;
	background: #0a0a0a; border: 1.5px solid #3a3a3a; border-radius: 4px; box-shadow: none;
}
.login input[type=checkbox]:checked { background: var(--m4-red); border-color: var(--m4-red); }
.login input[type=checkbox]:checked::before {
	content: ""; float: none; display: block; width: 6px; height: 11px; margin: 2px auto 0;
	border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.login input[type=checkbox]:focus { border-color: var(--m4-red); box-shadow: 0 0 0 3px rgba(230, 0, 0, .3); }

/* ---------- Knöpfe ---------- */
.login .submit, .login .reset-pass-submit { width: 100%; margin: 0; padding: 0; float: none; clear: both; display: flex; flex-direction: column; gap: 10px; }
.login .button-primary,
.login #wp-submit {
	float: none;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	font: 700 1rem/1 var(--m4-body);
	color: #fff;
	text-shadow: none;
	background: var(--m4-red);
	border: 2px solid var(--m4-red);
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.login .button-primary:hover,
.login .button-primary:focus,
.login #wp-submit:hover,
.login #wp-submit:focus {
	background: var(--m4-red-hot);
	border-color: var(--m4-red-hot);
	color: #fff;
	box-shadow: none;
}
.login .button-primary:focus-visible, .login #wp-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.login .button:not(.button-primary):not(.wp-hide-pw) {
	width: 100%;
	min-height: 48px;
	padding: 0 20px;
	font: 600 .95rem/1 var(--m4-body);
	color: #fff;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .5);
	border-radius: 6px;
	box-shadow: none;
}
.login .button:not(.button-primary):not(.wp-hide-pw):hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; }

/* ---------- Neues Passwort: Stärke-Anzeige ---------- */
.login #pass-strength-result {
	width: 100%;
	margin: -8px 0 14px;
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	font-size: .88rem;
	color: #fff;
	background: #2a2a2a;
	opacity: 1;
}
.login #pass-strength-result.short, .login #pass-strength-result.bad { background: #5a1010; }
.login #pass-strength-result.good { background: #5a4a10; }
.login #pass-strength-result.strong { background: #14502a; }
.login .pw-weak { margin: 0 0 14px; }
.login .pw-weak label { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; }
.login .description.indicator-hint { margin: 0 0 18px; color: var(--m4-grey); font-size: .85rem; line-height: 1.5; }

/* ---------- Hinweise & Fehler ---------- */
.login .message,
.login .notice,
.login #login_error,
.login .success {
	margin: 0 0 20px;
	padding: 12px 14px;
	color: #e8e8e8;
	background: #0d0d0d;
	border: 1px solid var(--m4-line);
	border-left: 4px solid var(--m4-grey);
	border-radius: 6px;
	box-shadow: none;
	font-size: .92rem;
	line-height: 1.5;
}
.login .notice p, .login .message p, .login #login_error p { margin: 0; padding: 0; }
.login .notice-success, .login .success, .login .message { border-left-color: #2fbf71; }
.login .notice-error, .login #login_error { border-left-color: var(--m4-red-hot); }
.login .notice a, .login .message a, .login #login_error a { color: #fff; }

/* ---------- Links unter dem Formular ---------- */
.login #nav, .login #backtoblog {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: .9rem;
}
.login #nav { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--m4-line); }
.login #backtoblog { margin-top: 10px; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-page-link a {
	color: var(--m4-grey);
	text-decoration: none;
	transition: color .2s;
}
.login #nav a:hover, .login #backtoblog a:hover, .login .privacy-policy-page-link a:hover,
.login #nav a:focus, .login #backtoblog a:focus { color: #fff; box-shadow: none; }
.login #nav a:focus-visible, .login #backtoblog a:focus-visible { outline: 2px solid var(--m4-red); outline-offset: 2px; }

.login .privacy-policy-page-link { margin: 24px 0 0; text-align: center; font-size: .82rem; }
.login .language-switcher { display: none; }

/* ---------- Handy ---------- */
@media (max-width: 480px) {
	body.login { justify-content: flex-start; padding-top: 32px; }
	.m4w-mark { font-size: 2.8rem; }
	#login { padding: 30px 20px 22px; }
	.m4w-head h2 { font-size: 2.2rem; }
}

/* Erneute Anmeldung im Backend (Popup) */
body.interim-login { min-height: 0; padding: 20px 12px; }
body.interim-login .m4w-brand { margin-bottom: 18px; }
body.interim-login .m4w-mark { font-size: 2.4rem; }