/*
 * CIS Login-Maske – Fassung „Hell“ aus design-labor/cis-login-maske.html
 * Lädt nach login.min.css von WordPress (Abhängigkeit „login“).
 * Formular-Regeln gelten nur für die Formulare von WordPress selbst
 * (#loginform, #lostpasswordform, #resetpassform, #registerform) –
 * eigene Schritte anderer Plugins (z. B. Zwei-Faktor) behalten ihr Aussehen.
 */

@font-face {
	font-family: "CIS Jakarta";
	src: url("plus-jakarta-sans-var-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

body.login {
	--cis-navy: #10243a;
	--cis-navy-hell: #1c3a5c;
	--cis-gold: #c49b45;
	--cis-ring: rgba(196, 155, 69, .38);
	--cis-text: #14181f;
	--cis-leise: #4d5561;
	--cis-rand: #c9ced6;
	--cis-ease: cubic-bezier(.23, 1, .32, 1);
	background: #f3f4f6;
	color: var(--cis-text);
	font: 14.5px/1.5 "CIS Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body.login :is(input, button, select, label) { font-family: inherit; }

body.login #login {
	box-sizing: border-box;
	width: min(400px, calc(100% - 32px));
	margin: 0 auto;
	padding: 10vh 0 64px;
}

/* ---------- Kopf: Name der Website als Text, kein Logo ---------- */
body.login .wp-login-logo { margin: 0; text-align: center; }
body.login .wp-login-logo a {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	text-indent: 0;
	overflow: visible;
	color: var(--cis-navy);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
body.login .wp-login-logo a:hover,
body.login .wp-login-logo a:focus { color: var(--cis-navy-hell); }
body.login .cis-unterzeile { margin: 4px 0 24px; color: var(--cis-leise); font-size: 14px; text-align: center; }

/* ---------- Karte ---------- */
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) {
	margin: 0;
	padding: 30px 28px 28px;
	border: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 0 1px #e2e5e9, 0 24px 48px -32px rgba(16, 36, 58, .45);
	overflow: visible;
	animation: cis-rein 220ms var(--cis-ease) both;
}
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform)::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin: 0 0 22px;
	border-radius: 2px;
	background: var(--cis-gold);
}

/* ---------- Felder ---------- */
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) label {
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1d2733;
}
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) .input {
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	margin: 0 0 18px;
	padding: 0 14px;
	border: 1px solid var(--cis-rand);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--cis-text);
	font-size: 16px; /* ab 16 px zoomt das Handy nicht hinein */
	line-height: 1.2;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) .input:hover { border-color: #9aa2ae; }
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform) .input:focus {
	border-color: var(--cis-navy);
	box-shadow: 0 0 0 3px var(--cis-ring);
	outline: none;
}
body.login #login .wp-pwd .input { padding-right: 52px; }
body.login #login .button.wp-hide-pw { width: 48px; height: 48px; color: var(--cis-leise); border-radius: 10px; }
body.login #login .button.wp-hide-pw:hover { color: var(--cis-navy); }
body.login #login .button.wp-hide-pw:focus { border-color: transparent; box-shadow: inset 0 0 0 2px var(--cis-navy); }

body.login #login #loginform .forgetmenot { float: none; min-height: 0; margin: 2px 0 20px; gap: 8px; }
body.login #login #loginform .forgetmenot label { margin: 0; font-weight: 500; color: var(--cis-leise); }
body.login #login :is(#loginform, #resetpassform) input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	border-color: #8b93a0;
	border-radius: 5px;
}
body.login #login :is(#loginform, #resetpassform) input[type="checkbox"]:checked { background: var(--cis-navy); border-color: var(--cis-navy); }
body.login #login :is(#loginform, #resetpassform) input[type="checkbox"]:checked::before { filter: brightness(0) invert(1); }
body.login #login :is(#loginform, #resetpassform) input[type="checkbox"]:focus { border-color: var(--cis-navy); box-shadow: 0 0 0 3px var(--cis-ring); }

