/* login.css */

/* ═══════════════════════════════════════════════════════════════
   LOGIN-LANDING (ng_index.php, datasecurity, agb, impressum)
   ═══════════════════════════════════════════════════════════════ */

body.ui-reboot.ng-shell.ng-landing-page {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--ui-bg-space);
	overflow-x: hidden;
	--ng-landing-parallax-x: 0px;
	--ng-landing-parallax-y: 0px;
}

.ng-landing-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	isolation: isolate;
}

.ng-landing-bg__layer,
.ng-landing-bg__stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ng-landing-bg__stars {
	z-index: 1;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.55),
		calc(var(--ng-landing-parallax-y) * 0.55),
		0
	);
}

.ng-landing-bg__comet {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: visible;
	pointer-events: none;
}

.ng-landing-bg__comet-track {
	position: absolute;
	left: 0;
	top: 0;
	width: 68px;
	height: 68px;
	will-change: transform, opacity;
	transform: translate3d(6vw, 8vh, 0) rotate(34deg);
	opacity: 0.78;
	animation: ngLandingCometPass 78s linear infinite;
}

.ng-landing-bg__comet-body {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-origin: center center;
	animation: ngLandingCometTumble 18s linear infinite;
	shape-rendering: geometricPrecision;
}

@keyframes ngLandingCometTumble {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes ngLandingCometPass {
	0% { transform: translate3d(6vw, 8vh, 0) rotate(34deg); opacity: 0.78; }
	88% { opacity: 0.62; }
	100% { transform: translate3d(94vw, 92vh, 0) rotate(34deg); opacity: 0; }
}

.ng-landing-bg__glow {
	z-index: 2;
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, rgb(var(--rgb-azure) / 16%) 0%, transparent 62%),
		radial-gradient(ellipse 55% 40% at 18% 72%, rgb(var(--rgb-ice) / 7%) 0%, transparent 58%),
		radial-gradient(ellipse 45% 35% at 82% 28%, rgb(var(--rgb-azure) / 9%) 0%, transparent 55%);
	opacity: 0.92;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.35),
		calc(var(--ng-landing-parallax-y) * 0.35),
		0
	);
}

.ng-landing-bg__fog {
	z-index: 3;
	filter: blur(42px);
	opacity: 0.75;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.65),
		calc(var(--ng-landing-parallax-y) * 0.65),
		0
	);
}

.ng-landing-bg__fog::before,
.ng-landing-bg__fog::after {
	content: '';
	position: absolute;
	inset: -12%;
	pointer-events: none;
}

.ng-landing-bg__fog::before {
	background:
		radial-gradient(ellipse 90% 55% at 30% 85%, rgb(var(--rgb-azure) / 11%) 0%, transparent 68%),
		radial-gradient(ellipse 75% 50% at 78% 18%, rgb(var(--rgb-ice) / 8%) 0%, transparent 65%);
}

.ng-landing-bg__fog::after {
	background: radial-gradient(ellipse 60% 45% at 52% 52%, rgba(2, 4, 8, 0.35) 0%, transparent 70%);
	opacity: 0.85;
}

.ng-landing-bg__grid {
	z-index: 4;
	background-image:
		linear-gradient(rgb(var(--rgb-ice) / 4.5%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(var(--rgb-ice) / 4.5%) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, rgb(var(--rgb-black)) 20%, transparent 78%);
	opacity: 0.55;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.18),
		calc(var(--ng-landing-parallax-y) * 0.18),
		0
	);
}

.ng-landing-bg__scan {
	z-index: 5;
	overflow: hidden;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.1),
		calc(var(--ng-landing-parallax-y) * 0.1),
		0
	);
}

.ng-landing-bg__scan::before {
	content: '';
	position: absolute;
	left: -8%;
	right: -8%;
	height: 18%;
	top: -22%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgb(var(--rgb-ice) / 2%) 38%,
		rgb(var(--rgb-azure) / 7%) 50%,
		rgb(var(--rgb-ice) / 2%) 62%,
		transparent 100%
	);
	opacity: 0.85;
}

@keyframes ngLandingGlowPulse {
	0%, 100% { opacity: 0.82; }
	50% { opacity: 1; }
}

@keyframes ngLandingFogDrift {
	0% { transform: translate3d(0, 0, 0); opacity: 0.75; }
	100% { transform: translate3d(14px, -10px, 0); opacity: 0.95; }
}

@keyframes ngLandingScanSweep {
	0% { transform: translateY(-8%); }
	100% { transform: translateY(520%); }
}

@media (prefers-reduced-motion: no-preference) {
	.ng-landing-bg__glow { animation: ngLandingGlowPulse 18s ease-in-out infinite; }
	.ng-landing-bg__fog::before { animation: ngLandingFogDrift 32s ease-in-out infinite alternate; }
	.ng-landing-bg__scan::before { animation: ngLandingScanSweep 22s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
	.ng-landing-bg__glow,
	.ng-landing-bg__fog::before,
	.ng-landing-bg__scan::before { animation: none; }
	.ng-landing-bg__comet-track { animation: none; opacity: 0; }
	.ng-landing-bg__comet-body { animation: none; }
}

.landing-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: calc(100vh - 200px);
	padding: var(--space-20);
	text-align: center;
}

