/* Teal-Angleichung für Login & Registrierung – überschreibt die blaue styles.css.
   Durch das Umdefinieren der Primärfarben werden Buttons, Fokus, Links und Akzente
   automatisch teal; zusätzlich ein Marken-Logo und eine modernere Karte. */
:root{
    --color-primary:#0f9d8f;
    --color-primary-dark:#0c8377;
    --color-primary-light:#16b3a3;
}

body.auth-page{ background:#eef3f1; }

.auth-page .container{
    max-width:420px;
    border-top:none;
    border:1px solid #e7edf0;
    border-radius:20px;
    box-shadow:0 24px 60px -28px rgba(15,157,143,.40);
    padding:30px 28px 26px;
}

/* Marken-Logo + Titel */
.auth-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.auth-brand .logo{ width:62px; height:62px; border-radius:17px; overflow:hidden; box-shadow:0 12px 26px -12px rgba(15,157,143,.6); }
.auth-brand .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.auth-page h1{ color:#22303a; text-align:center; margin:14px 0 4px; font-size:1.45rem; }
.auth-sub{ text-align:center; color:#7c8a96; font-size:.9rem; margin:0 0 24px; }

/* Buttons als ruhiges, gefülltes Teal (statt blauem Verlauf) */
.auth-page .button,
.auth-page .button.primary{ background:#0f9d8f; }
.auth-page .button:hover,
.auth-page .button.primary:hover{ background:#0c8377; }

/* Eingabe-Fokus teal */
.auth-page .form-group input:focus,
.auth-page .form-group select:focus,
.auth-page .form-group textarea:focus{
    border-color:#0f9d8f;
    box-shadow:0 0 0 3px rgba(15,157,143,.14);
}

/* Links teal */
.auth-page .register-link,
.auth-page .login-link{ color:#0f9d8f; }
.auth-page .register-link:hover,
.auth-page .login-link:hover{ color:#0c8377; }