/* ============================================================================= Login-Seite im Leitstand-Stil — IMMER dunkel (unabhängig vom User-Skin, da vor dem Login kein Nutzer bekannt ist). Page-scoped auf #kt_login. Palette identisch zum ZÜS-/Leitstand-Look (zues/dashboard #zt-dash.zt-dark). ============================================================================= */ #kt_login { --lg-bg: #0b1118; --lg-panel: #121b26; --lg-line: #233140; --lg-line2: #2e3f52; --lg-txt: #dde6ee; --lg-mut: #8ba0b5; --lg-accent: #29ABE2; --lg-btn-ink: #04121d; --lg-crit: #e5484d; --lg-mono: 'Roboto Mono', Consolas, monospace; color: var(--lg-txt); } /* Heller Modus (folgt der zuletzt in der App gewählten Einstellung, siehe data-login-mode am ): Panel/Felder hell — Hintergrundbild + Logo bleiben dunkel (das Logo ist weiss). */ html[data-login-mode="light"] #kt_login { --lg-bg: #eef1f4; --lg-panel: #ffffff; --lg-line: #d9e0e7; --lg-line2: #c3ccd6; --lg-txt: #1C2B3A; --lg-mut: #4a5560; --lg-accent: #1c86c0; --lg-btn-ink: #ffffff; --lg-crit: #B02A37; } /* Hintergrund: das Leitstand-Bild (dashboard-lobby.jpg, wie das Super-Admin- Dashboard) dezent geblurrt. Das Bild liegt in einem eigenen ::before-Layer (Blur auf dem Container würde den Inhalt mitblurren); negativer Versatz verhindert helle Blur-Ränder. Overlay bewusst leicht, damit das Bild sichtbar bleibt (Werte angelehnt ans Super-Admin-Dashboard). */ #kt_login > .kt-grid__item--fluid { position: relative; overflow: hidden; background-color: #0b1118 !important; background-image: none !important; } #kt_login > .kt-grid__item--fluid::before { content: ""; position: absolute; top: -28px; right: -28px; bottom: -28px; left: -28px; background: url('../../media/bg/dashboard-lobby.jpg') center / cover no-repeat; filter: blur(6px); } #kt_login > .kt-grid__item--fluid::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(1100px 520px at 12% -10%, rgba(44, 119, 244, 0.16), transparent 60%), radial-gradient(820px 420px at 100% 0%, rgba(124, 108, 255, 0.11), transparent 55%), linear-gradient(rgba(8, 12, 24, 0.42), rgba(8, 12, 24, 0.58)); } #kt_login .kt-login__wrapper, #kt_login .kt-footer { position: relative; z-index: 1; } /* Login-Karte als Leitstand-Panel */ #kt_login .kt-login__container { max-width: 430px; width: 100%; margin: 0 auto; } #kt_login .kt-login__logo { text-align: center; } #kt_login .sk-lg-panel { background: var(--lg-panel); border: 1px solid var(--lg-line); border-radius: 2px; padding: 0 26px 26px; box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85); } #kt_login .sk-lg-ph { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--lg-line); margin: 0 -26px 20px; padding: 13px 26px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 700; color: var(--lg-txt); } #kt_login .sk-lg-ph .idx { font-family: var(--lg-mono); color: var(--lg-accent); font-size: 11px; } #kt_login .sk-lg-sub { font-size: 11.5px; color: var(--lg-mut); text-transform: none; letter-spacing: normal; font-weight: 400; margin-left: auto; } /* Formularfelder (login-2.css Pill-Optik überschreiben) */ #kt_login .kt-form .input-group { margin-bottom: 14px; } #kt_login .kt-form .form-control { background: var(--lg-bg) !important; border: 1px solid var(--lg-line2) !important; border-radius: 2px !important; color: var(--lg-txt) !important; height: 48px; padding: 0 16px; font-size: 14px; width: 100%; } #kt_login .kt-form .form-control::placeholder { color: var(--lg-mut); opacity: 1; } #kt_login .kt-form .form-control:focus { border-color: var(--lg-accent) !important; box-shadow: 0 0 0 3px rgba(41, 171, 226, 0.22); outline: 0; } /* Autofill nicht grell weiss. Das E-Mail-Feld hat autofocus -> ist beim Laden :focus, und die :focus-box-shadow oben wuerde die Autofill-Inset-Maske ueberschreiben. Deshalb !important (schlaegt die nicht-!important :focus-Regel) und im :focus-Fall Inset-Maske + Fokus-Ring kombiniert. var(--lg-bg)/--lg-txt folgen hell/dunkel. */ #kt_login .kt-form .form-control:-webkit-autofill, #kt_login .kt-form .form-control:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px var(--lg-bg) inset !important; -webkit-text-fill-color: var(--lg-txt) !important; caret-color: var(--lg-txt); } #kt_login .kt-form .form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--lg-bg) inset, 0 0 0 3px rgba(41, 171, 226, 0.22) !important; -webkit-text-fill-color: var(--lg-txt) !important; caret-color: var(--lg-txt); } /* Passwort-vergessen-Link */ #kt_login .kt-login__extra { margin: 2px 0 16px; } #kt_login .kt-login__link { color: var(--lg-mut); font-size: 13px; } #kt_login .kt-login__link:hover { color: var(--lg-accent); } /* Fehlermeldung */ #kt_login .errorMsg { margin: 0 0 14px; padding: 10px 13px; border: 1px solid var(--lg-crit); border-left-width: 3px; border-radius: 2px; background: rgba(229, 72, 77, 0.10); color: var(--lg-crit); font-size: 13px; font-weight: 600; text-shadow: none; } /* Login-Button */ #kt_login .kt-login__actions { margin: 0; text-align: center; } #kt_login .kt-login__actions .kt-login__btn-primary { width: 100%; border-radius: 2px; background: var(--lg-accent); border: 1px solid var(--lg-accent); color: var(--lg-btn-ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; height: 48px; padding: 0; font-size: 13px; } #kt_login .kt-login__actions .kt-login__btn-primary:hover, #kt_login .kt-login__actions .kt-login__btn-primary:focus { filter: brightness(1.12); background: var(--lg-accent); border-color: var(--lg-accent); color: var(--lg-btn-ink); } /* Footer (Impressum/DSGVO/Cookies) — liegt in BEIDEN Modi auf dem dunklen Hintergrundbild, daher feste helle Töne statt der Modus-Variablen */ #kt_login .kt-footer { background: transparent !important; } #kt_login .kt-footer .kt-footer__copyright, #kt_login .kt-footer .kt-footer__copyright .kt-link, #kt_login .kt-footer .kt-footer__menu .kt-footer__menu-link { color: rgba(200, 214, 228, 0.75) !important; } #kt_login .kt-footer .kt-footer__copyright .kt-link:hover, #kt_login .kt-footer .kt-footer__menu .kt-footer__menu-link:hover { color: #eef4f9 !important; } /* Mobil */ @media (max-width: 480px) { #kt_login .kt-login__container { max-width: none; padding: 0 4px; } #kt_login .kt-login__wrapper { padding: 28px 16px 8px; } #kt_login .kt-login__logo { margin-bottom: 2rem; } #kt_login .sk-lg-panel { padding: 0 18px 20px; } #kt_login .sk-lg-panel .sk-lg-ph { margin: 0 -18px 18px; padding: 12px 18px; } }