@keyframes logoGlow {
	0%, 100% { text-shadow: 0 0 30px rgb(var(--rgb-white) / 15%), 0 0 60px rgb(var(--rgb-white) / 8%); }
	50% { text-shadow: 0 0 40px rgb(var(--rgb-white) / 40%), 0 0 80px rgb(var(--rgb-white) / 12%); }
}

.landing-planet-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-shrink: 0;
	padding: clamp(24px, 4vh, 48px) var(--space-20);
	box-sizing: border-box;
}

.landing-planet-hero .landing-logo {
	position: relative;
	z-index: 1;
}

.landing-planet-hero .landing-tagline {
	position: relative;
	z-index: 1;
	margin-bottom: 0;
}

.landing-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2.5rem, 8vw, 5rem);
	text-transform: uppercase;
	margin-bottom: var(--space-8);
	font-family: var(--font-body);
	color: var(--ui-white);
	letter-spacing: 4px;
	line-height: 1;
}

.landing-logo__label {
	text-shadow: 0 0 30px rgb(var(--rgb-white) / 15%), 0 0 60px rgb(var(--rgb-white) / 8%);
	animation: logoGlow 3s ease-in-out infinite;
}

.landing-logo__label span,
.landing-logo span {
	color: var(--color-accent);
	opacity: 1;
}

.landing-logo--scanner .landing-logo__label {
	background: linear-gradient(90deg, var(--ui-white) 0%, var(--ui-white) 40%, #00ffcc 50%, var(--ui-white) 60%, var(--ui-white) 100%);
	background-size: 200% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: ngLogoScanlight 3s linear infinite;
	text-shadow: none;
}

.landing-logo--scanner .landing-logo__label span {
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

@keyframes ngLogoScanlight {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

.landing-logo--terminal .landing-logo__label {
	overflow: hidden;
	white-space: nowrap;
	border-right: 1px solid var(--ui-white);
	width: 0;
	animation: ngLogoTyping 1.5s steps(13, end) forwards, ngLogoBlinkCaret 0.75s step-end infinite;
	text-shadow: none;
}

@keyframes ngLogoTyping {
	from { width: 0; }
	to { width: 13ch; }
}

@keyframes ngLogoBlinkCaret {
	from, to { border-color: transparent; }
	50% { border-color: var(--ui-white); }
}

.landing-logo--glitch .landing-logo__label {
	position: relative;
	animation: none;
	text-shadow: none;
}

.landing-logo--glitch .landing-logo__label::before,
.landing-logo--glitch .landing-logo__label::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	pointer-events: none;
}

.landing-logo--glitch .landing-logo__label::before {
	color: #0ff;
	z-index: -1;
	animation: ngLogoGlitch 4s infinite;
	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
	transform: translate(-2px, 1px);
}

.landing-logo--glitch .landing-logo__label::after {
	color: #f0f;
	z-index: -2;
	animation: ngLogoGlitch 4s infinite alternate-reverse;
	clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
	transform: translate(2px, -1px);
}

@keyframes ngLogoGlitch {
	0%, 96% { transform: translate(0, 0); opacity: 0; }
	97% { transform: translate(-2px, 1px); opacity: 1; }
	98% { transform: translate(2px, -1px); opacity: 1; }
	99% { transform: translate(-1px, 2px); opacity: 1; }
	100% { transform: translate(0, 0); opacity: 0; }
}

.landing-tagline {
	font-size: var(--fs-12);
	margin-bottom: var(--space-28);
	font-family: var(--font-body);
	letter-spacing: 1px;
	color: var(--ui-white);
}

.landing-form {
	display: grid;
	gap: var(--space-16);
}

.landing-input-group {
	position: relative;
}

.landing-input-group label,
.landing-input-group-label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 1px;
	margin-bottom: var(--space-4);
	text-transform: uppercase;
	color: var(--ui-white);
}

.landing-input {
	width: 100%;
	padding: var(--space-12) var(--space-16);
	background: rgba(4, 8, 16, 0.88);
	border: 1px solid var(--ui-white);
	border-radius: 12px;
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-sizing: border-box;
	color-scheme: dark;
}

.landing-input:-webkit-autofill,
.landing-input:-webkit-autofill:hover,
.landing-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ui-white);
	caret-color: var(--ui-white);
	-webkit-box-shadow: 0 0 0 1000px rgba(4, 8, 16, 0.96) inset;
	box-shadow: 0 0 0 1000px rgba(4, 8, 16, 0.96) inset;
	border-color: rgb(var(--rgb-azure) / 45%);
	transition: background-color 5000s ease-in-out 0s;
}