/* ---------- Knopf ---------- */
body.login #login #wp-submit {
	float: none;
	display: block;
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--cis-navy);
	box-shadow: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .005em;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 150ms ease-out, transform 100ms ease-out;
}
body.login #login #wp-submit:hover { background: var(--cis-navy-hell); }
body.login #login #wp-submit:active { transform: scale(.985); }
body.login #login #wp-submit:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--cis-gold); outline: none; }
body.login #login #resetpassform .wp-generate-pw { margin-bottom: 16px; }

/* ---------- Hinweise und Fehler ---------- */
body.login #login :is(.notice, .message, .success) {
	margin: 0 0 18px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	background: #eef2f7;
	color: var(--cis-navy);
}
body.login #login :is(.notice, .message, .success) p { margin: 0; font-size: 13.5px; line-height: 1.5; }
body.login #login .notice-error { background: #fbeceb; color: #8c1d18; }
body.login #login .notice a { color: inherit; text-underline-offset: 2px; }

/* ---------- Links unter der Karte ---------- */
body.login #login :is(#nav, #backtoblog) { margin: 0; padding: 0; font-size: 13.5px; text-align: center; }
body.login #login #nav { margin-top: 20px; }
body.login #login #backtoblog { margin-top: 8px; }
body.login #login :is(#nav, #backtoblog) a { color: var(--cis-leise); text-decoration: none; transition: color 150ms ease-out; }
body.login #login :is(#nav, #backtoblog) a:hover { color: var(--cis-navy); text-decoration: underline; text-underline-offset: 3px; }
body.login #login a:focus,
body.login .privacy-policy-page-link a:focus { color: var(--cis-navy); box-shadow: none; outline: 2px solid var(--cis-gold); outline-offset: 2px; border-radius: 3px; }
body.login .privacy-policy-page-link { margin: 24px 0 0; }
body.login .privacy-policy-page-link a { color: var(--cis-leise); }

/* ---------- Ausgeblendet (seit 1.1.0) ----------
 * Auf der Anmeldeseite nur „← Zu …“: kein „Passwort vergessen?“/„Registrieren“
 * unter der Karte und kein Link darauf in der Fehlermeldung. Die Seiten selbst
 * bleiben erreichbar; auf ihnen bleibt „Anmelden“ als Weg zurück stehen. */
body.login-action-login #login #nav { display: none; }
body.login #login #login_error a[href*="action=lostpassword"] { display: none; }
body.login-action-login #login #backtoblog { margin-top: 20px; }

/* ---------- Gegen Logo-Plugins (seit 1.2.0) ----------
 * White Label CMS u. ä. setzen ein eigenes Logo per `#login h1 a { background-image: … !important }`
 * und eine Hintergrundgrafik auf body.login – ganz am Ende der Seite. Gegen !important
 * hilft nur !important mit höherer Spezifität (ID + Klassen). */
html body.login {
	background-color: #f3f4f6 !important;
	background-image: none !important;
}
body.login #login h1.wp-login-logo a {
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	background: none !important;
	text-indent: 0 !important;
}

/* ---------- Bewegung ---------- */
body.login #login :is(#loginform, #lostpasswordform, #resetpassform, #registerform).shake { animation: cis-wackeln 320ms ease-out; }
@keyframes cis-wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(5px); } }
@keyframes cis-rein { from { opacity: 0; transform: translateY(8px); } }

/* Kurz-Anmeldung im Backend (Sitzung abgelaufen): wenig Platz, keine Einblendung */
body.interim-login #login { padding-top: 20px; padding-bottom: 20px; }
body.interim-login #login :is(#loginform, #lostpasswordform) { animation: none; }

@media (prefers-reduced-motion: reduce) {
	body.login *, body.login *::before { animation: none !important; transition: none !important; }
}