/* ============================================================
   iMild.com — Login / Anmeldung
   Baut auf style.css auf (eckig · Glas · Blau-Gradient).
   Nur login-spezifische Bausteine; keine Tokens dupliziert.
   ============================================================ */

/* Ruhiger Verlauf-Hintergrund statt Skyline-Szene */
.login-scene {
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(82,53,229,.34), transparent 60%),
    radial-gradient(900px 620px at 12% 108%, rgba(26,184,251,.24), transparent 58%),
    linear-gradient(180deg, #0b1026 0%, #10193a 55%, #0b1026 100%);
}

.login-header { position:fixed; inset-block-start:0; inset-inline:0; }

/* Zentrierte Karte, sicherer Bereich für Notch/Home-Indicator (PWA/iOS) */
.login-main {
  position:relative; z-index:5; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; max-width:none;
  padding:
    calc(84px + env(safe-area-inset-top)) clamp(16px,5vw,24px)
    calc(28px + env(safe-area-inset-bottom));
}

.auth-card {
  width:100%; max-width:420px;
  padding:clamp(24px,5vw,34px) clamp(20px,5vw,32px);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}

/* ---------- Marke oben ---------- */
.auth-brand { text-align:center; margin-block-end:22px; }
.auth-logo { width:46px; height:46px; display:inline-block; }
.auth-title { font-size:clamp(20px,4.4vw,24px); font-weight:800; letter-spacing:-.6px; margin-block-start:10px; }
.auth-sub { font-size:13px; color:var(--ink-mute); line-height:1.55; margin-block-start:6px; }

/* ---------- Tabs ---------- */
.auth-tabs {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid rgba(255,255,255,.18); margin-block-end:20px;
}
.auth-tab {
  padding:11px 10px; background:transparent; color:var(--ink-mute);
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.3px;
  cursor:pointer; border:none; transition:background .15s, color .15s;
}
.auth-tab + .auth-tab { border-inline-start:1px solid rgba(255,255,255,.18); }
.auth-tab:hover { color:#fff; background:rgba(255,255,255,.05); }
.auth-tab.is-active { color:#fff; background:var(--imild-grad); }

/* ---------- Formular ---------- */
.auth-form { display:block; }
.label-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }

.pw-wrap { position:relative; }
.pw-wrap input { padding-inline-end:46px; }
.pw-toggle {
  position:absolute; inset-block:0; inset-inline-end:0; width:44px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--ink-mute); cursor:pointer;
}
.pw-toggle:hover { color:#fff; }
.pw-toggle svg { width:20px; height:20px; }

.field-hint { font-size:11px; color:var(--ink-mute); margin-block-start:6px; line-height:1.5; }

.link-mini {
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:600; color:#6db5ff; text-decoration:none;
}
.link-mini:hover { color:#9ecaff; text-decoration:underline; }

.auth-msg {
  font-size:12.5px; line-height:1.5; padding:10px 12px; margin-block-end:14px;
  border:1px solid transparent;
}
.auth-msg.is-error { color:#ffd7d7; background:rgba(220,60,60,.14); border-color:rgba(220,60,60,.5); }
.auth-msg.is-ok    { color:#d3f5df; background:rgba(38,180,110,.14); border-color:rgba(38,180,110,.5); }

/* Primär-CTA (nutzt .btn aus style.css) */
.auth-submit {
  width:100%; margin-block-start:4px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.auth-submit[disabled] { opacity:.7; cursor:not-allowed; filter:none; }
.spinner {
  width:16px; height:16px; display:none; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35); border-block-start-color:#fff;
  border-radius:50% !important; animation:auth-spin .7s linear infinite;
}
.is-busy .btn-label { opacity:.85; }
.is-busy .spinner { display:inline-block; }
@keyframes auth-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; } }

.auth-switch { text-align:center; font-size:13px; color:var(--ink-soft); margin-block-start:16px; }

/* ---------- Trenner ---------- */
.auth-divider {
  display:flex; align-items:center; gap:12px;
  margin:22px 0 16px; color:var(--ink-mute); font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase;
}
.auth-divider::before, .auth-divider::after {
  content:""; flex:1; height:1px; background:rgba(255,255,255,.16);
}

/* ---------- Provider-Buttons ---------- */
.provider-list { display:flex; flex-direction:column; gap:10px; }
/* [hidden] muss die display-Regel der Klasse schlagen (Spezifität) */
.provider-list[hidden] { display:none; }
.provider {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  color:#fff; text-align:start; transition:background .15s, border-color .15s, transform .1s;
}
.provider:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.4); }
.provider:active { transform:translateY(1px); }
.provider:focus-visible { outline:2px solid var(--imild-cyan); outline-offset:2px; }
.provider-ic { width:22px; height:22px; flex:0 0 auto; }
.provider-ic.ic-mono { color:#fff; }
.provider-label { flex:1; font-size:13.5px; font-weight:600; letter-spacing:.2px; }

/* „Bald"-Provider: sichtbar, aber erkennbar inaktiv */
.provider[data-status="soon"] { cursor:default; }
.provider[data-status="soon"] .provider-ic { opacity:.5; }
.provider[data-status="soon"] .provider-label { color:var(--ink-mute); }
.provider[data-status="soon"]:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }

