/**
 * Passkeys (includes/passkeys.php) - Anmeldeseite und Profil. Bewusst
 * zurückhaltend, damit es zu klassischer und moderner Backend-Ansicht passt.
 */

.dbu-passkey-anmelden {
	clear: both;
	padding-top: 16px;
}

.dbu-passkey-anmelden[hidden],
.dbu-passkeys [hidden] {
	display: none !important;
}

.dbu-passkey-trenner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: #646970;
	font-size: 13px;
}

.dbu-passkey-trenner::before,
.dbu-passkey-trenner::after {
	content: "";
	flex: 1;
	border-top: 1px solid #dcdcde;
}

.dbu-passkey-knopf,
.dbu-passkeys-knoepfe > * {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.dbu-passkey-anmelden .dbu-passkey-knopf {
	width: 100%;
}

.ist-beschaeftigt {
	opacity: 0.6;
	pointer-events: none;
}

.dbu-passkey-symbol {
	flex: 0 0 auto;
}

/* Die Art der Meldung erkennt man an der Hintergrundfarbe. */
.dbu-passkey-meldung {
	margin: 12px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: #edfaef;
	color: #1d2327;
}

.dbu-passkey-meldung.ist-fehler {
	background: #fcf0f1;
}

.dbu-passkeys {
	max-width: 46rem;
}

.dbu-passkeys-einleitung {
	margin-top: 0;
}

.dbu-passkeys-liste {
	margin: 8px 0 14px;
}

.dbu-passkeys-liste td {
	vertical-align: middle;
}

.dbu-passkeys-liste .dbu-passkey-symbol {
	margin-right: 4px;
	vertical-align: -5px;
}

.dbu-passkeys-aktion {
	text-align: right;
	white-space: nowrap;
}

.dbu-passkeys-bestaetigen {
	margin: 8px 0 0;
	padding: 4px 16px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #1d2327;
}

.dbu-passkeys-knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}