/* Anmeldung und Abmeldung verwenden die zentralen Variablen des Designsystems,
 * benötigen vor dem eigentlichen App-Rahmen aber ein eigenes Seitenlayout. */
html
	{
	min-width: 20rem;
	min-height: 100%;
	background: var(--mj26-page);
	}

body.mj26-login-body
	{
	min-width: 20rem;
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--mj26-primary) 13%, transparent) 0, transparent 28rem),
		radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--mj26-info) 10%, transparent) 0, transparent 26rem),
		var(--mj26-page);
	color: var(--mj26-text);
	}

.mj26-login-layout
	{
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: clamp(1rem, 4vw, 3rem);
	}

.mj26-login-shell
	{
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(23rem, .85fr);
	width: min(70rem, 100%);
	min-height: min(38rem, calc(100vh - 3rem));
	overflow: hidden;
	border: 1px solid var(--mj26-border);
	border-radius: var(--mj26-radius-large);
	background: var(--mj26-surface);
	box-shadow: var(--mj26-shadow-large);
	}

.mj26-login-brand
	{
	position: relative;
	display: grid;
	align-content: center;
	gap: 1.4rem;
	min-width: 0;
	padding: clamp(2rem, 6vw, 4.5rem);
	overflow: hidden;
	border-right: 1px solid var(--mj26-border);
	background: linear-gradient(145deg, color-mix(in srgb, var(--mj26-primary-soft) 78%, var(--mj26-surface)), var(--mj26-surface-soft));
	}

.mj26-login-brand::after
	{
	content: "";
	position: absolute;
	right: -6rem;
	bottom: -7rem;
	width: 18rem;
	height: 18rem;
	border: 1px solid color-mix(in srgb, var(--mj26-primary) 20%, transparent);
	border-radius: 50%;
	box-shadow:
		0 0 0 2.5rem color-mix(in srgb, var(--mj26-primary) 4%, transparent),
		0 0 0 5rem color-mix(in srgb, var(--mj26-primary) 3%, transparent);
	pointer-events: none;
	}

.mj26-login-logo-surface
	{
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	justify-self: start;
	max-width: min(100%, 18rem);
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--mj26-radius-small);
	background: transparent;
	box-shadow: none;
	}

.mj26-login-logo
	{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 7rem;
	object-fit: contain;
	border: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	}

.mj26-login-brand-copy
	{
	position: relative;
	z-index: 1;
	max-width: 34rem;
	}

.mj26-login-brand-copy h1
	{
	margin: .22rem 0 .7rem;
	font-size: clamp(2rem, 4vw, 3.35rem);
	}

.mj26-login-brand-copy p
	{
	max-width: 31rem;
	margin: 0;
	font-size: clamp(.98rem, 1.5vw, 1.12rem);
	}

.mj26-login-eyebrow
	{
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	color: var(--mj26-primary);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .035em;
	text-transform: uppercase;
	}

.mj26-login-eyebrow::before
	{
	content: "";
	display: block;
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--mj26-primary);
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mj26-primary) 14%, transparent);
	}

.mj26-login-benefits
	{
	position: relative;
	z-index: 1;
	display: grid;
	gap: .62rem;
	margin: 0;
	padding: 0;
	list-style: none;
	}

.mj26-login-benefits li
	{
	display: flex;
	align-items: center;
	gap: .65rem;
	color: var(--mj26-text);
	font-size: .88rem;
	font-weight: 700;
	}

.mj26-login-benefits i
	{
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid color-mix(in srgb, var(--mj26-success) 55%, var(--mj26-border));
	border-radius: 50%;
	background: var(--mj26-success-soft);
	}

.mj26-login-benefits i::before
	{
	content: "";
	position: absolute;
	left: .31rem;
	top: .28rem;
	width: .47rem;
	height: .25rem;
	border-left: 2px solid var(--mj26-success);
	border-bottom: 2px solid var(--mj26-success);
	transform: rotate(-45deg);
	}

.mj26-login-card
	{
	display: grid;
	align-content: center;
	min-width: 0;
	padding: clamp(1.7rem, 5vw, 3.6rem);
	background: var(--mj26-surface);
	}

.mj26-login-card-head
	{
	margin-bottom: 1.1rem;
	}

