/* ==========================================================================
   BABFE IT-Systemhaus – Anmeldeseiten (Techniker index.pl, Kundenportal customer.pl, E-Mail-Code public.pl)
   Microsoft-Fluent-Stil: zentrierte weiße Karte auf ruhigem Hintergrund mit dezenten Formen in BABFE-Blau.
   Markup kommt aus den Ausgabefiltern BABFELogin (BABFE-Skin, Techniker) und BABFEOTPLogin (BABFE-CustomerPortal).
   Die Datei wird NUR auf den Anmeldeseiten eingebunden (per <link> aus dem Filter) und steht deshalb nicht in
   Loader::Agent::CommonCSS – gen_dark.py (BABFE-DarkMode) erzeugt dafür keine Kopien; das dunkle Schema steht
   unten selbst (Variablen unter html[data-babfe-theme="dark"]).
   Identische Kopie: skins/Customer/default/css/BABFE.Login.css – beide Dateien gemeinsam ändern.
   ========================================================================== */

body.BABFELogin {
    --bl-accent: #106ebe;
    --bl-accent-hover: #0f5fa6;
    --bl-accent-press: #0c4f8a;
    --bl-accent-text: #ffffff;
    --bl-link: #0f62ad;
    --bl-bg: #eef3f9;
    --bl-bg2: #e3ecf6;
    --bl-shape: rgba(16, 110, 190, .16);
    --bl-shape2: rgba(16, 110, 190, .09);
    --bl-card: #ffffff;
    --bl-card-line: rgba(0, 0, 0, .06);
    --bl-shadow: 0 2px 4px rgba(16, 40, 80, .06), 0 12px 40px rgba(16, 40, 80, .14);
    --bl-text: #1b1b1b;
    --bl-muted: #5f5e5c;
    --bl-input: #ffffff;
    --bl-input-line: #8a8886;
    --bl-input-hover: #323130;
    --bl-ghost-hover: #f3f2f1;
    --bl-err-bg: #fde7e9; --bl-err-text: #a4262c; --bl-err-line: #d13438;
    --bl-ok-bg: #dff6dd;  --bl-ok-text: #0e5c0e;  --bl-ok-line: #107c10;
    --bl-warn-bg: #fff4ce; --bl-warn-text: #6b4600; --bl-warn-line: #c19c00;
    --bl-info-bg: #e8f2fb; --bl-info-text: #0f548c; --bl-info-line: #106ebe;
    --bl-font: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-babfe-theme="dark"] body.BABFELogin {
    --bl-accent: #1878c8;
    --bl-accent-hover: #2886d6;
    --bl-accent-press: #106ebe;
    --bl-link: #4aa8f7;
    --bl-bg: #161514;
    --bl-bg2: #1f1e1d;
    --bl-shape: rgba(43, 136, 216, .22);
    --bl-shape2: rgba(43, 136, 216, .10);
    --bl-card: #292827;
    --bl-card-line: #3b3a39;
    --bl-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 40px rgba(0, 0, 0, .45);
    --bl-text: #f3f2f1;
    --bl-muted: #c8c6c4;
    --bl-input: #1f1e1d;
    --bl-input-line: #8a8886;
    --bl-input-hover: #c8c6c4;
    --bl-ghost-hover: #323130;
    --bl-err-bg: #442726; --bl-err-text: #f1bbbc; --bl-err-line: #e9838a;
    --bl-ok-bg: #1f3a1d;  --bl-ok-text: #a7e3a5;  --bl-ok-line: #54b054;
    --bl-warn-bg: #433519; --bl-warn-text: #f8df8b; --bl-warn-line: #d8b33a;
    --bl-info-bg: #1b3046; --bl-info-text: #a9d3f7; --bl-info-line: #4aa8f7;
    color-scheme: dark;
}

/* ---------- Seite ---------- */
html body.BABFELogin {
    background: var(--bl-bg) !important;
    background-image: none !important;
    color: var(--bl-text);
    font-family: var(--bl-font);
    font-size: 14px;
    line-height: 1.43;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}
body.BABFELogin #AppWrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: transparent !important;
}
body.BABFELogin #Header, body.BABFELogin #LoginLogo, body.BABFELogin #ResponsiveFooter,
body.BABFELogin .BABFEThemeSwitch { display: none !important; }