.landing-input::placeholder {
	color: rgb(var(--rgb-ice) / 45%);
	opacity: 1;
}

/* Register: Abschnitte, Datumszeile, Selects, Passwort-Toggle */
.landing-form-section {
	display: grid;
	gap: var(--space-12);
}

.landing-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
}

.landing-date-row {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
	gap: var(--space-8);
	align-items: stretch;
	width: 100%;
}

.landing-select {
	width: 100%;
	min-width: 0;
	padding: var(--space-12) var(--space-12);
	background: rgba(4, 8, 16, 0.88);
	border: 1px solid var(--ui-white);
	border-radius: 12px;
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	line-height: 1.2;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-sizing: border-box;
	color-scheme: dark;
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, rgb(var(--rgb-ice) / 75%) 50%),
		linear-gradient(135deg, rgb(var(--rgb-ice) / 75%) 50%, transparent 50%),
		linear-gradient(to right, transparent, transparent);
	background-position:
		calc(100% - 16px) calc(50% - 2px),
		calc(100% - 11px) calc(50% - 2px),
		0 0;
	background-size: 5px 5px, 5px 5px, 100% 100%;
	background-repeat: no-repeat;
	padding-right: var(--space-28);
	cursor: pointer;
}

.landing-select:focus {
	outline: none;
	border-color: rgb(var(--rgb-azure) / 75%);
	box-shadow: 0 0 0 1px rgb(var(--rgb-azure) / 28%), 0 0 12px rgb(var(--rgb-azure) / 14%);
}

.landing-select option {
	background: #070d18;
	color: var(--ui-white);
}

.landing-password-container {
	position: relative;
	display: block;
	width: 100%;
}

.landing-password-container .landing-input {
	padding-right: 48px;
}

.landing-password-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 2px;
	background: transparent;
	color: rgb(var(--rgb-ice) / 72%);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-password-toggle:hover,
.landing-password-toggle:focus-visible {
	color: var(--ui-white);
	border-color: rgb(var(--rgb-azure) / 35%);
	background: rgb(var(--rgb-azure) / 10%);
	box-shadow: 0 0 10px rgb(var(--rgb-azure) / 12%);
	outline: none;
}

.landing-password-toggle i {
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

.landing-checkbox-group {
	display: grid;
	gap: var(--space-10);
	text-align: left;
}

.landing-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-10);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	line-height: 1.4;
	color: rgb(var(--rgb-ice) / 78%);
	cursor: pointer;
}

.landing-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: var(--space-2);
	accent-color: rgb(var(--rgb-azure) / 90%);
	cursor: pointer;
}

.landing-checkbox a {
	color: var(--ui-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.landing-checkbox a:hover {
	color: var(--color-primary);
}

.landing-success {
	display: grid;
	gap: var(--space-10);
	padding: var(--space-12);
	border: 1px solid rgb(var(--rgb-azure) / 40%);
	border-radius: 2px;
	background: rgba(8, 24, 40, 0.45);
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-align: left;
}

.landing-back-link {
	display: flex;
	justify-content: center;
	margin-top: var(--space-8);
}

.landing-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	padding: var(--space-10) var(--space-16);
	border: 1px solid rgb(var(--rgb-azure) / 35%);
	border-radius: 2px;
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-back-btn:hover {
	border-color: rgb(var(--rgb-azure) / 70%);
	background: rgb(var(--rgb-azure) / 10%);
	box-shadow: 0 0 12px rgb(var(--rgb-azure) / 14%);
}

@media (max-width: 560px) {
	.landing-form-row {
		grid-template-columns: 1fr;
	}

	.landing-date-row {
		grid-template-columns: 1fr;
	}
}

.landing-error {
	background: transparent;
	border: 1px solid rgba(255, 85, 51, 0.5);
	color: var(--ui-alert-orange);
	padding: var(--space-12);
	margin-bottom: var(--space-16);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.landing-divider {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	margin: var(--space-16) 0;
	color: rgb(var(--rgb-ice) / 52%);
}

.landing-divider::before,
.landing-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ui-white), transparent);
}

.landing-divider span {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 1px;
}

.landing-alt-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
}

.landing-alt-btn {
	padding: var(--space-12);
	background: rgb(var(--rgb-white) / 0);
	border: none;
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.landing-alt-btn i {
	font-size: var(--fs-12);
	color: var(--color-primary);
}

.landing-alt-btn.is-primary {
	grid-column: 1 / -1;
	background: transparent;
}

.landing-alt-btn.is-primary i {
	color: var(--color-accent);
}

.landing-alt-btn--disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.landing-alt-btn--hidden {
	display: none;
}

.landing-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--landing-footer-padding-y) var(--space-20);
	padding-bottom: calc(var(--landing-footer-padding-y) + env(safe-area-inset-bottom, 0px));
	display: flex;
	justify-content: center;
	gap: var(--space-20);
	box-sizing: border-box;
	z-index: 2;
}

