/* ==========================================================================
   Auth-/Account-Bereich (Login, Registrieren, Passwort, Aktivierung)
   Baut auf den Design-Tokens der oeffentlichen /assets/css/style.css auf
   (--accent, --primary, --bg-dark, --font-sans, .btn, form input) und
   ergaenzt nur das zentrierte Karten-Layout. Die oeffentliche style.css
   MUSS vor dieser Datei eingebunden werden.
   ========================================================================== */

/* Seite: Karte vertikal + horizontal zentriert auf dem Hintergrundbild
   (.bg_img liefert das Bild aus der oeffentlichen style.css). */
body.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
}

/* Karte – Klassennamen .login/.register bleiben, damit das bestehende
   JavaScript (".login form" / ".register form") unveraendert funktioniert. */
.auth-page .login,
.auth-page .register {
  width: 100%;
  max-width: 420px;
  /* auto oben/unten zentriert die Karte vertikal und schiebt die Fusszeile
     ans Seitenende. Reicht die Hoehe nicht, kollabieren die auto-Raender auf 0
     und der Inhalt bleibt vollstaendig scrollbar (statt oben abgeschnitten). */
  margin: auto 0;
  padding: 2.25rem 2rem;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Logo oben */
.auth-page .auth-home {
  display: block;
  text-align: center;
}

.auth-page .auth-logo {
  display: block;
  height: 64px;
  margin: 0 auto 1rem;
}

/* Ueberschrift + Einleitungstext */
.auth-page h1 {
  text-align: center;
  font-size: 1.75rem;
  margin: 0 0 0.35rem;
  color: var(--primary);
}

.auth-page .auth-intro {
  text-align: center;
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: #4a4f56;
}

/* Formular */
.auth-page form {
  display: flex;
  flex-direction: column;
}

.auth-page .field-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 0.6rem;
}

/* Felder erben Breite/Radius/Fokus aus der oeffentlichen "form input";
   hier nur die Abstaende. */
.auth-page form input[type="text"],
.auth-page form input[type="email"],
.auth-page form input[type="password"] {
  margin-top: 0.25rem;
  margin-bottom: 0.4rem;
}

/* Checkbox-Zeilen (Passwort anzeigen / Angemeldet bleiben) */
.auth-page .auth-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--primary);
  cursor: pointer;
}

.auth-page .auth-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Datenschutz-Checkbox der Registrierung: mehrzeiliger Text sauber ausgerichtet */
.auth-page .auth-check.auth-consent {
  align-items: flex-start;
  margin-top: 0.9rem;
}

.auth-page .auth-check.auth-consent input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.auth-page .auth-check.auth-consent a {
  color: var(--accent);
}

/* Primaerbutton – volle Breite im oeffentlichen .btn-Look.
   Gilt sowohl fuer <input type="submit"> als auch fuer <a class="btn">. */
.auth-page form input[type="submit"],
.auth-page .login .btn,
.auth-page .register .btn {
  width: 100%;
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--bg-dark);
  color: var(--text-light);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.auth-page form input[type="submit"]:hover,
.auth-page form input[type="submit"]:focus,
.auth-page .login .btn:hover,
.auth-page .login .btn:focus,
.auth-page .register .btn:hover,
.auth-page .register .btn:focus {
  background-color: #333;
  outline: 3px solid var(--accent);
}

/* Statusmeldungen ---------------------------------------------------------
   Neutrale, leere .msg bleibt unsichtbar. Sobald eine Meldung mit Typ
   gesetzt wird (.is-success / .is-error) bzw. bei .error, erscheint eine
   farbige Box mit Icon: gruen = Erfolg, rot = Fehler. */
.auth-page .msg {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #953501;
}

.auth-page .msg:empty {
  display: none;
}

.auth-page .msg.is-success,
.auth-page .msg.is-error,
.auth-page .error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  text-align: left;
  line-height: 1.4;
}

.auth-page .msg.is-success::before,
.auth-page .msg.is-error::before,
.auth-page .error::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Erfolg – gruen */
.auth-page .msg.is-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.auth-page .msg.is-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f5132'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}

/* Fehler – rot (.error immer Fehler) */
.auth-page .msg.is-error,
.auth-page .error {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.auth-page .msg.is-error::before,
.auth-page .error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23842029'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

/* Link-Zeile unten */
.auth-page .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e6e8eb;
}

.auth-page .links a {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.auth-page .links a:hover,
.auth-page .links a:focus {
  text-decoration: underline;
}

/* Rechtliche Links unter der Karte (liegen auf dem Hintergrundbild, daher
   heller Text auf leicht abgedunkeltem Chip fuer gute Lesbarkeit). */
.auth-page .auth-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  margin: 1rem 0 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.85rem;
}

.auth-page .auth-legal a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.auth-page .auth-legal a:hover,
.auth-page .auth-legal a:focus {
  text-decoration: underline;
}

.auth-page .auth-legal span {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 480px) {
  body.auth-page {
    padding: 1rem 0.85rem;
  }
  .auth-page .login,
  .auth-page .register {
    padding: 1.5rem 1.25rem;
  }
  .auth-page .auth-logo {
    height: 52px;
    margin-bottom: 0.75rem;
  }
  .auth-page h1 {
    font-size: 1.5rem;
  }
  .auth-page .auth-intro {
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   Snackbar (wird vom Login-/Registrier-JavaScript per Klasse "show" aktiviert)
   ========================================================================== */
#snackbar {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 300px;
  max-width: calc(100% - 2rem);
  background-color: var(--accent);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.85rem 1.1rem;
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

#snackbar a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

/* Icon links im Snackbar – nur bei gesetztem Erfolg/Fehler-Typ sichtbar */
#snackbar::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

#snackbar.is-success {
  background-color: #198754;
}
#snackbar.is-error {
  background-color: #dc3545;
}

#snackbar.is-success::before,
#snackbar.is-error::before {
  display: block;
}
#snackbar.is-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}
#snackbar.is-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: auth-fadein 0.4s, auth-fadeout 0.4s 4.5s;
  animation: auth-fadein 0.4s, auth-fadeout 0.4s 4.5s;
}

@-webkit-keyframes auth-fadein {
  from { bottom: 0; opacity: 0; }
  to   { bottom: 30px; opacity: 1; }
}
@keyframes auth-fadein {
  from { bottom: 0; opacity: 0; }
  to   { bottom: 30px; opacity: 1; }
}
@-webkit-keyframes auth-fadeout {
  from { bottom: 30px; opacity: 1; }
  to   { bottom: 0; opacity: 0; }
}
@keyframes auth-fadeout {
  from { bottom: 30px; opacity: 1; }
  to   { bottom: 0; opacity: 0; }
}