/* Gemeinsames Aussehen für Login, Registrierung und Passwort-Seiten (Styleguide: hell, ruhig, eine Karte) */
body.auth, body.auth *, body.auth *::before, body.auth *::after { box-sizing: border-box; }
body.auth {
    font-family: 'Open Sans', sans-serif;
    background: var(--color-bg, #f8f9fa);
    color: var(--color-text, #374151);
    min-height: 100vh; height: auto; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 16px;
}
body.auth .auth-logo { text-align: center; margin: 0 0 20px; }
body.auth .auth-logo img { display: block; margin: 0 auto; height: 40px; width: auto; filter: none; }
body.auth .lg-register { text-align: center; white-space: nowrap; font-size: clamp(.72rem, 3.6vw, .875rem); }
body.auth .card,
body.auth .lg-wrap {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05));
    padding: 32px 28px; width: 100%; max-width: 440px; min-height: 0; display: block; margin: 0 auto;
}
body.auth .card.wide { max-width: 560px; }
body.auth .lg-form-panel, body.auth .lg-form-inner { padding: 0; background: transparent; max-width: none; display: block; }
body.auth h1, body.auth .lg-form-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--color-heading, #111827); margin: 0 0 6px; text-align: center; }
body.auth .lg-form-header { margin-bottom: 24px; }
body.auth p, body.auth .lg-form-header p, body.auth p.sub { color: var(--color-muted, #6b7280); font-size: .92rem; text-align: center; }
body.auth label, body.auth .fg label { font-size: .72rem; font-weight: 700; color: var(--color-muted, #6b7280); text-transform: uppercase; letter-spacing: .08em; }
body.auth input:not([type=checkbox]):not([type=radio]), body.auth select, body.auth .fg input {
    border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-input, 10px);
    font-size: 16px; font-family: inherit; color: var(--color-heading, #111827); background: var(--color-surface, #fff);
}
body.auth .fg input { padding: 12px 14px 12px 40px; }
body.auth input:focus, body.auth select:focus, body.auth .fg input:focus { border-color: var(--color-accent, #4A5A47); box-shadow: 0 0 0 3px rgba(74,90,71,.12); outline: none; background: #fff; }
body.auth button[type=submit], body.auth .btn-login, body.auth .btn {
    background: var(--color-accent, #4A5A47); color: #fff; border: 0; border-radius: var(--radius-btn, 10px);
    font-family: inherit; font-size: 1rem; font-weight: 700; padding: 13px 20px; cursor: pointer; box-shadow: none;
}
body.auth button[type=submit]:hover, body.auth .btn-login:hover { background: var(--color-accent-hover, #3A4739); box-shadow: none; transform: none; }
body.auth a { color: var(--color-accent, #4A5A47); }
body.auth .back { color: var(--color-muted, #6b7280); }
body.auth .success, body.auth .alert-success { background: var(--color-accent-light, #EEF1EA); color: var(--color-accent, #4A5A47); border: 1px solid #D5DCCF; border-radius: var(--radius-input, 10px); }
body.auth .alert-error, body.auth .error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: var(--radius-input, 10px); }
@media (max-width: 480px) {
    body.auth { justify-content: flex-start; padding: 20px 14px; }
    body.auth .card, body.auth .lg-wrap { padding: 24px 18px; }
}