/* Inhalt über den Hintergrundformen (Kundenportal hat kein #AppWrapper) */
body.BABFELogin > #MainBox, body.BABFELogin > #Footer { position: relative !important; z-index: 1; }

/* ruhige Formen im Hintergrund */
.BLBackdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, var(--bl-bg) 0%, var(--bl-bg2) 100%); }
.BLBackdrop span { position: absolute; border-radius: 50%; display: block; }
.BLBackdrop span:nth-child(1) { width: 62vmax; height: 62vmax; right: -22vmax; top: -30vmax; background: radial-gradient(circle at 40% 60%, var(--bl-shape) 0%, transparent 68%); }
.BLBackdrop span:nth-child(2) { width: 54vmax; height: 54vmax; left: -24vmax; bottom: -28vmax; background: radial-gradient(circle at 60% 40%, var(--bl-shape2) 0%, transparent 70%); }
.BLBackdrop span:nth-child(3) { width: 140vmax; height: 26vmax; left: -20vmax; top: 58%; border-radius: 0; transform: rotate(-12deg); background: linear-gradient(90deg, transparent, var(--bl-shape2) 45%, transparent); opacity: .7; }

body.BABFELogin .MainBox, body.BABFELogin #MainBox.Login {
    flex: 1 0 auto;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    padding: 32px 16px 24px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    box-sizing: border-box;
    border: 0 !important;
    box-shadow: none !important;
}
body.BABFELogin .MainBox > div { width: 100%; }