.soon-badge {
  flex:0 0 auto; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; color:#cfe4ff;
  background:rgba(27,92,245,.22); border:1px solid rgba(27,92,245,.5);
}

/* ---------- Weitere Optionen (Toggle) ---------- */
.more-toggle {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-block-start:12px; padding:10px; cursor:pointer; font-family:inherit;
  background:transparent; border:1px dashed rgba(255,255,255,.22);
  color:var(--ink-soft); font-size:12.5px; font-weight:600; letter-spacing:.3px;
}
.more-toggle:hover { color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); }
.more-toggle .chev { width:16px; height:16px; transition:transform .2s; }
.more-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }
.more-panel { margin-block-start:12px; }

/* ---------- Rechtstext / Zurück ---------- */
.auth-legal {
  font-size:11px; color:var(--ink-mute); line-height:1.6; text-align:center; margin-block-start:20px;
}
.auth-legal a { color:#6db5ff; text-decoration:none; }
.auth-legal a:hover { text-decoration:underline; }

.back-home { margin-block-start:22px; font-size:12.5px; color:var(--ink-mute); text-decoration:none; }
.back-home:hover { color:#fff; }

/* ---------- Toast ---------- */
.toast {
  position:fixed; inset-block-end:calc(20px + env(safe-area-inset-bottom));
  inset-inline:0; margin-inline:auto; width:max-content; max-width:calc(100% - 32px); z-index:80;
  padding:12px 18px; font-size:13px; font-weight:600; color:#fff; text-align:center;
  background:rgba(11,19,36,.96); border:1px solid rgba(27,92,245,.6);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.toast.is-show { animation:toast-in .25s ease-out; }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .toast.is-show { animation:none; } }

/* ---------- Sichtbarkeits-Umschaltung Login/Registrieren ---------- */
.auth-card[data-mode="login"]    .only-register { display:none !important; }
.auth-card[data-mode="register"] .only-login    { display:none !important; }

/* ---------- Sichtbarer Tastaturfokus (WCAG 2.2 AA) ---------- */
.auth-tab:focus-visible,
.auth-submit:focus-visible,
.link-mini:focus-visible,
.pw-toggle:focus-visible,
.more-toggle:focus-visible,
.back-home:focus-visible,
.auth-legal a:focus-visible,
.langsel:focus-visible {
  outline:2px solid var(--imild-cyan); outline-offset:2px;
}
.field input:focus-visible { outline:2px solid var(--imild-cyan); outline-offset:1px; }

/* ---------- Klein / Mobil ---------- */
@media (max-width: 440px) {
  .auth-card { padding:22px 18px; box-shadow:none; }
  .login-main { padding-block-start:calc(76px + env(safe-area-inset-top)); }
}