/*
 * Guest/Register: Footer darf Formular/Panel nicht ueberdecken.
 * Problem war: .landing-hero mit flex:1 + min-height:0 wurde auf Viewport
 * gequetscht, Panel overflowte sichtbar darunter, Footer lag darueber.
 * Hero waechst mit Inhalt; Footer bleibt im Fluss danach (bei kurzem Inhalt
 * weiterhin am unteren Rand via margin-top:auto am Footer-Block).
 */
body.ui-reboot.ng-shell.ng-guest-page {
	overflow-x: hidden;
	overflow-y: auto;
}

body.ui-reboot.ng-shell.ng-guest-page > .landing-hero,
body.ui-reboot.ng-shell.ng-landing-page.ng-guest-page .landing-hero {
	flex: 0 0 auto;
	min-height: auto;
	height: auto;
	overflow: visible;
	padding-bottom: var(--space-16);
}

body.ui-reboot.ng-shell.ng-guest-page > .landing-footer-block {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: 100%;
	margin-top: auto;
	box-sizing: border-box;
	/* kein Overlay, kein Einfangen von Klicks ueber dem Panel */
	pointer-events: none;
	background: transparent;
}

body.ui-reboot.ng-shell.ng-guest-page > .landing-footer-block > .landing-footer,
body.ui-reboot.ng-shell.ng-register-page > .landing-footer-block > .landing-footer {
	position: static;
	bottom: auto;
	left: auto;
	right: auto;
	width: 100%;
	padding-top: var(--landing-footer-padding-y);
	padding-bottom: calc(var(--landing-footer-padding-y) + env(safe-area-inset-bottom, 0px));
	padding-inline: var(--space-20);
	pointer-events: auto;
	z-index: auto;
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel {
	width: min(560px, 92vw);
	overflow: visible;
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-terminal__body {
	padding: var(--space-12) 18px var(--space-16);
	text-align: left;
}

body.ui-reboot.ng-shell.ng-guest-page .landing-login-terminal__footer .landing-footer-block {
	margin-top: var(--space-10);
	width: 100%;
}

body.ui-reboot.ng-shell.ng-guest-page .landing-login-terminal__footer .landing-footer {
	position: static;
	width: 100%;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--space-20);
}

.landing-footer a {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-white);
	text-decoration: none;
	letter-spacing: 1px;
	transition: color 0.2s ease;
}

.landing-footer a:hover {
	color: var(--color-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-hero {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(16px, 3vh, 32px);
	width: 100%;
	box-sizing: border-box;
}

body.ui-reboot.ng-shell.ng-landing-page:not(.ng-guest-page) .landing-footer {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	z-index: 2;
	flex: 0 0 auto;
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
	padding-top: var(--landing-footer-padding-y);
	padding-bottom: calc(var(--landing-footer-padding-y) + env(safe-area-inset-bottom, 0px));
	padding-inline: var(--space-20);
}

body.ui-reboot.ng-shell.ng-landing-page:not(.ng-guest-page) .landing-footer.landing-footer--index {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	margin-top: auto;
	width: 100%;
	flex: 0 0 auto;
}

/* Index: Der Login-Panel-Inhalt darf den Hero in der Hoehe vergroessern.
   Sonst bleibt der Footer am Flex-Hero haengen und das Panel laeuft darunter. */
body.ui-reboot.ng-shell.ng-index-page {
	overflow-y: auto;
}

body.ui-reboot.ng-shell.ng-index-page > .landing-hero {
	flex: 0 0 auto;
	min-height: auto;
	height: auto;
	overflow: visible;
}

@media (max-width: 768px) {
	body.ui-reboot.ng-shell.ng-landing-page .landing-hero {
		min-height: auto;
		padding: max(var(--space-16), env(safe-area-inset-top, 0px)) var(--space-16) var(--space-20);
		gap: var(--space-12);
	}

	.landing-planet-hero {
		padding: var(--space-16) var(--space-16);
	}

	body.ui-reboot.ng-shell:is(.ng-landing-page, .ng-register-page, .ng-guest-page) .ng-landing-logo-globe.ng-galaxy-background {
		width: clamp(160px, 55vw, 280px);
		height: clamp(160px, 55vw, 280px);
	}

	body.ui-reboot.ng-shell.ng-landing-page .landing-logo {
		font-size: clamp(1.65rem, 7.5vw, 2.75rem);
		letter-spacing: 2px;
	}

	body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel {
		width: min(480px, calc(100vw - 2 * var(--space-16)));
	}

	body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel.landing-login-panel--legal-wide {
		width: min(720px, calc(100vw - 2 * var(--space-16)));
	}
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE TERMINAL ELEMENTS (ng_index.php)
   ═══════════════════════════════════════════════════════════════ */
.landing-login-panel:not(.ng-protocol-widget) {
	width: min(480px, 90vw);
	position: relative;
	padding: 0;
	overflow: visible;
	isolation: isolate;
	background: transparent;
	border: none;
	--landing-login-corner-border: rgba(191, 239, 255, 0.5);
	box-shadow: 0 0 28px rgb(var(--rgb-azure) / 10%), 0 18px 48px rgb(var(--rgb-black) / 42%);
}

.landing-login-panel.landing-login-panel--legal-wide {
	width: min(720px, 90vw);
}

.ng-hud-terminal-feed.landing-login-panel:not(.ng-protocol-widget) {
	overflow: hidden;
}

.landing-login-panel:not(.ng-protocol-widget)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 2px;
	background:
		repeating-linear-gradient(0deg, rgb(var(--rgb-ice) / 1.8%) 0, rgb(var(--rgb-ice) / 1.8%) 1px, transparent 1px, transparent 3px),
		linear-gradient(165deg, rgba(8, 16, 28, 0.94) 0%, rgba(4, 8, 16, 0.88) 48%, rgba(6, 12, 22, 0.92) 100%);
	pointer-events: none;
}

.landing-login-panel > :not(.landing-login-panel__corner) { position: relative; z-index: 1; }

.landing-login-terminal__header {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-8);
	padding: var(--space-16) var(--space-20) var(--space-12);
	border-bottom: none;
	background: transparent;
	overflow: hidden;
	/* Seltene, starke Verzerrung ohne Positionsspruenge des gesamten Bereichs. */
	animation: landingTerminalFrameDistort 8.8s steps(1, end) infinite;
	will-change: clip-path, filter;
}

.landing-login-terminal__header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgb(var(--rgb-azure) / 20%) 0%, transparent 42%),
		linear-gradient(180deg, rgb(var(--rgb-ice) / 10%) 0%, transparent 100%);
	mix-blend-mode: screen;
	opacity: 0.18;
	animation:
		ngGlitchBars 1.25s linear infinite,
		ngRadarGlitchDrop 8.8s steps(1, end) infinite,
		landingTerminalOverlaySlice 8.8s steps(1, end) infinite;
	will-change: clip-path, opacity, background-position;
}

