/* =====================================================
   AniGa – forms.css
   Auth-Ansicht, Formularfelder, Buttons
   Teil von style.css — Reihenfolge der <link>-Tags in index.html
   entspricht der Kaskade und darf nicht vertauscht werden.
   ===================================================== */
/* ===== AUTH ===== */
.auth-wrap
{
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: var(--bg);
}
.auth-box
{
  width: 100%; max-width: 420px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  box-shadow: var(--shadow);
}
.auth-logo
{
  text-align: center; margin-bottom: 28px;
}
.auth-logo .logo-icon
{
  width: 56px; height: 56px; font-size: 1.6rem; margin: 0 auto 10px;
}
.auth-logo h1
{
  font-size: 1.8rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-logo p
{
  color: var(--text2); font-size: .88rem; margin-top: 4px;
}
.auth-tabs
{
  display: flex; background: var(--bg3); border-radius: var(--r-sm); padding: 4px; margin-bottom: 22px;
}
.auth-tab
{
  flex: 1; padding: 9px; text-align: center;
  cursor: pointer; border-radius: 6px;
  font-size: .88rem; font-weight: 500;
  color: var(--text2); transition: all .2s;
  border: none; background: none;
}
.auth-tab.active
{
  background: var(--accent); color: #fff;
}

/* ===== FORMS ===== */
.form-group
{
  margin-bottom: 14px;
}
.form-label
{
  display: block; font-size: .83rem; font-weight: 500; color: var(--text2); margin-bottom: 5px;
}
.form-input
{
  width: 100%;
  min-width: 0;        /* iOS: Input darf schrumpfen */
  max-width: 100%;     /* iOS: Input überschreitet nie den Container */
  box-sizing: border-box;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  color: var(--text); font-size: .93rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-input:focus
{
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder
{
  color: var(--text3);
}
textarea.form-input
{
  resize: vertical; min-height: 80px;
}
select.form-input
{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239fa8da' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}
.form-error
{
  color: var(--error); font-size: .8rem; margin-top: 4px; display: none;
}
.form-error.show
{
  display: block;
}

/* ===== BUTTONS ===== */
.btn
{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600;
  cursor: pointer; border: none; transition: all .2s; white-space: nowrap;
}
.btn svg
{
  width: 16px; height: 16px; flex-shrink: 0;
}
.btn-primary
{
  background: var(--accent); color: #fff;
}
.btn-primary:hover
{
  background: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,77,255,.4);
}
.btn-secondary
{
  background: var(--bg3); color: var(--text); border: 1px solid var(--border);
}
.btn-secondary:hover
{
  background: var(--bg-hover);
}
.btn-danger
{
  background: var(--error); color: #fff;
}
.btn-danger:hover
{
  background: #d32f2f;
}
.btn-ghost
{
  background: transparent; color: var(--text2);
}
.btn-ghost:hover
{
  background: var(--bg-hover); color: var(--text);
}
.btn-icon
{
  padding: 8px; border-radius: var(--r-sm);
  background: var(--bg3); color: var(--text2);
  border: 1px solid var(--border);
}
.btn-icon:hover
{
  background: var(--bg-hover); color: var(--text);
}
.btn-icon svg
{
  width: 16px; height: 16px;
}
.btn-sm
{
  padding: 6px 13px; font-size: .8rem;
}
.btn-lg
{
  padding: 13px 26px; font-size: 1rem;
}
.btn-full
{
  width: 100%;
}
.btn:disabled
{
  opacity: .55; cursor: not-allowed; transform: none !important;
}