/* login.css — Anmeldeseiten (Aufbau wie CRM main.css „login-*“), Farben nur aus Variablen.
   Hintergrund: Violett mit leichtem Verlauf (--modul-verlauf-von/-bis, im Dunkelmodus gedämpft). Darauf steht keine
   kleine Schrift; alles Lesbare liegt auf der Karte (--flaeche-inhalt). */

body.fibu-login { margin: 0; }

.login-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px 16px;
	background-image: linear-gradient(160deg, var(--modul-verlauf-von) 0%, var(--modul-verlauf-von) 30%, var(--modul-verlauf-bis) 100%);
}
.login-stage { position: relative; width: 100%; max-width: 380px; }

.login-box {
	position: relative;
	z-index: 2;
	padding: 36px 32px 56px;
	color: var(--schrift);
	background-color: var(--flaeche-inhalt);
	border-radius: 6px;
	box-shadow: 0 8px 30px color-mix(in srgb, var(--modul-verlauf-bis) 45%, transparent);
}
.login-logo { position: absolute; top: 18px; right: 20px; height: 32px; width: auto; }
.login-box h1 { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: var(--modul-schrift-kopf); }
.login-box h1 span { font-weight: 400; color: var(--schrift-zart); }
.login-host { margin: 0 0 20px; font-size: 12px; font-style: italic; color: var(--schrift-zart); }
.login-version { position: absolute; left: 32px; bottom: 18px; margin: 0; font-size: 11px; color: var(--schrift-zart); }
.login-box .fibu-theme-toggle { position: absolute; right: 16px; bottom: 14px; }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--schrift-zart); }
.login-form input[type="text"], .login-form input[type="password"], .login-form select { font-size: 14px; padding: 8px 10px; color: var(--schrift); }
.login-code { font-family: 'Ubuntu Mono', monospace; font-size: 20px !important; letter-spacing: .25em; text-align: center; }
.login-senden { justify-content: center; width: 100%; padding: 9px 14px; font-size: 14px; }

.login-cookie-check { flex-direction: row !important; align-items: flex-start; gap: 8px !important; color: var(--schrift) !important; }
.login-cookie-check input { margin-top: 2px; }

.login-link {
	padding: 0;
	font: inherit;
	color: var(--link);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}
.login-abbrechen { margin-top: 14px; text-align: center; font-size: 12px; }

.login-fehler {
	margin: 0 0 14px;
	padding: 8px 10px;
	font-size: 13px;
	color: var(--schrift);
	background-color: color-mix(in srgb, var(--modul-accent) 12%, var(--flaeche-inhalt));
	border-left: 4px solid var(--modul-accent);
}
.login-hinweis { font-size: 13px; }
.login-ziel { margin: 0; font-size: 18px; text-align: center; word-break: break-all; }

/* QR-Code: immer dunkel auf hell, auch im Dunkelmodus (Kameras lesen invertierte Codes schlecht) */
.login-qr {
	width: 200px;
	margin: 8px auto 12px;
	padding: 10px;
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	border-radius: 4px;
}
.login-qr svg { display: block; width: 100%; height: auto; }
.login-geheimnis { font-size: 12px; text-align: center; color: var(--schrift-zart); }
.login-geheimnis code, .login-codes code { font-family: 'Ubuntu Mono', monospace; font-size: 14px; color: var(--schrift); }

.login-codes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	margin: 12px 0 18px;
	padding: 12px;
	list-style: none;
	background-color: var(--flaeche-feld);
	border: 1px solid var(--rahmen);
	border-radius: 4px;
}

.login-mandanten { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.login-mandanten form { margin: 0; }
.login-mandant {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	text-align: left;
	color: var(--schrift);
	background-color: var(--flaeche-feld);
	border: 1px solid var(--rahmen);
	border-left: 4px solid var(--modul-accent);
	border-radius: 3px;
	cursor: pointer;
}
.login-mandant:hover, .login-mandant.aktiv { background-color: color-mix(in srgb, var(--modul-accent) 10%, var(--flaeche-feld)); }
.login-mandant span { display: flex; flex-direction: column; }
.login-mandant small { color: var(--schrift-zart); }

/* Cookie-Hinweis: gleitet hinter der Karte hervor (CRM), auf schmalem Bildschirm darunter */
.login-cookie-info {
	position: absolute;
	top: 20px;
	right: 0;
	z-index: 1;
	width: 300px;
	padding: 18px 20px;
	font-size: 12px;
	color: var(--schrift);
	background-color: var(--flaeche-inhalt);
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: transform .3s ease, opacity .3s ease;
}
.login-cookie-info.offen { transform: translateX(332px); opacity: 1; pointer-events: auto; }
.login-cookie-info h2 { margin-top: 0; font-size: 14px; }
.login-cookie-info ul { padding-left: 18px; }

@media (max-width: 760px) {
	.login-cookie-info { position: static; width: auto; margin-top: 12px; display: none; transform: none; }
	.login-cookie-info.offen { display: block; transform: none; }
}