.landing-login-terminal__header > * { position: relative; z-index: 1; }

.landing-login-terminal__header::after {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(var(--rgb-ice) / 55%), transparent);
	opacity: 0.7;
	pointer-events: none;
}

.landing-login-terminal__header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-12); }

.landing-login-terminal__badge {
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: var(--space-3) var(--space-8);
	border: 1px solid var(--badge-accent-border);
	font-weight: 700;
	text-shadow: var(--badge-accent-text-shadow);
	background: var(--badge-accent-bg);
	color: var(--badge-accent-color);
}

.landing-login-terminal__channel {
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: var(--space-3) var(--space-8);
	border: 1px solid rgb(var(--rgb-azure) / 35%);
	color: rgb(var(--rgb-ice) / 78%);
	background: rgba(2, 6, 14, 0.65);
}

.landing-login-terminal__title {
	margin: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: clamp(1.1rem, 3.2vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	color: var(--ui-white);
	text-shadow: 0 0 16px rgb(var(--rgb-azure) / 35%);
}

.landing-login-terminal__title-text,
.landing-login-terminal__status-text {
	position: relative;
	display: inline-block;
	animation: landingTerminalGlyphWarp 8.8s steps(1, end) infinite;
	will-change: filter, clip-path;
}

.landing-login-terminal__title-text::before,
.landing-login-terminal__title-text::after,
.landing-login-terminal__status-text::before,
.landing-login-terminal__status-text::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
}

.landing-login-terminal__title-text::before,
.landing-login-terminal__status-text::before {
	color: rgba(0, 255, 255, 0.95);
	animation: landingTerminalTextSlice 8.8s steps(1, end) infinite;
}

.landing-login-terminal__title-text::after,
.landing-login-terminal__status-text::after {
	color: rgba(255, 0, 255, 0.95);
	animation: landingTerminalTextSlice 8.8s steps(1, end) infinite reverse;
}

.landing-login-terminal__status-text::before,
.landing-login-terminal__status-text::after,
.landing-login-terminal__status-text {
	animation-delay: -1.2s;
}

.landing-login-terminal__subtitle {
	margin: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--rgb-ice) / 52%);
}

.landing-login-terminal__status {
	margin: 0;
	padding: var(--space-10) var(--space-12);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(var(--rgb-ice) / 62%);
	text-align: center;
}

.landing-login-terminal__status-label {
	display: inline-block;
	margin-right: var(--space-8);
	padding: 1px 5px;
	color: var(--color-accent);
	border: 1px solid rgb(var(--rgb-amber) / 35%);
}

@keyframes ngGlitchBars {
	0% { background-position: 0 0; }
	100% { background-position: 0 40px; }
}

@keyframes ngRadarGlitchDrop {
	0%, 20%, 39%, 63%, 100% { opacity: 0.18; }
	21% { opacity: 0.08; }
	22% { opacity: 0.2; }
	40% { opacity: 0.02; }
	41% { opacity: 0.18; }
	64% { opacity: 0.1; }
	65% { opacity: 0.18; }
}