/* ---------- Karte ---------- */
body.BABFELogin #LoginBox, body.BABFELogin #PasswordBox, body.BABFELogin #PasswordResetBox,
body.BABFELogin #MainBox.Login #Container {
    width: 440px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 44px 44px 32px !important;
    box-sizing: border-box;
    background: var(--bl-card) !important;
    border: 1px solid var(--bl-card-line) !important;
    border-radius: 8px !important;
    box-shadow: var(--bl-shadow) !important;
    color: var(--bl-text);
    text-align: left;
    position: relative;
    animation: BLIn .28s cubic-bezier(.1, .9, .2, 1) both;
}
body.BABFELogin #LoginBox.Hidden, body.BABFELogin #PasswordBox.Hidden, body.BABFELogin #PasswordResetBox.Hidden { display: none; }
body.BABFELogin .LoginBox:not(#LoginBox):not(#PasswordResetBox) { width: 440px; max-width: 100%; margin: 0 auto; }
body.BABFELogin .LoginBox:not(#LoginBox):not(#PasswordResetBox) > .ErrorBox,
body.BABFELogin .LoginBox:not(#LoginBox):not(#PasswordResetBox) > .MessageBox { margin: 0 0 12px; }
@keyframes BLIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.BABFELogin #LoginBox, body.BABFELogin #PasswordBox, body.BABFELogin #PasswordResetBox, body.BABFELogin #MainBox.Login #Container { animation: none; } }

body.BABFELogin #LoginBox .WidgetSimple, body.BABFELogin #PasswordBox .WidgetSimple, body.BABFELogin #PasswordResetBox .WidgetSimple,
body.BABFELogin #LoginBox .WidgetSimple > .Content, body.BABFELogin #PasswordBox .WidgetSimple > .Content, body.BABFELogin #PasswordResetBox .WidgetSimple > .Content,
body.BABFELogin #MainBox.Login #Login, body.BABFELogin #MainBox.Login #Reset, body.BABFELogin #MainBox.Login #PasswordReset {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}
body.BABFELogin fieldset, body.BABFELogin #LoginBox fieldset, body.BABFELogin #PasswordBox fieldset, body.BABFELogin #PasswordResetBox fieldset, body.BABFELogin #MainBox.Login fieldset {
    border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0; width: auto !important; display: block !important; gap: 0 !important; }
body.BABFELogin .WidgetSimple > .Content > p.Error:empty { display: none; }

/* Kopf: Logo, Titel, Untertitel */
.BLHead { margin: 0 0 22px; }
.BLLogo { display: block; height: 44px; width: auto; max-width: 100%; margin: 0 0 26px; }
.BLLogo.BLLogoDark { display: none; }
html[data-babfe-theme="dark"] body.BABFELogin .BLLogo.BLLogoLight { display: none; }
html[data-babfe-theme="dark"] body.BABFELogin .BLLogo.BLLogoDark { display: block; }
body.BABFELogin .BLHead h1, body.BABFELogin #MainBox.Login .BLHead h1 {
    font-family: var(--bl-font);
    font-size: 24px !important;
    line-height: 32px;
    font-weight: 600 !important;
    color: var(--bl-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0;
    text-transform: none;
}
body.BABFELogin .BLHead p, body.BABFELogin #MainBox.Login .BLHead p { margin: 4px 0 0 !important; color: var(--bl-muted) !important; font-size: 14px; text-align: left; }
body.BABFELogin #PasswordBox h2, body.BABFELogin #PasswordResetBox h2 { display: none; }

/* ---------- Meldungen ---------- */
body.BABFELogin .BLMsg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-left: 3px solid var(--bl-err-line) !important;
    border-radius: 4px !important;
    background: var(--bl-err-bg) !important;
    color: var(--bl-err-text) !important;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
}
body.BABFELogin .BLMsg span, body.BABFELogin .BLMsg a { color: inherit !important; font-size: inherit !important; }
body.BABFELogin .BLMsg a { text-decoration: underline; }
body.BABFELogin .BLMsg svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: currentColor; }
body.BABFELogin .BLMsg.BLMsgOK { background: var(--bl-ok-bg) !important; color: var(--bl-ok-text) !important; border-left-color: var(--bl-ok-line) !important; }
body.BABFELogin .BLMsg.BLMsgWarn { background: var(--bl-warn-bg) !important; color: var(--bl-warn-text) !important; border-left-color: var(--bl-warn-line) !important; }
body.BABFELogin .BLMsg.BLMsgInfo { background: var(--bl-info-bg) !important; color: var(--bl-info-text) !important; border-left-color: var(--bl-info-line) !important; }
body.BABFELogin #SystemMaintenance { background: var(--bl-warn-bg) !important; color: var(--bl-warn-text) !important; border: 0 !important; border-left: 3px solid var(--bl-warn-line) !important; border-radius: 4px; }
/* Znuny-Hinweis zu Werbeblockern auf der Karte */
body.BABFELogin #LoginBox > .ErrorBox:not(.BLMsg) { margin: 0 0 16px !important; padding: 10px 12px !important; border-radius: 4px; background: var(--bl-warn-bg) !important; color: var(--bl-warn-text) !important; border: 0 !important; border-left: 3px solid var(--bl-warn-line) !important; width: auto !important; font-size: 13px; }
body.BABFELogin #LoginBox > .ErrorBox:not(.BLMsg) span, body.BABFELogin #LoginBox > .ErrorBox:not(.BLMsg) a { color: inherit !important; }
body.BABFELogin .LoginBox > div:empty { display: none; }