.mj26-login-card-head h2,
.mj26-login-result-card h2
	{
	margin: .35rem 0 .5rem;
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	}

.mj26-login-card-head p,
.mj26-login-result-card > p
	{
	margin: 0;
	font-size: .9rem;
	line-height: 1.45;
	}

.mj26-login-form
	{
	display: grid;
	gap: .35rem;
	}

.mj26-login-form .mj26-form-field
	{
	grid-column: 1 / -1;
	padding: .3rem 0;
	}

.mj26-login-form .mj26-form-field-label
	{
	min-height: 0;
	font-size: .78rem;
	}

.mj26-login-form input
	{
	width: 100%;
	min-height: 2.72rem;
	box-sizing: border-box;
	padding: .62rem .72rem;
	border: 1px solid var(--mj26-border-strong);
	border-radius: var(--mj26-radius-small);
	background: var(--mj26-input-bg);
	color: var(--mj26-text);
	font: 600 .92rem/1.2 var(--mj26-font-body);
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
	}

.mj26-login-form input:focus
	{
	border-color: var(--mj26-focus);
	box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--mj26-focus) 17%, transparent);
	}

.mj26-login-actions
	{
	display: grid;
	gap: .8rem;
	margin-top: .85rem;
	}

.mj26-login-submit
	{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	min-height: 2.8rem;
	}

.mj26-login-submit:disabled
	{
	cursor: wait;
	opacity: .72;
	}

.mj26-login-button-icon
	{
	position: relative;
	display: block;
	width: 1rem;
	height: 1rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	}

.mj26-login-button-icon::before
	{
	content: "";
	position: absolute;
	left: .25rem;
	top: .18rem;
	width: .27rem;
	height: .27rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	}

.mj26-login-button-icon::after
	{
	content: "";
	position: absolute;
	left: .19rem;
	bottom: .14rem;
	width: .5rem;
	height: .26rem;
	border: 1.5px solid currentColor;
	border-bottom: 0;
	border-radius: .45rem .45rem 0 0;
	}

.mj26-login-submit.is-loading .mj26-login-button-icon
	{
	border-right-color: transparent;
	animation: mj26-login-spin .72s linear infinite;
	}

.mj26-login-submit.is-loading .mj26-login-button-icon::before,
.mj26-login-submit.is-loading .mj26-login-button-icon::after
	{
	display: none;
	}

.mj26-login-forgot
	{
	justify-self: center;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	}

.mj26-login-forgot:hover,
.mj26-login-forgot:focus-visible
	{
	text-decoration: underline;
	}

.mj26-login-card-foot
	{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.55rem;
	padding-top: .85rem;
	border-top: 1px solid var(--mj26-border);
	color: var(--mj26-muted);
	font-size: .7rem;
	}

.mj26-login-card-foot span
	{
	display: inline-flex;
	align-items: center;
	gap: .36rem;
	}

.mj26-login-card-foot span::before
	{
	content: "";
	display: block;
	width: .44rem;
	height: .55rem;
	border: 1px solid var(--mj26-success);
	border-radius: .08rem;
	box-shadow: inset 0 -.23rem 0 var(--mj26-success-soft);
	}

.mj26-login-loader[hidden]
	{
	display: none !important;
	}

.mj26-login-loader
	{
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--mj26-page) 88%, transparent);
	backdrop-filter: blur(4px);
	}

.mj26-login-loader-panel
	{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .75rem 1rem;
	width: min(24rem, calc(100vw - 2rem));
	padding: 1rem;
	border: 1px solid var(--mj26-border-strong);
	border-radius: var(--mj26-radius);
	background: var(--mj26-surface);
	box-shadow: var(--mj26-shadow-large);
	}

.mj26-login-loader-symbol
	{
	display: block;
	width: 2.35rem;
	height: 2.35rem;
	border: .22rem solid color-mix(in srgb, var(--mj26-primary) 22%, var(--mj26-border));
	border-top-color: var(--mj26-primary);
	border-radius: 50%;
	animation: mj26-login-spin .8s linear infinite;
	}

.mj26-login-loader-copy
	{
	display: grid;
	gap: .12rem;
	}

.mj26-login-loader-copy strong
	{
	color: var(--mj26-text);
	font-size: .94rem;
	}

.mj26-login-loader-copy small
	{
	font-size: .74rem;
	}

