/* Nur die Konto-Seite; Funktionalität ergänzen wir gemeinsam in JavaScript. */
.account-page { display: flex; flex-direction: column; min-height: 100vh; }
.account-main { width: min(1000px, 90%); margin: 64px auto; flex: 1; }
.account-heading h1 { margin: 18px 0; padding: 0; font-size: clamp(30px, 5vw, 42px); }
.account-heading > p { margin: 0; color: #a49aa3; line-height: 1.7; }
.account-notice { max-width: 600px; margin: 26px auto 32px; padding: 14px 20px; border: 1px solid #b414ae40; border-radius: 10px; background: #b414ae0a; color: #c0a9bb; font-size: 13px; line-height: 1.7; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px; }
.account-card { padding: clamp(22px, 4vw, 36px); min-width: 0; text-align: left; background: radial-gradient(ellipse at top left, #30132d, #191319 65%); border: 1px solid rgba(180,20,174,.3); border-radius: 20px; box-shadow: 0 16px 40px #0003; scroll-margin-top: 120px; }
.account-card h2 { margin: 12px 0 8px; color: #b414ae; font-size: 30px; }
.account-intro { margin: 0 0 28px; color: #a49aa3; line-height: 1.7; }
.account-form { display: flex; flex-direction: column; gap: 20px; }
.account-field label { display: block; margin-bottom: 8px; color: #e8d4e4; }
.account-field input { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #54404f; border-radius: 8px; background: #110f11; color: #fff; font: inherit; font-size: 16px; line-height: 1.5; transition: border-color .25s, box-shadow .25s; }
.account-field input::placeholder { color: #887982; opacity: 1; }
.account-field input:focus { outline: 2px solid #ee86e6; outline-offset: 2px; border-color: #b414ae; box-shadow: 0 0 16px #b414ae26; }
.account-field input[aria-invalid="true"] { border-color: #ff9aae; }
.account-hint, .account-error { font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.account-hint { color: #aa97a5; }.account-error { color: #ffb3c2; }
.account-error:empty, .account-status:empty { display: none; }
.account-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 4px; padding: 14px 18px; border: 1px solid #b414ae; border-radius: 8px; background: #b414ae; color: #fff; font: inherit; cursor: pointer; transition: background .25s, box-shadow .25s; }
#toggle-password {
    align-self: flex-start;
    max-width: 100%;
    min-height: 44px;
    margin-top: -8px;
    padding: 10px 16px;
    border: 1px solid rgba(180, 20, 174, .4);
    border-radius: 8px;
    background: rgba(180, 20, 174, .08);
    color: #ee86e6;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#toggle-password:hover {
    background: rgba(180, 20, 174, .18);
    border-color: #b414ae;
    box-shadow: 0 0 14px rgba(180, 20, 174, .12);
}
.account-submit:disabled { opacity: .55; cursor: not-allowed; }
.account-submit:not(:disabled):hover { background: #cd1bc6; box-shadow: 0 6px 22px #b414ae33; }
.account-status { padding: 14px; color: #edd0e7; border: 1px solid #824778; border-radius: 8px; line-height: 1.7; margin: 0; }
.account-switch { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #b414ae33; color: #a49aa3; font-size: 14px; line-height: 1.7; }
.account-switch a, .account-back { color: #ee86e6; text-decoration: none; }
.account-switch a:hover, .account-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.account-back { display: inline-block; margin-top: 32px; font-size: 14px; }
.account-main a:focus-visible, .account-main button:focus-visible { outline: 2px solid #ee86e6; outline-offset: 4px; }
@media(max-width:700px) { .account-grid { grid-template-columns: minmax(0, 1fr); } .account-main { margin-block: 40px; } }
@media(prefers-reduced-motion:reduce) { .account-main * { transition: none !important; } }