/* Responsive: Terminal-Cursor und Header-Glitch ohne Animation */
@media (prefers-reduced-motion: reduce) {
	.landing-login-terminal__header,
	.landing-login-terminal__header::before,
	.landing-login-terminal__title-text,
	.landing-login-terminal__title-text::before,
	.landing-login-terminal__title-text::after,
	.landing-login-terminal__status-text,
	.landing-login-terminal__status-text::before,
	.landing-login-terminal__status-text::after,
	.landing-login-terminal__cursor {
		animation: none;
	}

	.landing-login-terminal__cursor {
		opacity: 0.6;
	}

	.landing-login-terminal__header::before {
		opacity: 0.12;
	}
}

.landing-login-panel .landing-input-group label {
	letter-spacing: 0.16em;
	color: rgb(var(--rgb-ice) / 52%);
}

.landing-login-panel .landing-select {
	border-radius: 2px;
	background: rgba(2, 5, 12, 0.92);
	border-color: rgb(var(--rgb-azure) / 32%);
	box-shadow: inset 0 0 0 1px rgb(var(--rgb-black) / 45%);
	color: var(--ui-white);
	background-image:
		linear-gradient(45deg, transparent 50%, rgb(var(--rgb-ice) / 75%) 50%),
		linear-gradient(135deg, rgb(var(--rgb-ice) / 75%) 50%, transparent 50%);
	background-position:
		calc(100% - 16px) calc(50% - 2px),
		calc(100% - 11px) calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.landing-login-panel .landing-select:focus {
	border-color: var(--ui-white);
	box-shadow:
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%),
		0 0 0 1px rgb(var(--rgb-azure) / 35%),
		0 0 14px rgb(var(--rgb-azure) / 18%);
}

.landing-login-panel .landing-password-toggle {
	color: rgb(var(--rgb-ice) / 70%);
}

.landing-login-panel .landing-password-toggle:hover,
.landing-login-panel .landing-password-toggle:focus-visible {
	color: var(--ui-white);
	border-color: rgb(var(--rgb-azure) / 40%);
	background: rgb(var(--rgb-azure) / 12%);
}

.landing-login-panel .landing-input-group-label {
	letter-spacing: 0.16em;
	color: rgb(var(--rgb-ice) / 52%);
}

.landing-login-panel .landing-input {
	border-radius: 2px;
	background: rgba(2, 5, 12, 0.92);
	border-color: rgb(var(--rgb-azure) / 32%);
	box-shadow: inset 0 0 0 1px rgb(var(--rgb-black) / 45%);
	color: var(--ui-white);
}

.landing-login-panel .landing-input:-webkit-autofill,
.landing-login-panel .landing-input:-webkit-autofill:hover,
.landing-login-panel .landing-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ui-white);
	caret-color: var(--ui-white);
	-webkit-box-shadow:
		0 0 0 1000px rgba(2, 5, 12, 0.98) inset,
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%);
	box-shadow:
		0 0 0 1000px rgba(2, 5, 12, 0.98) inset,
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%);
	border-color: rgb(var(--rgb-azure) / 45%);
}

.landing-login-panel .landing-input::placeholder {
	color: rgb(var(--rgb-ice) / 42%);
	opacity: 1;
}

.landing-login-panel .landing-input:focus {
	border-color: var(--ui-white);
	box-shadow:
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%),
		0 0 0 1px rgb(var(--rgb-azure) / 35%),
		0 0 14px rgb(var(--rgb-azure) / 18%);
}

.landing-login-panel .landing-error {
	border-radius: 2px;
	background: rgba(40, 12, 8, 0.45);
	border-color: rgba(255, 85, 51, 0.55);
}

.landing-login-panel .landing-divider::before,
.landing-login-panel .landing-divider::after {
	background: linear-gradient(90deg, transparent, rgb(var(--rgb-azure) / 35%), transparent);
}

/* ============================================================
   Landing / Login / Guest: Hardcoded Blau → Neon-Primary
	(historische Landing-Selektoren nutzen noch rgba(79,172,254…))
   ============================================================ */