.mj26-login-loader-track
	{
	grid-column: 1 / -1;
	height: .18rem;
	overflow: hidden;
	border-radius: .1rem;
	background: var(--mj26-border);
	}

.mj26-login-loader-track i
	{
	display: block;
	width: 38%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, var(--mj26-primary), transparent);
	animation: mj26-login-track 1.15s ease-in-out infinite;
	}

.mj26-login-result-card
	{
	justify-items: start;
	}

.mj26-login-result-icon
	{
	position: relative;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	margin-bottom: 1.25rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	}

.mj26-login-result-icon.is-success
	{
	background: var(--mj26-success-soft);
	color: var(--mj26-success);
	}

.mj26-login-result-icon.is-warning
	{
	background: var(--mj26-warning-soft);
	color: var(--mj26-warning);
	}

.mj26-login-result-icon.is-danger
	{
	background: var(--mj26-danger-soft);
	color: var(--mj26-danger);
	}

.mj26-login-result-icon i
	{
	display: block;
	width: 1.25rem;
	height: .65rem;
	border-left: .2rem solid currentColor;
	border-bottom: .2rem solid currentColor;
	transform: translateY(-.12rem) rotate(-45deg);
	}

.mj26-login-result-icon.is-warning i
	{
	width: .2rem;
	height: 1.2rem;
	border: 0;
	border-radius: .1rem;
	background: currentColor;
	box-shadow: 0 .85rem 0 -.02rem currentColor;
	transform: translateY(-.3rem);
	}

.mj26-login-result-icon.is-danger i
	{
	width: 1.3rem;
	height: 1.3rem;
	border: 0;
	background:
		linear-gradient(45deg, transparent 43%, currentColor 44%, currentColor 56%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, currentColor 44%, currentColor 56%, transparent 57%);
	transform: none;
	}

.mj26-login-result-actions
	{
	width: 100%;
	margin-top: 1.2rem;
	}

.mj26-login-result-actions .mj26-button
	{
	justify-content: center;
	width: 100%;
	min-height: 2.8rem;
	}

.mj26-login-result-actions.is-stacked
	{
	display: grid;
	gap: .65rem;
	}

/* Die Passwortauswertung beginnt mit einem sichtbaren Ladezustand. Im
 * Fehlerfall liegt die Ergebnisansicht vollständig darüber und bleibt auch
 * ohne JavaScript bedienbar. */
.mj26-auth-error-layout
	{
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: auto;
	background:
		radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--mj26-primary) 13%, transparent) 0, transparent 28rem),
		radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--mj26-info) 10%, transparent) 0, transparent 26rem),
		var(--mj26-page);
	}

@keyframes mj26-login-spin
	{
	to { transform: rotate(360deg); }
	}

@keyframes mj26-login-track
	{
	0% { transform: translateX(-110%); }
	100% { transform: translateX(290%); }
	}

@media (max-width: 52rem)
	{
	.mj26-login-layout
		{
		place-items: start center;
		padding: 1rem;
		}

	.mj26-login-shell
		{
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		}

	.mj26-login-brand
		{
		gap: .8rem;
		padding: 1.35rem;
		border-right: 0;
		border-bottom: 1px solid var(--mj26-border);
		}

	.mj26-login-brand-copy h1
		{
		margin-bottom: .3rem;
		font-size: 1.75rem;
		}

	.mj26-login-brand-copy p,
	.mj26-login-benefits
		{
		display: none;
		}

	.mj26-login-logo-surface
		{
		max-width: 13rem;
		}

	.mj26-login-logo
		{
		max-height: 4.5rem;
		}

	.mj26-login-card
		{
		padding: 1.35rem;
		}
	}

@media (max-width: 28rem)
	{
	.mj26-login-layout
		{
		padding: 0;
		}

	.mj26-login-shell
		{
		min-height: 100vh;
		border: 0;
		border-radius: 0;
		}

	.mj26-login-card-foot
		{
		align-items: flex-start;
		flex-direction: column;
		}
	}

@media (prefers-reduced-motion: reduce)
	{
	.mj26-login-submit.is-loading .mj26-login-button-icon,
	.mj26-login-loader-symbol,
	.mj26-login-loader-track i
		{
		animation: none;
		}
	}