/* =============================================================================
   auth.css – Login / Passwort-Seiten (öffentlich, ohne Dashboard-Rahmen)
   ============================================================================= */

.auth-wrap {
    min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
/* Linke Markenspalte mit warmem Verlauf (Moodboard) */
.auth-brand {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    padding: 3.5rem; color: #fff;
    background:
        linear-gradient(150deg, rgba(69,69,67,.86), rgba(99,90,80,.82)),
        radial-gradient(circle at 20% 20%, rgba(164,114,101,.55), transparent 55%);
    background-color: var(--c-taupe-dark);
}
.auth-brand .marke-logo { margin: 0 0 .5rem; }
.auth-brand .marke-wort { font-family: var(--font-head); font-size: 1.7rem; font-weight: 600; letter-spacing: .04em; color: #fff; line-height: 1; margin: 0; }
.auth-brand .claim { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.35; margin-top: 2rem; max-width: 22ch; opacity: .96; }
.auth-brand .herz-gross { position: absolute; right: -40px; bottom: -40px; opacity: .12; color: #fff; }

/* Rechte Formularspalte */
.auth-form-spalte { display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: var(--c-cream); }
.auth-box { width: 100%; max-width: 380px; }
.auth-box h1 { font-size: 1.7rem; margin-bottom: .25rem; }
.auth-box .unter { color: var(--c-text-mut); margin-bottom: 1.8rem; }
.auth-box .zusatz { margin-top: 1.4rem; font-size: .9rem; text-align: center; }
.auth-box .auth-version { text-align: center; color: var(--c-text-mut); font-size: .74rem; letter-spacing: .04em; margin-top: 2rem; opacity: .65; }

/* Mobil: nur Formular, Markenspalte oben schmal */
@media (max-width: 820px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { padding: 2rem; text-align: center; align-items: center; }
    .auth-brand .claim { display: none; }
    .auth-brand .herz-gross { display: none; }
    .auth-brand .marke { font-size: 1.8rem; }
}