/* ---------- Felder ---------- */
body.BABFELogin .BLRow, body.BABFELogin #MainBox.Login fieldset > div, body.BABFELogin #PasswordBox fieldset > div, body.BABFELogin #PasswordResetBox fieldset > div {
    margin: 0 0 16px !important;
    padding: 0 !important;
    position: relative;
    display: block !important;
    float: none !important;
    width: auto !important;
}
body.BABFELogin label, body.BABFELogin #MainBox.Login label {
    display: block !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-family: var(--bl-font);
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px;
    color: var(--bl-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.BABFELogin label .Marker { display: none; }
body.BABFELogin input[type=text], body.BABFELogin input[type=password], body.BABFELogin input[type=email] {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 12px !important;
    font-family: var(--bl-font);
    font-size: 15px !important;
    line-height: 38px;
    color: var(--bl-text) !important;
    background: var(--bl-input) !important;
    border: 1px solid var(--bl-input-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .1s, box-shadow .1s;
}
body.BABFELogin input[type=text]:hover, body.BABFELogin input[type=password]:hover, body.BABFELogin input[type=email]:hover { border-color: var(--bl-input-hover) !important; }
body.BABFELogin input[type=text]:focus, body.BABFELogin input[type=password]:focus, body.BABFELogin input[type=email]:focus {
    border-color: var(--bl-accent) !important;
    box-shadow: inset 0 -2px 0 var(--bl-accent), 0 0 0 1px var(--bl-accent) !important;
}
body.BABFELogin input[readonly] { background: var(--bl-ghost-hover) !important; }
body.BABFELogin input.Error, body.BABFELogin input.ServerError { border-color: var(--bl-err-line) !important; box-shadow: 0 0 0 1px var(--bl-err-line) !important; }
body.BABFELogin input::placeholder { color: var(--bl-muted); opacity: .8; }
body.BABFELogin input:-webkit-autofill { -webkit-text-fill-color: var(--bl-text); -webkit-box-shadow: 0 0 0 40px var(--bl-input) inset !important; caret-color: var(--bl-text); }
body.BABFELogin .TooltipErrorMessage { display: none !important; }
body.BABFELogin .BLFieldError { display: none; color: var(--bl-err-text); font-size: 12.5px; margin-top: 4px; }
body.BABFELogin .BLRow.BLInvalid .BLFieldError { display: block; }
body.BABFELogin .BLRow.BLInvalid input { border-color: var(--bl-err-line) !important; }

/* Kennwort mit Auge */
.BLPw { position: relative; }
body.BABFELogin .BLPw input { padding-right: 44px !important; }
.BLEye {
    position: absolute; right: 1px; top: 1px; bottom: 1px; width: 42px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 0 3px 3px 0; padding: 0; margin: 0;
    color: var(--bl-muted); cursor: pointer; z-index: 12;
}
.BLEye:hover { background: var(--bl-ghost-hover); color: var(--bl-text); }
.BLEye:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
.BLEye svg { width: 20px; height: 20px; fill: currentColor; }
.BLEye .BLEyeOff, .BLEye[aria-pressed="true"] .BLEyeOn { display: none; }
.BLEye[aria-pressed="true"] .BLEyeOff { display: block; }
/* Edge/IE-eigenes Auge ausblenden (sonst doppelt) */
body.BABFELogin input::-ms-reveal, body.BABFELogin input::-ms-clear { display: none; }

body.BABFELogin .BLHint { margin: 6px 0 0; color: var(--bl-muted); font-size: 12.5px; line-height: 1.4; }
body.BABFELogin #TwoFactorToken, body.BABFELogin .BABFEOTP #Password { letter-spacing: .3em; font-size: 18px !important; font-variant-numeric: tabular-nums; }
body.BABFELogin #TwoFactorToken::placeholder, body.BABFELogin .BABFEOTP #Password::placeholder { letter-spacing: .3em; }

/* Zwei-Faktor als zweiter Schritt (BABFE.Login.js) */
body.BABFELogin.BLStep1 #BLTwoFactor { display: none !important; }
body.BABFELogin.BLStep2 #BLUserRow, body.BABFELogin.BLStep2 #BLPwRow, body.BABFELogin.BLStep2 .BLLost,
body.BABFELogin.BLStep2 .BLMsgOK, body.BABFELogin.BLStep2 .BLMsgWarn { display: none !important; }
.BLIdentity {
    display: none; align-items: center; gap: 8px; margin: -6px 0 18px; color: var(--bl-text); font-size: 14px;
}
body.BABFELogin.BLStep2 .BLIdentity, body.BABFELogin .BLIdentity.BLIdentityShown { display: flex; }
body.BABFELogin a.BLBack { text-decoration: none !important; color: var(--bl-text) !important; font-size: 18px; line-height: 28px; }
body.BABFELogin .BLLinkButton, body.BABFELogin button.BLLinkButton[type=submit] { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; width: auto !important;
    color: var(--bl-link) !important; font: inherit !important; font-size: 14px !important; font-weight: 400 !important; cursor: pointer; display: inline !important; box-shadow: none !important; }
body.BABFELogin button.BLLinkButton[type=submit]:hover:not([disabled]) { text-decoration: underline; }
body.BABFELogin button.BLLinkButton[type=submit][disabled] { color: var(--bl-muted) !important; cursor: default; opacity: 1; }
body.BABFELogin .BABFEOTPSim { margin: 0 0 14px; border-radius: 4px; }
body.BABFELogin .BABFEOTPInfo { margin: 0 0 18px !important; color: var(--bl-muted) !important; font-size: 14px; line-height: 1.45; }
.BLBack {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0 0 0 -6px;
    border: 0; border-radius: 50%; background: transparent; color: var(--bl-text); cursor: pointer;
}
.BLBack:hover { background: var(--bl-ghost-hover); }
.BLBack:focus-visible { outline: 2px solid var(--bl-accent); }
.BLBack svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Knöpfe ---------- */
body.BABFELogin .BLActions, body.BABFELogin #LoginBox .Field { margin: 8px 0 0 !important; padding: 0 !important; display: flex !important; justify-content: flex-end; gap: 8px; float: none !important; width: auto !important; }
body.BABFELogin button[type=submit], body.BABFELogin #LoginButton, body.BABFELogin .btn-main.btn-primary, body.BABFELogin #MainBox.Login button.btn-main {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 108px;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    background: var(--bl-accent) !important;
    border: 1px solid var(--bl-accent) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--bl-accent-text) !important;
    font-family: var(--bl-font);
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    float: none !important;
    transition: background-color .1s;
}
body.BABFELogin button[type=submit] span, body.BABFELogin #LoginButton span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
body.BABFELogin button[type=submit]:hover:not([disabled]) { background: var(--bl-accent-hover) !important; border-color: var(--bl-accent-hover) !important; }
body.BABFELogin button[type=submit]:active:not([disabled]) { background: var(--bl-accent-press) !important; }
body.BABFELogin button[type=submit]:focus-visible { outline: 2px solid var(--bl-text) !important; outline-offset: 2px; }
body.BABFELogin button[type=submit][disabled] { opacity: .6; cursor: default; }
body.BABFELogin .BLBtnSecondary {
    display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; height: 40px;
    border: 1px solid var(--bl-input-line); border-radius: 4px; background: transparent; color: var(--bl-text) !important;
    font-size: 15px; font-weight: 600; text-decoration: none !important;
}
body.BABFELogin .BLBtnSecondary:hover { background: var(--bl-ghost-hover); }
body.BABFELogin .BLBtnSecondary svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Links unter dem Formular ---------- */
body.BABFELogin a { color: var(--bl-link) !important; text-decoration: none; }
body.BABFELogin a:hover { text-decoration: underline; }
body.BABFELogin .BLLinks, body.BABFELogin #LoginBox > p.Center, body.BABFELogin #PasswordBox > p.Center, body.BABFELogin #PasswordResetBox > p.Center {
    margin: 18px 0 0 !important; padding: 0 !important; text-align: left !important; font-size: 14px; color: var(--bl-muted);
}
body.BABFELogin .BLNote { margin: 14px 0 0 !important; color: var(--bl-muted) !important; font-size: 13px; text-align: left !important; }
body.BABFELogin .BLDivider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--bl-muted); font-size: 13px; }
body.BABFELogin .BLDivider::before, body.BABFELogin .BLDivider::after { content: ""; flex: 1; border-top: 1px solid var(--bl-card-line); }
html:not([data-babfe-theme="dark"]) body.BABFELogin .BLDivider::before, html:not([data-babfe-theme="dark"]) body.BABFELogin .BLDivider::after { border-top-color: #e1dfdd; }

/* ---------- Fußzeile ---------- */
body.BABFELogin #Footer {
    position: static !important;
    flex: none;
    margin: 0 !important;
    padding: 14px 16px 18px !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
    font-size: 12px !important;
    color: var(--bl-muted) !important;
    line-height: 1.5;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.BABFELogin #Footer::before, body.BABFELogin #Footer::after { content: none !important; display: none !important; }
body.BABFELogin #Footer * { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; }
body.BABFELogin #Footer span { color: var(--bl-muted) !important; }
body.BABFELogin #Footer a { color: var(--bl-muted) !important; display: inline !important; padding: 0 !important; background: none !important; }
body.BABFELogin #Footer a:hover { color: var(--bl-text) !important; }
body.BABFELogin #Footer a span:empty, body.BABFELogin #Footer img { display: none !important; }
body.BABFELogin #Footer .BLSep { margin: 0 6px; }

/* Znuny-Elemente, die auf der Anmeldeseite stören */
body.BABFELogin .mod.modNotification { display: none !important; }
body.BABFELogin #AjaxErrorDialog { display: none; }
body.BABFELogin #NoJavaScript, body.BABFELogin #OldBrowser:not(.Hidden) { width: 440px; max-width: 100%; margin: 0 auto 12px; box-sizing: border-box; }

/* In einem Panel/iframe (z. B. Sitzung im Seitenpanel abgelaufen): kompakter */
body.BABFELogin.BLFramed .BLBackdrop { display: none; }
body.BABFELogin.BLFramed .MainBox { padding: 16px !important; justify-content: flex-start; }
body.BABFELogin.BLFramed #LoginBox { box-shadow: none !important; padding: 28px 24px 20px !important; }
body.BABFELogin.BLFramed #Footer { display: none !important; }

/* ---------- Handy ---------- */
@media (max-width: 520px) {
    html body.BABFELogin, html body.BABFELogin #AppWrapper { background: var(--bl-card) !important; }
    body.BABFELogin .BLBackdrop { display: none; }
    body.BABFELogin .MainBox, body.BABFELogin #MainBox.Login { justify-content: flex-start; padding: 0 !important; }
    body.BABFELogin #LoginBox, body.BABFELogin #PasswordBox, body.BABFELogin #PasswordResetBox, body.BABFELogin #MainBox.Login #Container {
        width: 100% !important;
        padding: 36px 24px 24px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: none;
    }
    .BLLogo { height: 34px; margin-bottom: 22px; }
    body.BABFELogin .BLHead h1, body.BABFELogin #MainBox.Login .BLHead h1 { font-size: 22px !important; }
    body.BABFELogin input[type=text], body.BABFELogin input[type=password], body.BABFELogin input[type=email] { font-size: 16px !important; height: 44px !important; }
    body.BABFELogin button[type=submit], body.BABFELogin #LoginButton { height: 44px !important; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Microsoft-Stil wie Konsole/Kundenportal (29.10.2026): flache Fläche statt Verlaufs-Kreisen, blaue Kopfleiste,
   eckige Karte mit Fluent-Schatten (Tiefe 8), eckige Felder und Knöpfe
   --------------------------------------------------------------------------------------------------------------- */
body.BABFELogin { --bl-bg: #f3f2f1; --bl-bg2: #f3f2f1; --bl-shadow: 0 3.2px 7.2px rgba(0, 0, 0, .13), 0 .6px 1.8px rgba(0, 0, 0, .11); }
html[data-babfe-theme="dark"] body.BABFELogin { --bl-bg: #1b1a19; --bl-bg2: #1b1a19; --bl-shadow: 0 3.2px 7.2px rgba(0, 0, 0, .4), 0 .6px 1.8px rgba(0, 0, 0, .3); }
.BLBackdrop { background: var(--bl-bg) !important; }
.BLBackdrop span { display: none !important; }
body.BABFELogin::before {
    content: "BABFE IT-Systemhaus – Self-Service-Portal"; position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 2;
    background: #106ebe; color: #fff; font: 400 18px/48px var(--bl-font); padding: 0 24px; box-sizing: border-box;
}
html[data-babfe-theme="dark"] body.BABFELogin::before { background: #0f5fa6; }
body.BABFELogin #LoginBox, body.BABFELogin #PasswordBox, body.BABFELogin #PasswordResetBox,
body.BABFELogin #MainBox.Login #Container, body.BABFELogin .LoginBox {
    border-radius: 0 !important; border: 0 !important; box-shadow: var(--bl-shadow) !important; animation: none !important;
}
body.BABFELogin input, body.BABFELogin select, body.BABFELogin textarea, body.BABFELogin button,
body.BABFELogin .CallForAction, body.BABFELogin .BLMsg, body.BABFELogin .btn-main { border-radius: 0 !important; }
body.BABFELogin input[type="text"], body.BABFELogin input[type="password"], body.BABFELogin input[type="email"] { border-width: 1px !important; }