/* ===== Buttons: ein Style, zwei APIs (.btn--* und .primary/.secondary) ===== */
button.btn,
a.btn,
.btn,
button.primary,
a.primary,
.primary,
button.secondary,
a.secondary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  border-radius: 30px;
  padding: 0.8rem 1.5rem;
  border: 2px solid #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .06s ease;
}

/* Primary (weiß) – Aliase: .btn--primary und .primary */
button.btn--primary,
a.btn--primary,
.btn--primary,
button.primary,
a.primary,
.primary {
  background: #fff;
  color: #2e318d;
  border-color: #fff;
}
button.btn--primary:hover,
a.btn--primary:hover,
.btn--primary:hover,
button.primary:hover,
a.primary:hover,
.primary:hover,
button.btn--primary:focus-visible,
a.btn--primary:focus-visible,
.btn--primary:focus-visible,
button.primary:focus-visible,
a.primary:focus-visible,
.primary:focus-visible {
  background: #2e318d;
  color: #fff;
}

/* Solid (Brand) – Aliase: .btn--solid */
button.btn--solid,
a.btn--solid,
.btn--solid {
  background: #2e318d;
  color: #fff;
  border-color: #fff;
}
button.btn--solid:hover,
a.btn--solid:hover,
.btn--solid:hover { background: #1c2073; }

/* Secondary (transparent) – Aliase: .btn--secondary und .secondary */
button.btn--secondary,
a.btn--secondary,
.btn--secondary,
button.secondary,
a.secondary,
.secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
button.btn--secondary:hover,
a.btn--secondary:hover,
.btn--secondary:hover,
button.secondary:hover,
a.secondary:hover,
.secondary:hover,
button.btn--secondary:focus-visible,
a.btn--secondary:focus-visible,
.btn--secondary:focus-visible,
button.secondary:focus-visible,
a.secondary:focus-visible,
.secondary:focus-visible {
  background: #fff;
  color: #2e318d;
}

/* Icon-Button (Papierkorb etc.) */
.icon-btn { background: transparent; border: none; color: #d63636; font-size: 1.2rem; cursor: pointer; padding: .25rem .5rem; }
.icon-btn:hover { color: #ff4d4d; }

/* Button-Zeilen */
.btn-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.btn-row .btn, .btn-row .primary, .btn-row .secondary { width: auto; min-width: 9rem; }

/* Auth-Formular-Buttons: Abstand unterhalb der Felder */
.form .btn-row { margin-top: 1.25rem; margin-bottom: .75rem; }

/* Startseiten-Buttons */
.buttons { margin-top: 1.25rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===================== AUTH PAGES (Login & Register) ===================== */

/* Form-Layout: sauber untereinander */
body.auth .overlay form {
  display: block !important;
  text-align: left;
}

body.auth .overlay form label {
  display: block !important;
  margin-top: 1rem;
  color: #fff;
  font-size: .95rem;
}

body.auth .overlay form input {
  display: block !important;
  width: 100% !important;
  margin-top: .5rem;
  border: none;
  border-radius: 30px;
  background: rgba(255,255,255,.85);
  padding: .75rem 1rem;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

/* Button-Zeile: nebeneinander, zentriert, Luft nach oben */
body.auth .overlay .btn-row.actions {
  display: flex !important;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  margin-bottom: .5rem;
}

/* Auth-Buttons: schöne Mindestbreite */
body.auth .overlay .btn-row.actions .btn {
  min-width: 10rem;
}

/* optional: Overlayweite für Auth etwas schlanker lassen */
body.auth .overlay {
  max-width: 420px;
}

/* ===================== AUTH OVERRIDES (place at very end) ===================== */

/* Kill any row/flex layout on auth forms */
body.auth .form {
  display: block !important;
}

/* Inputs stacked, full width */
body.auth .form > label {
  display: block !important;
  margin-top: 1rem !important;
  color: #fff !important;
  font-size: .95rem !important;
}

body.auth .form > input {
  display: block !important;
  width: 100% !important;
  margin-top: .5rem !important;
  border: none !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.85) !important;
  padding: .75rem 1rem !important;
  font-size: 1rem !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Buttons row: side-by-side and centered */
body.auth .overlay .btn-row.actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 1.25rem !important;
  margin-bottom: .5rem !important;
}

/* Nice button widths */
body.auth .overlay .btn-row.actions .btn,
body.auth .overlay .btn-row.actions .primary,
body.auth .overlay .btn-row.actions .secondary {
  min-width: 10rem !important;
  width: auto !important;
}

/* Narrow overlay on auth pages to match look & feel */
body.auth .overlay { max-width: 420px !important; }