/* wp-login.php im Look der Turmschänke.

   Gestaltet wird nur die Oberfläche: Farben und Schriften kommen aus
   tokens.css und fonts.css, damit ein Farbwechsel dort auch hier ankommt.
   Am Aufbau des Formulars ändert sich nichts — daran hängen Nonces und die
   Zwei-Faktor-Abfragen der Sicherheitsplugins. */

body.login {
	background: var(--color-ink);
	color: var(--color-cream);
	font-family: var(--font-body);
}

/* Warmer Lichtschein wie auf der Startseite. */
body.login::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(60% 45% at 15% 0%, rgb(var(--color-primary-rgb) / 0.18), transparent 70%),
		radial-gradient(50% 40% at 88% 12%, rgb(var(--color-accent-rgb) / 0.20), transparent 72%);
	pointer-events: none;
}

#login {
	position: relative;
	z-index: 1;
	width: min(92vw, 380px);
	padding-block: var(--space-2xl) var(--space-xl);
}

/* ── Wortmarke ───────────────────────────────────────────────
   Wie im Kopf der Website: Schriftzug statt Bilddatei. WordPress schiebt den
   Text per text-indent aus dem Bild heraus, weil dort normalerweise das Logo
   als Hintergrund liegt — das wird hier zurückgenommen. */
.login h1 a,
.login .wp-login-logo a {
	display: block;
	width: auto;
	height: auto;
	margin-block-end: var(--space-xl);
	background: none;
	text-indent: 0;
	text-decoration: none;
	overflow: visible;
	box-shadow: none;
}

.tsch-login__name {
	display: block;
	font-family: var(--font-headline);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-cream);
}

.tsch-login__claim {
	display: block;
	margin-block-start: var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--text-micro);
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--color-primary-light);
}

/* ── Formularfläche ──────────────────────────────────────────── */
.login form {
	margin-block-start: 0;
	padding: var(--space-xl) var(--space-lg);
	background: var(--color-ink-soft);
	border: 1px solid rgb(var(--color-primary-rgb) / 0.38);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

.login label,
.login form .forgetmenot label {
	color: var(--color-cream);
	font-size: var(--text-small);
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	/* WordPress setzt hier 24px — im schmalen Panel wirkt das grob. */
	padding: 10px 12px;
	font-size: var(--text-lead);
	line-height: var(--lh-normal);
	background: var(--color-cream);
	color: var(--color-wood);
	border: 1px solid rgb(var(--color-primary-rgb) / 0.45);
	border-radius: var(--radius-sm);
	box-shadow: none;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--color-primary);
	outline: 2px solid rgb(var(--color-primary-rgb) / 0.55);
	outline-offset: 1px;
	box-shadow: none;
}

/* Das Auge zum Einblenden des Passworts sitzt im hellen Feld. */
.login .wp-pwd .button.wp-hide-pw {
	color: var(--color-wood-soft);
	background: transparent;
	border: none;
}
.login .wp-pwd .button.wp-hide-pw:hover { color: var(--color-primary); }

/* ── Knopf ───────────────────────────────────────────────────── */
.login .button-primary,
.wp-core-ui .login .button-primary {
	padding: 6px 18px;
	height: auto;
	font-family: var(--font-headline);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-white);
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-sm);
	box-shadow: none;
	text-shadow: none;
	transition: background var(--transition-normal), color var(--transition-normal);
}
.login .button-primary:hover,
.wp-core-ui .login .button-primary:hover {
	color: var(--color-ink);
	background: var(--color-primary-light);
}

/* ── Links unter dem Formular ────────────────────────────────── */
.login #nav,
.login #backtoblog {
	padding-inline: 0;
	text-align: center;
}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--color-primary-light);
	font-size: var(--text-small);
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color: var(--color-cream);
}

/* ── Meldungen ───────────────────────────────────────────────── */
.login .message,
.login .success,
.login #login_error,
.login .notice {
	color: var(--color-cream);
	background: var(--color-ink-soft);
	border-inline-start: 4px solid var(--color-primary);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	box-shadow: none;
}
.login #login_error { border-inline-start-color: var(--color-accent-light); }
.login .message a,
.login #login_error a { color: var(--color-primary-light); }

.login .language-switcher { display: none; }