@layer pages {
/* ==========================================================================
   Passwort vergessen (forgot_password.php)
   ========================================================================== */

/* Seite zentrieren */
main.page-centered{
  min-height: calc(100vh - var(--nav-height, 60px));
  display: grid;
  align-content: start;
  justify-items: center;
  row-gap: 14px;
  padding: clamp(24px, 6vh, 64px) 16px;
}

/* Karte */
main.page-centered .form-card{
  width: min(520px, 92vw);
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  box-shadow: var(--shadow-2, 0 10px 24px rgba(0,0,0,.08));
  padding: 18px;
}

/* Titel */
main.page-centered .form-card > h1{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 10px 0;
}

/* Formular-Layout */
main.page-centered .form-narrow{
  display: grid;
  gap: 10px;
}

/* Feld + Label + Input */
main.page-centered .form-field{ display:grid; gap:6px; }

main.page-centered .label{
  font-weight: 700;
  color: var(--text, #111827);
}

main.page-centered .input{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #111827);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
main.page-centered .input::placeholder{
  color: var(--text-muted, #6b7280);
}
main.page-centered .input:focus-visible{
  outline: none;
  border-color: var(--accent-blue, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue, #2563eb) 18%, transparent);
}

/* Aktionen (Primär links, Outline rechts) */
main.page-centered .form-actions{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

/* Buttons (Base) */
main.page-centered .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text, #111827);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, filter .15s;
}
main.page-centered .btn:hover{ background:#f8fafc; }

/* Primär – sowohl .btn-primary als auch .btn.primary unterstützen */
main.page-centered .btn.btn-primary,
main.page-centered .btn.primary{
  background: var(--accent-blue, #2563eb);
  border-color: var(--accent-blue, #2563eb);
  color: #fff;
}
main.page-centered .btn.btn-primary:hover,
main.page-centered .btn.primary:hover{
  filter: brightness(.96);
}

/* Outline */
main.page-centered .btn.btn-outline{
  border-color: var(--border, #e5e7eb);
  background: #fff;
  color: var(--text, #111827);
}
main.page-centered .btn.btn-outline:hover{
  border-color: var(--accent-blue, #2563eb);
}

/* Statusmeldung */
main.page-centered .status{
  min-height: 0;
  margin-top: 2px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}
main.page-centered .status.success{ color:#16a34a; }
main.page-centered .status.error{   color:#dc2626; }

/* Busy-State (optional, per JS gesetzt) */
main.page-centered .form-narrow.is-busy{ opacity:.9; }
main.page-centered .form-narrow.is-busy .btn,
main.page-centered .form-narrow.is-busy .input{ cursor: wait; }

/* Mobile: Buttons untereinander */
@media (max-width: 440px){
  main.page-centered .form-actions{ grid-template-columns: 1fr; }
}

main.page-centered .btn,
main.page-centered .btn.btn-primary,
main.page-centered .btn.btn-outline {
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Typografie erzwingen (gleich für <button> und <a>) */
  font: inherit;                 /* übernimmt Familie/Gewicht */
  font-size: 0.95rem;            /* wie Inputs */
  line-height: 1.1;

  /* Einheitliche Höhe/Padding */
  --btn-h: 40px;
  min-height: var(--btn-h);
  padding: 10px 14px;

  border-radius: 10px;
  text-decoration: none;
}

/* Primär / Outline – nur Farben, keine Größe! */
main.page-centered .btn.btn-primary {
  background: var(--accent-blue, #2563eb);
  border: 1px solid var(--accent-blue, #2563eb);
  color: #fff;
}
main.page-centered .btn.btn-primary:hover { filter: brightness(.96); }

main.page-centered .btn.btn-outline {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text, #111827);
}
main.page-centered .btn.btn-outline:hover { border-color: var(--accent-blue, #2563eb); }
}