/* auth.css - Anmeldung, Einladung, Passwort ändern (PLAN-KONTEN §8).
 *
 * Gilt für app/templates/auth/*.html. Alle Seiten benutzen das Muster
 * "zentrierte Einzelseite" aus kira.css (.center-page / .center-page__card,
 * DESIGN_SYSTEM §2.3); hier steht nur, was diese Seiten darüber hinaus
 * brauchen. Keine neuen Farbwerte, nur Token aus kira.css §2.
 *
 * Präfix .auth- . Bewusst ohne Anleihen bei uebersicht.css: Diese Datei gehört
 * einer anderen Seite, ihre Klassen könnten sich jederzeit ändern.
 */

/* ── Karte ──────────────────────────────────────────────────────────────── */

/* Etwas breiter als die 460 px der Vorgabe: Zwei Felder, eine Fehlermeldung
   und die Querverweise stehen sonst arg gedrängt. */
.auth-card { width: min(500px, 100%); }
.auth-card--breit { width: min(560px, 100%); }
/* Auf der Fehlerseite steht alles in der Mitte - die Wortmarke sonst als
   einziges links, was schief aussah. */
.auth-card--mitte .auth-marke { justify-content: center; }

/* ── Kopf: Logo-Kachel, Wortmarke, Bereich ──────────────────────────────── */

.auth-marke { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.auth-marke__text { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.auth-marke__name { color: var(--ink); font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.auth-marke__bereich {
  margin-top: 7px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* ── Titel und Einleitung ───────────────────────────────────────────────── */

.auth-titel {
  margin: 0 0 8px;
  font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.375rem);
}
.auth-lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }

.auth-card .notice { margin-top: 20px; }
.auth-form { margin-top: 24px; }

/* ── Angaben auf der Einladungsseite (E-Mail, Organisation, Rolle) ──────── */

.auth-daten { margin: 22px 0 0; padding: 16px 18px; border-radius: var(--r-inner); background: var(--cream-bg); border: 1px solid var(--cream-border); }
.auth-daten__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.auth-daten__zeile + .auth-daten__zeile { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cream-border); }
.auth-daten__label { flex: none; min-width: 7.5rem; color: var(--muted); font-size: 14px; font-weight: 600; }
.auth-daten__wert { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }

/* ── Passwortregel unter den Feldern ────────────────────────────────────── */

.auth-regel { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-regel > .icon { flex: none; margin-top: 2px; color: var(--lav-icon); }
.auth-regel p { margin: 0; }
.auth-regel strong { color: var(--ink); font-weight: 700; }

/* Browser-Prüfung der Wiederholung (JS in der Vorlage, setzt nur hidden). */
.auth-mismatch { color: var(--red-ink); font-size: 14px; font-weight: 600; }

/* ── Passwort anzeigen: Augen-Knopf im Feld (auth/_passwort_auge.html) ─── */

.passwort-feld { position: relative; }
/* Platz rechts, damit der Text nicht unter dem Knopf verschwindet. */
.passwort-feld > input { padding-right: 58px; }
/* Edge bringt ein eigenes Auge mit - sonst stünden zwei nebeneinander. */
.passwort-feld > input::-ms-reveal,
.passwort-feld > input::-ms-clear { display: none; }

.passwort-auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
/* display oben schlüge sonst das hidden-Attribut (Knopf ohne JavaScript). */
.passwort-auge[hidden] { display: none; }
.passwort-auge:hover { background: var(--lav-bg); color: var(--ink); }
.passwort-auge:focus-visible { outline: none; color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 174, 0, .45); }
.passwort-auge .passwort-auge__verbergen,
.passwort-auge[aria-pressed="true"] .passwort-auge__zeigen { display: none; }
.passwort-auge[aria-pressed="true"] .passwort-auge__verbergen { display: block; }

/* ── Fuß: die jeweils anderen Türen ─────────────────────────────────────── */

.auth-fuss { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.auth-fuss__titel { margin: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 700; }
.auth-tueren { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.auth-tuer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.auth-tuer:hover { border-color: var(--sec-border); background: var(--cream-bg); color: var(--ink); }
.auth-tuer > .icon { flex: none; color: var(--faint); }
.auth-tuer__pfeil { margin-left: auto; color: var(--faint); }
.auth-tuer:hover .auth-tuer__pfeil { color: var(--eyebrow); }

.auth-hinweis { margin: 18px 0 0; }

/* ── Fehlerseite der Einladung ──────────────────────────────────────────── */

.auth-fehler { text-align: center; }
.auth-fehler > .icon-tile { margin: 0 auto 18px; }
/* Kleiner als auf den Formularseiten: Die Überschrift ist hier ein ganzer Satz
   und lief sonst über drei Zeilen. */
.auth-fehler .auth-titel { margin-bottom: 10px; font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); }
.auth-fehler__text { margin: 0 auto; max-width: 42ch; color: var(--muted); font-size: 17px; line-height: 1.55; }
.auth-fehler .auth-fuss { text-align: left; }
.auth-fehler .info-box { margin-top: 24px; text-align: left; }

/* ── Mobil ──────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .auth-marke__name { font-size: 26px; }
  /* Enger gesperrt, damit "MEIN WISSENSÜBERGABE-PORTAL" nicht dreizeilig wird. */
  .auth-marke__bereich { letter-spacing: .12em; }
  .auth-daten__zeile { flex-direction: column; gap: 2px; }
  .auth-daten__label { min-width: 0; }
}