#kontosicherheit { scroll-margin-top: 100px; padding: 0; margin: 0 0 16px; }
#kontosicherheit[hidden], #kontosicherheit [hidden] { display: none !important; }
#kontosicherheit > .container { width: 100%; max-width: none; margin: 0; }
.passkey-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; background: #15130e; border: 1px solid #534124; border-radius: 10px; padding: 18px 22px; }
.passkey-intro h2 { margin: 0 0 6px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; }
.passkey-panel p { color: #b8b8b8; line-height: 1.6; max-width: 75ch; margin: 0; font-size: 14px; }
.passkey-message:empty, .passkey-credentials:empty, .passkey-recovery:empty { display: none; }
.passkey-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.passkey-controls { display: grid; gap: 12px; min-width: 0; }
.passkey-panel .btn { min-height: 44px; padding: 10px 14px; white-space: normal; text-align: center; font-size: 13px; }
.passkey-panel .is-error { color: #ffb4a8; }
.passkey-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #292929; }
.passkey-row small { display: block; color: #aaa; margin-top: 5px; font-size: 12px; }
.passkey-row strong { overflow-wrap: anywhere; }
.passkey-panel label { display: block; color: #ddd; }
.passkey-panel input, .passkey-panel textarea { display: block; width: 100%; max-width: 600px; box-sizing: border-box; color: #fff; background: #090909; border: 1px solid #66512a; border-radius: 8px; padding: 12px; font: inherit; margin: 10px 0 18px; }
.passkey-panel textarea { font-family: monospace; }
.passkey-panel :focus-visible { outline: 2px solid #f8ad23; outline-offset: 4px; }
.passkey-panel [disabled] { opacity: .6; cursor: wait; }
.passkey-note { font-size: .9rem; }
.passkey-settings { width: 100%; }
.passkey-settings > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 13px; }
.passkey-settings > summary::-webkit-details-marker { display: none; }
#kontosicherheit .passkey-connected { color: #b9dfb5; font-size: 12px; }
#kontosicherheit .passkey-manage-label { margin-left: auto; color: #f5a524; }
.passkey-settings[open] > summary { border-bottom: 1px solid #302c25; margin-bottom: 12px; }
#kontosicherheit.is-inline { margin: 0; border-bottom: 1px solid #302c25; align-self: start; }
#kontosicherheit.is-inline:has(.passkey-settings[open]) { grid-column: 1 / -1; }
body.public-layout.page-template-page-meinprofil-php .players-links-grid:has(#kontosicherheit.is-inline) .players-profile-save-row { grid-column: auto; align-self: center; }
#kontosicherheit.is-inline .passkey-panel { display: block; border: 0; border-radius: 0; background: none; padding: 0; }
#kontosicherheit.is-inline .passkey-actions { flex-direction: column; align-items: stretch; }
#kontosicherheit.is-inline .passkey-controls { gap: 14px; }
@media (max-width: 900px) {
  .passkey-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
}
@media (max-width: 600px) {
  .passkey-actions { flex-direction: column; }
  .passkey-row { align-items: flex-start; flex-direction: column; }
}
