/* Identische Anmeldedarstellung für WH-Time und WH-Service.
   Diese Datei in beiden Anwendungen gleich halten. Die Authentifizierung bleibt
   unverändert; die helle Fläche schützt insbesondere das transparente Firmenlogo. */
body.auth-page {
    color-scheme: light;
    --blue: #1f6fa8; --navy: #12304a; --text: #17232d;
    --muted: #526574; --line: #dbe3e9; --amber: #f2a900;
    margin: 0; min-height: 100vh; color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: linear-gradient(180deg, #edf3f7, #f8fafb 38rem);
}
.auth-page .app-header {
    min-height: 76px; padding: .75rem clamp(1rem,4vw,3.5rem);
    background: #405a75; border: 0; gap: 1rem;
}
/* Auch in angemeldeten WH-Time-Ansichten muss das Signet lesbar bleiben. */
.app-header .brand-logo {
    width: 2.75rem; height: 2.75rem; padding: .25rem;
    background: #fff; border: 1px solid #dbe3e9; border-radius: 50%; object-fit: contain;
}
.auth-page .brand {font-size: 1.35rem; gap: .6rem; letter-spacing: .02em; color: #fff;}
.auth-page .app-header nav {margin-left: auto;}
.auth-page .page-shell {width: calc(100% - 2rem); margin: 0 auto; padding: 2rem 0; flex: 1;}
.auth-page .auth-card {
    width: min(460px,100%); max-width: 460px; margin: 2vh auto;
    padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid #dbe3e9;
    border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px #12304a14;
}
.auth-page .auth-logo {display: block; width: 6rem; height: 6rem; object-fit: contain; background: #fff; padding: .35rem; border-radius: .75rem; margin: 0 auto 1.5rem;}
.auth-page .eyebrow {margin: 0; color: #1f6fa8; font-size: .75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;}
.auth-page .auth-card h1 {font-size: 1.75rem; line-height: 1.2; margin: .5rem 0; color: #12304a;}
.auth-page .muted {color: #526574; font-size: 1rem; line-height: 1.5; margin: 1rem 0;}
.auth-page .form-stack {display: grid; gap: .65rem; max-width: none; margin: 0;}
.auth-page label {color: #17232d; font-size: .9rem; font-weight: 650;}
.auth-page input:not([type=checkbox]):not([type=hidden]) {
    width: 100%; min-width: 0; min-height: 46px; padding: .75rem;
    font: inherit; color: #17232d; background: #fff; border: 1px solid #aebfcb; border-radius: .55rem;
}
.auth-page .password-input {display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; align-items: stretch;}
.auth-page .password-toggle {padding: 0 .75rem; background: #edf3f7; border: 1px solid #aebfcb; border-radius: .55rem; color: #12304a; font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer;}
.auth-page .check {display: flex; align-items: center; gap: .55rem; margin: .25rem 0;}
.auth-page input[type=checkbox] {width: 1rem; height: 1rem; margin: 0; accent-color: #1f6fa8;}
.auth-page .auth-links {text-align: right; margin: .1rem 0 .25rem; font-size: .9rem;}
.auth-page .auth-links a {color: #1f6fa8; font-weight: 650;}
.auth-page .button.primary {width: 100%; min-height: 46px; border: 1px solid #f2a900; border-radius: .6rem; background: #f2a900; color: #17232d; padding: .75rem 1rem; font: inherit; font-weight: 700; cursor: pointer;}
.auth-page .button.primary:hover {background: #e6a000; filter: none;}
.auth-page .validation,.auth-page .text-danger {color: #a12828;}
.auth-page .validation:empty,.auth-page .validation-summary-valid {display: none;}
.auth-page .app-footer {color: #526574; font-size: .85rem; text-align: center; padding: 1.5rem;}
.auth-page :is(input,button,a):focus-visible {outline: 3px solid #1f6fa8; outline-offset: 3px;}
@media(max-width:600px) {.auth-page .page-shell {padding: 1rem 0;} .auth-page .auth-card {margin: 0 auto;} }