/* SchalkeTOTAL – Login-Formular (Profilseite und Anmelde-Fenster) */

.st-auth { display: block; }
.st-auth-note { margin: 0; color: var(--st-text-soft); }
.st-auth-intro { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.st-auth-intro strong { font-size: 19px; font-weight: 800; }
.st-auth-intro small { font-size: 13px; line-height: 1.45; color: var(--st-text-soft); }

.st-auth-providers { display: grid; gap: 8px; }
.st-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	border: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s;
}
.st-auth-btn:hover { opacity: .9; }
.st .st-auth-btn--apple { background: #000; color: #fff; }
.st .st-auth-btn--google { background: #fff; color: #1f1f1f; }

.st-auth-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-text-soft); }
.st-auth-or::before, .st-auth-or::after { content: ''; flex: 1; height: 1px; background: var(--st-line); }

.st-auth-form { display: grid; gap: 10px; }
.st-auth-form label { display: grid; gap: 5px; }
.st-auth-form label span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--st-text-soft); }
.st-auth-form input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--st-line);
	background: var(--st-blue-deeper);
	color: #fff;
	font: inherit;
	font-size: 16px; /* verhindert Zoom am iPhone */
	outline: none;
}
.st-auth-form input::placeholder { color: var(--st-text-soft); }
.st-auth-form input:focus { border-color: rgba(255, 255, 255, .6); }
.st .st-auth-msg { min-height: 1em; margin: 0; font-size: 13px; color: #ffd27a; }
.st-auth-submit { margin: 2px 0 0; width: 100%; background: #fff; color: var(--st-blue) !important; border-color: #fff; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 13px; }
.st-auth-submit:disabled { opacity: .6; }
.st-auth-switch { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 14px 0 0; }
.st-auth-switch button { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.st-auth-me { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.st-account-avatar--initial { display: grid; place-items: center; background: #fff; color: var(--st-blue); font-size: 26px; font-weight: 800; }
.st-auth-name .st-account-actions button { cursor: pointer; font: inherit; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.st-auth-name .st-account-actions .st-more-btn:first-child { background: #fff; color: var(--st-blue); }
.st-account-card.st-auth { display: block; }


/* ---------- Login als Fenster (openLogin() in auth.js, z. B. vor dem Absenden eines Kommentars) ---------- */

.st-login-modal {
	box-sizing: border-box;
	width: min(420px, calc(100vw - 24px));
	max-height: calc(100dvh - 24px);
	margin: auto;
	padding: 28px 22px 22px;
	overflow: auto;
	border: 0;
	background: var(--st-blue, #004d9d);
	color: #fff;
	box-shadow: 0 30px 80px rgba(0, 10, 30, .6);
	animation: st-login-in .2s ease-out;
}
.st-login-modal::backdrop { background: rgba(0, 12, 35, .72); backdrop-filter: blur(2px); }
@keyframes st-login-in { from { opacity: 0; transform: translateY(14px); } }
.st-login-close {
	position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px;
	padding: 0; border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: .8;
}
.st-login-close:hover { opacity: 1; }
.st-login-modal .st-auth-intro { padding-right: 28px; }
.st-login-modal .st-auth-submit { border: 2px solid #fff; }
html.st-modal-open { overflow: hidden; }
@media (max-width: 600px) {
	/* Handy: als Blatt von unten */
	.st-login-modal { width: 100vw; max-width: none; margin: auto 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
	@keyframes st-login-in { from { transform: translateY(40px); opacity: 0; } }
}