body.ui-reboot.ng-shell.ng-landing-page {
	background-image: radial-gradient(
		ellipse 120% 80% at 50% 100%,
		color-mix(in srgb, var(--cyberpunk-bg) 88%, rgb(var(--rgb-black))) 0%,
		var(--cyberpunk-bg) 72%
	);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__glow {
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, color-mix(in srgb, var(--cyberpunk-primary) 16%, transparent) 0%, transparent 62%),
		radial-gradient(ellipse 55% 40% at 18% 72%, color-mix(in srgb, var(--cyberpunk-muted) 10%, transparent) 0%, transparent 58%),
		radial-gradient(ellipse 45% 35% at 82% 28%, color-mix(in srgb, var(--cyberpunk-primary) 10%, transparent) 0%, transparent 55%);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__fog::before {
	background:
		radial-gradient(ellipse 90% 55% at 30% 85%, color-mix(in srgb, var(--cyberpunk-primary) 12%, transparent) 0%, transparent 68%),
		radial-gradient(ellipse 75% 50% at 78% 18%, color-mix(in srgb, var(--cyberpunk-muted) 10%, transparent) 0%, transparent 65%);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__grid {
	background-image:
		linear-gradient(color-mix(in srgb, var(--cyberpunk-primary) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-primary) 6%, transparent) 1px, transparent 1px);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__scan::before {
	background: linear-gradient(
		180deg,
		transparent 0%,
		color-mix(in srgb, var(--cyberpunk-muted) 4%, transparent) 38%,
		color-mix(in srgb, var(--cyberpunk-primary) 10%, transparent) 50%,
		color-mix(in srgb, var(--cyberpunk-muted) 4%, transparent) 62%,
		transparent 100%
	);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel {
	--landing-login-corner-border: var(--cyberpunk-border-dim);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel::before {
	background:
		repeating-linear-gradient(
			0deg,
			color-mix(in srgb, var(--cyberpunk-primary) 3%, transparent) 0,
			color-mix(in srgb, var(--cyberpunk-primary) 3%, transparent) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(165deg, rgba(12, 16, 8, 0.94) 0%, rgba(6, 8, 4, 0.88) 48%, rgba(10, 14, 6, 0.92) 100%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__header {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-primary) 16%, transparent) 0%, transparent 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--cyberpunk-muted) 8%, transparent) 0%, transparent 100%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__header::before {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-primary) 22%, transparent) 0%, transparent 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--cyberpunk-muted) 12%, transparent) 0%, transparent 100%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__header::after {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyberpunk-primary) 55%, transparent), transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__channel {
	border-color: var(--cyberpunk-border-dim);
	color: var(--cyberpunk-muted);
	background: rgba(8, 10, 4, 0.7);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__title {
	text-shadow: 0 0 16px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__subtitle,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__status {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__footer {
	border-top-color: var(--cyberpunk-border-dim);
	background:
		linear-gradient(0deg, rgb(var(--rgb-black) / 35%) 0%, transparent 100%),
		rgba(8, 10, 4, 0.55);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__cursor {
	background: color-mix(in srgb, var(--cyberpunk-primary) 80%, transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input-group label {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input {
	background: rgba(8, 10, 4, 0.92);
	border-color: var(--cyberpunk-border-dim);
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input::placeholder {
	color: color-mix(in srgb, var(--cyberpunk-muted) 70%, transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:focus {
	border-color: var(--cyberpunk-primary);
	box-shadow:
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%),
		0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent),
		0 0 14px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:-webkit-autofill,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:-webkit-autofill:hover,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--cyberpunk-text-bright);
	caret-color: var(--cyberpunk-primary);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 50%, transparent);
	-webkit-box-shadow:
		0 0 0 1000px rgba(8, 10, 4, 0.98) inset,
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%);
	box-shadow:
		0 0 0 1000px rgba(8, 10, 4, 0.98) inset,
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--landing-submit-yellow-muted: color-mix(in srgb, var(--cyberpunk-primary-bright) 58%, #92998f);
	--landing-submit-pink-muted: color-mix(in srgb, var(--cyberpunk-neon-pink) 54%, #777d78);
	overflow: clip;
	overflow-clip-margin: 4px;
	border: 1px solid transparent;
	border-radius: 32px;
	box-shadow:
		0 0 14px 5px rgba(3, 6, 5, 0.88),
		inset 0 0 7px 2px rgb(var(--rgb-black) / 28%);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	font-weight: 600;
	filter: none;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel button.landing-submit {
	box-sizing: border-box;
	min-height: 45px;
	padding: var(--space-12) 34px;
	border-color: var(--cyberpunk-primary-bright);
	color: var(--cyberpunk-text-on-primary);
	background: var(--cyberpunk-primary);
	line-height: 1;
	letter-spacing: 0.15rem;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel button.landing-submit:hover,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel button.landing-submit:focus-visible {
	border-color: var(--ng-opaque-white);
	background: var(--cyberpunk-primary-bright);
	box-shadow: 0 0 14px 4px var(--cyberpunk-primary-glow), inset 0 0 7px 2px rgb(var(--rgb-black) / 20%);
	outline: none;
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-select {
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 35%, transparent);
	color: var(--cyberpunk-text-bright);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--cyberpunk-primary) 50%),
		linear-gradient(135deg, var(--cyberpunk-primary) 50%, transparent 50%);
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-select option {
	background: var(--cyberpunk-bg-panel-solid);
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-select:focus {
	border-color: var(--cyberpunk-primary);
	box-shadow:
		inset 0 0 0 1px rgb(var(--rgb-black) / 45%),
		0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 35%, transparent),
		0 0 14px color-mix(in srgb, var(--cyberpunk-primary) 18%, transparent);
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-input-group-label,
body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-checkbox {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-password-toggle {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-password-toggle:hover,
body.ui-reboot.ng-shell.ng-register-page .landing-login-panel .landing-password-toggle:focus-visible {
	color: var(--cyberpunk-primary);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent);
	background: color-mix(in srgb, var(--cyberpunk-primary) 12%, transparent);
}

body.ui-reboot.ng-shell.ng-register-page .landing-back-btn {
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 35%, transparent);
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-register-page .landing-back-btn:hover {
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 70%, transparent);
	background: color-mix(in srgb, var(--cyberpunk-primary) 10%, transparent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--cyberpunk-primary) 14%, transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-form > .landing-submit {
	justify-self: center;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit__button {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 122px;
	height: 45px;
	padding: var(--space-12) 34px;
	border: none;
	border-radius: 32px;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: 0.15rem;
	color: var(--cyberpunk-text-on-primary);
	background-color: var(--cyberpunk-bg);
	cursor: pointer;
	mix-blend-mode: color-dodge;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Registrierung: laengerer CTA bleibt einzeilig im selben Button-Chrome. */
body.ui-reboot.ng-shell.ng-register-page .landing-submit__button,
body.ui-reboot.ng-shell.ng-register-page .landing-submit__text-overlay {
	width: 240px;
	min-width: 240px;
	white-space: nowrap;
}

body.ui-reboot.ng-shell.ng-register-page .landing-submit__text-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 45px;
	padding: 0;
	text-align: center;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit__button::after {
	content: "";
	position: absolute;
	pointer-events: none;
	inset: 0;
	border-radius: 32px;
	background-size: 200% 200%;
	mix-blend-mode: difference;
	z-index: 1;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer {
	position: absolute;
	pointer-events: none;
	left: -160px;
	width: 500%;
	aspect-ratio: 1;
	background: radial-gradient(
		ellipse at 65% 180%,
		var(--landing-submit-yellow-muted),
		var(--landing-submit-pink-muted),
		var(--landing-submit-yellow-muted),
		var(--landing-submit-pink-muted),
		var(--landing-submit-yellow-muted),
		var(--landing-submit-pink-muted),
		var(--landing-submit-yellow-muted),
		var(--landing-submit-pink-muted),
		var(--landing-submit-yellow-muted),
		var(--landing-submit-pink-muted),
		var(--landing-submit-yellow-muted)
	);
	mix-blend-mode: difference;
	opacity: 0.72;
	animation: ngLandingSubmitRotate 8s linear infinite;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(2) { animation-delay: 0s; animation-duration: 25s; }
body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(3) { animation-delay: 0.15s; animation-duration: 15.9s; }
body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(4) { animation-delay: 0.53s; animation-duration: 26.4s; }
body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(5) { animation-delay: 0.45s; animation-duration: 17.8s; }
body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(6) { animation-delay: 1.6s; animation-duration: 19.2s; }
body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(7) { animation-delay: 1.6s; animation-duration: 29.2s; }
body.ui-reboot.ng-shell.ng-landing-page .landing-submit__gradient-layer:nth-child(8) { animation-delay: 1.6s; animation-duration: 20.2s; mix-blend-mode: color-dodge; opacity: 0.68; }

body.ui-reboot.ng-shell.ng-landing-page .landing-submit__light {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	width: 80%;
	height: 1.9rem;
	border-radius: 50px;
	background: color-mix(in srgb, var(--landing-submit-yellow-muted) 33%, transparent);
	filter: blur(5px);
	opacity: 0.65;
	animation: ngLandingSubmitPulse 3s ease-in-out infinite;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit__text-overlay {
	position: absolute;
	pointer-events: none;
	z-index: 3;
	padding: var(--space-12) 34px;
	border-radius: 32px;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: 0.15rem;
	color: var(--ng-opaque-black);
	mix-blend-mode: normal;
	transition: transform 0.3s ease;
	opacity: 1;
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit:hover .landing-submit__text-overlay {
	transform: scale(1.1);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit:active .landing-submit__text-overlay {
	transform: scale(0.95);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-submit:hover .landing-submit__button,
body.ui-reboot.ng-shell.ng-landing-page .landing-submit:focus-within .landing-submit__button {
	color: transparent;
	text-shadow: 0 0 0 transparent;
}

@keyframes ngLandingSubmitRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes ngLandingSubmitPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.1; }
}

@keyframes ngLandingSubmitOpacityPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-divider::before,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-divider::after {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent), transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-divider {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-alt-btn {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-alt-btn i {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-alt-btn:hover {
	color: var(--cyberpunk-primary-bright);
	text-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-footer,
body.ui-reboot.ng-shell.ng-landing-page .landing-footer a {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-footer a:hover {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-tagline {
	color: var(--cyberpunk-muted);
}