/* Passkeys (02.10.2026, modules/passkeys.js): Knopf im Anmeldedialog, Wahl
   „Mit Passkey registrieren“ nach Discord und das Fenster „Passkeys“ im
   Kontomenü. Das Fenster ist eine Erklärkarte (erklaerkarte.css, Katalog
   Designkatalog/Erklaerkarte/standard); hier nur die Liste darin. Farben nur
   aus den Variablen der App (style.css, design-tokens.css, erklaerkarte.css),
   Dark und Light. Nicht im Demo-Paket (DROP_STYLESHEETS im Export). */

/* ── Anmeldedialog ───────────────────────────────────────────────────── */
.login-passkey-knopf { width: 100%; }
.login-passkey-knopf[hidden],
.pk-trenner[hidden] { display: none; }
/* Altes Layout ohne Discord-Pflicht: Abstand wie die übrigen Blöcke. */
.login-dialog:not(.dz-dialog) .login-passkey-knopf { margin-top: var(--space-2); }
/* Ohne Discord-Pflicht (15.10.2026): steht in der Reihe der Wallet, aber in eigener Zeile darunter. */
.login-dialog:not(.dz-dialog) .login-actions { flex-wrap: wrap; }
.login-dialog:not(.dz-dialog) .login-actions > .login-passkey-knopf { flex: 1 0 100%; }
.login-passkey-hinweis { margin: 0; color: var(--auth-text-2); font-size: var(--fs-13); line-height: 1.5; text-align: center; }
.login-passkey-hinweis[hidden] { display: none; }

/* ── Fenster „Passkeys“ ──────────────────────────────────────────────── */
.pk-liste { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.pk-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--space-3);
  border: 1px solid var(--ek-rand);
  background: var(--ek-hell);
}
.pk-zeile.ist-aktuell { border-color: var(--gold-rand); }
.pk-zeile-text { display: grid; gap: 2px; min-width: 0; }
.pk-name-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.pk-name { font-size: var(--fs-15); font-weight: var(--fw-semibold, 600); color: var(--auth-text-1); overflow-wrap: anywhere; }
.pk-info { font-size: var(--fs-13); color: var(--ek-text-3); overflow-wrap: anywhere; }
.pk-aktionen { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.pk-frage { font-size: var(--fs-13); color: var(--ek-text-2); }

/* Kleine Knöpfe der Liste (Katalog Buttons, Größe klein): Zweitknopf der
   Erklärkarte, Löschen in Rot nur als Schrift (Rot = Gefahr). */
.pk-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ek-rand);
  border-radius: var(--space-2);
  background: var(--ek-knopf-2);
  color: var(--auth-text-1);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium, 500);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pk-knopf:hover:not(:disabled) { background: var(--ek-knopf-2-hover); }
.pk-knopf:disabled { opacity: .5; cursor: not-allowed; }
.pk-knopf-gefahr { color: var(--c-red); }
.pk-knopf-gefahr.ist-bestaetigen { border-color: color-mix(in srgb, var(--c-red) 45%, transparent); background: color-mix(in srgb, var(--c-red) 12%, transparent); }
.pk-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pk-feld {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--space-2);
  border: 1px solid var(--auth-border-2);
  background: var(--auth-surface-1);
  color: var(--auth-text-1);
  font: inherit;
  font-size: var(--fs-14);
}
.pk-feld:focus { outline: none; border-color: var(--gold-rand); box-shadow: 0 0 0 3px var(--gold-hauch); }

.pk-leer { margin: 0; padding: var(--space-4); border-radius: var(--space-3); border: 1px dashed var(--ek-rand); color: var(--ek-text-2); font-size: var(--fs-14); text-align: center; }
.pk-skelett { height: 64px; border-radius: var(--space-3); }
.pk-liste.ist-nachladen { opacity: .6; transition: opacity .15s; }

/* .ek-tipp setzt display: grid – ohne das bliebe der Hinweis trotz hidden stehen. */
#passkeysOhneBrowser[hidden],
#passkeysNurMitAnmeldung[hidden] { display: none; }

.pk-meldung { min-height: 1.3em; margin: var(--space-3) 0 0; font-size: var(--fs-14); color: var(--ek-text-2); }
.pk-meldung.ist-fehler { color: var(--c-red); }
.pk-meldung:empty { min-height: 0; margin: 0; }

@media (max-width: 560px) {
  .pk-zeile { grid-template-columns: minmax(0, 1fr); }
  .pk-aktionen { justify-content: flex-start; }
  #passkeysDialog .ek-fuss .ek-k { flex: 1 1 auto; }
}

/* Passkey aufs weitere Gerät (07.10.2026): QR vom eigenen Server; sein SVG bringt den hellen Grund selbst mit. */
.pk-uebertragung { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.pk-uebertragung[hidden] { display: none; }
.pk-qr img { display: block; width: 220px; height: 220px; border-radius: var(--space-3); }
.pk-uebertragung .pk-info { text-align: center; }
.pk-anfrage { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.pk-pruefzahl { margin: 0; font-size: var(--fs-32); font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ek-gold-schrift); }