/* Anmelden & Registrieren – im Stil der Startseite: eine Achse, ruhig, premium. */
body.account-page{background:#0a0a08;background-image:none}
body.account-page:before{content:"";position:fixed;top:-160px;left:50%;width:min(760px,130vw);height:560px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,210,63,.11),rgba(255,210,63,.03) 55%,transparent);pointer-events:none;z-index:0}
.account-page .account-main{position:relative;z-index:1}
.account-page .account-heading{flex-direction:column;gap:14px;margin:34px auto 26px}
.account-page .account-heading img{width:30px;height:auto;padding:20px;box-sizing:content-box;border-radius:22px;
  background:linear-gradient(180deg,#1a1a15,#121210);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px -18px rgba(255,210,63,.35),inset 0 1px 0 rgba(255,255,255,.06);
  animation:auth-float 6s ease-in-out infinite}
.account-page .account-heading .eyebrow{padding:7px 13px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.025);
  color:#b8b5ab;font-size:10px;font-weight:800;letter-spacing:.14em}

/* Ohne Karte – wie die Startseite, nur Inhalt auf einer Achse */
.account-page #auth,.account-page #link-panel{max-width:440px;animation:auth-rise .7s cubic-bezier(.2,.8,.2,1) both}
.account-page #auth h2,.account-page #link-panel h2{margin:26px 0 8px;font-size:clamp(28px,5vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1.05;text-align:center}
.account-page #auth .auth-description{text-align:center;font-size:14px;color:#8f8c83;margin-bottom:26px}
.account-page #auth .auth-step-label{text-align:center;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6f6d65}

/* Umschalter */
.account-page #auth .account-switch{position:relative;margin:0;padding:4px;border-radius:13px;background:#0a0a08;border:1px solid rgba(255,255,255,.06)}
.account-page #auth .account-switch button{min-height:40px;border-radius:9px;color:#a8a596;font-size:12.5px;font-weight:750;transition:background .22s,color .22s,box-shadow .22s}
.account-page #auth .account-switch button[aria-pressed=true]{background:#f5f3ec;color:#11110f;box-shadow:none}
.account-page #auth .account-switch button:not([aria-pressed=true]):hover{color:#f5f3ec}

/* Schritte beim Registrieren */
.account-page #auth .registration-steps{justify-content:center;gap:8px;margin:18px 0 22px}
.account-page #auth .registration-steps li{gap:7px;padding:6px 11px 6px 6px;border-radius:9px;background:#171714;font-size:0;color:transparent}
.account-page #auth .registration-steps li{font-size:10px;color:#8f8c83;font-weight:800}
.account-page #auth .registration-steps li span{font-size:11px;font-weight:700}
.account-page #auth .registration-steps li.current{background:rgba(255,210,63,.12);color:#ffd23f}

/* Felder */
.account-page #auth-form>label,.account-page #auth-form label,.account-page .password-label label,.account-page #link-form label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8f8c83}
.account-page .account-panel input:not([type=checkbox]){border-radius:12px;background:#0a0a08;border:1px solid rgba(255,255,255,.08);transition:border-color .18s,box-shadow .18s}
.account-page .account-panel input:not([type=checkbox]):focus{outline:none;border-color:rgba(255,210,63,.6);box-shadow:0 0 0 4px rgba(255,210,63,.1)}
.account-page .auth-email-locked{border-radius:12px}

/* Hauptbutton – flach, klar, nur leicht gerundet (Anmelden & angemeldeter Bereich) */
.account-page .primary,.account-page button.primary{min-height:50px;border:0;border-radius:12px!important;font-size:14px;font-weight:700;letter-spacing:-.005em;
  background:#ffd23f!important;color:#11110f!important;box-shadow:none!important;transition:background .16s,transform .16s}
.account-page .primary:hover{background:#ffdc5e!important}
.account-page .primary:active{transform:scale(.99)}
.account-page .primary:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Bestätigungs-Mail */
.account-page .mail-next .mail-mark{display:grid;place-items:center;width:64px;height:64px;margin:4px auto 16px;border-radius:22px;background:rgba(255,210,63,.1)}
.account-page .mail-next .mail-mark svg{width:28px;height:28px;fill:none;stroke:#ffd23f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.account-page .mail-next h3{font-size:26px;font-weight:800;letter-spacing:-.04em}

/* Team-Zugang */
.account-page #auth .guard-entry{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.account-page #auth .guard-divider{display:block;text-align:center;font-size:9px;font-weight:800;letter-spacing:.16em;color:#6f6d65}
.account-page #auth .guard-button{border-radius:12px;padding:10px 16px 10px 10px;background:transparent;border-color:rgba(255,255,255,.08);transition:border-color .18s,background .18s}
.account-page #auth .guard-button:hover{border-color:rgba(255,210,63,.35);background:rgba(255,210,63,.05)}
.account-page #auth .guard-button svg{width:34px;height:34px;padding:7px;box-sizing:border-box;border-radius:8px;background:rgba(255,210,63,.1)}
.account-page .account-footnote{color:#6f6d65}

@keyframes auth-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes auth-float{50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.account-page #auth,.account-page #link-panel,.account-page .account-heading img{animation:none}}
@media(max-width:560px){.account-page .account-heading{margin-top:22px}}

/* Angemeldeter Bereich: gelbe Buttons ebenfalls flach und leicht gerundet */
.account-page .hub-primary,.account-page .account-create{border-radius:11px!important;font-weight:700;box-shadow:none;transition:background .16s}
.account-page .hub-primary:hover,.account-page .account-create:hover{background:#ffdc5e}
.account-page .hub-nav button{border-radius:10px}

/* Registrieren: Benutzername und E-Mail enger beieinander */
.account-page #register-username-field{margin-bottom:12px}
.account-page #auth #register-username{margin-bottom:6px!important}
.account-page #register-username-status{min-height:17px;font-size:11px;line-height:1.5}

/* Ruhige Live-Prüfung des Benutzernamens, ohne Layoutsprünge. */
.account-page #register-username-status{display:flex;align-items:center;gap:7px;min-height:34px;margin-top:0;margin-bottom:0;color:#8e8b82;transition:color .18s}
.account-page #register-username-status::before{content:"";flex:0 0 12px;width:12px;height:12px;box-sizing:border-box}
.account-page #register-username-status[data-state="loading"]::before{border:1.5px solid rgba(255,210,63,.2);border-top-color:#ffd23f;border-radius:50%;animation:username-check-spin .8s linear infinite}
.account-page #register-username-status[data-state="success"]{color:#6ed59a}
.account-page #register-username-status[data-state="success"]::before{content:"✓";font-size:13px;font-weight:800;animation:username-check-in .2s ease-out}
.account-page #register-username-status[data-state="error"]{color:#ff8585}
.account-page #register-username-status[data-state="error"]::before{content:"×";font-size:16px;font-weight:700}
.account-page #register-username-field #register-username{transition:border-color .2s,box-shadow .2s}
.account-page #register-username-field[data-state="loading"] #register-username{border-color:rgba(255,210,63,.4)}
.account-page #register-username-field[data-state="success"] #register-username{border-color:rgba(110,213,154,.5)}
.account-page #register-username-field[data-state="error"] #register-username{border-color:rgba(255,133,133,.5)}
@keyframes username-check-spin{to{transform:rotate(360deg)}}
@keyframes username-check-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.account-page #register-username-status::before{animation:none!important}.account-page #register-username-status,.account-page #register-username-field #register-username{transition:none}}

/* Benutzername: Live-Ergebnis als Badge direkt im Feld, Hinweis darunter. */
.account-page #register-username-field{position:relative}
.account-page #register-username-field>label{display:block;line-height:16px;margin:0}
.account-page #auth #register-username{height:52px;margin:8px 0 6px!important;padding-right:118px!important}
.account-page #register-username-field::after{position:absolute;right:10px;top:50px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:8px;font-size:11.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;pointer-events:none;content:none}
.account-page #register-username-field[data-state="pending"]::after{content:"• • •";color:#6f6d65;background:#ffffff08;letter-spacing:.2em;animation:uname-pulse 1.1s ease-in-out infinite}
.account-page #register-username-field[data-state="loading"]::after{content:"Prüfe …";color:#ffd23f;background:rgba(255,210,63,.1);animation:uname-in-a .18s ease-out,uname-pulse 1.1s ease-in-out .18s infinite}
.account-page #register-username-field[data-state="success"]::after{content:"✓  Verfügbar";color:#11110f;background:#6ed59a;animation:uname-in-b .32s cubic-bezier(.3,1.6,.5,1)}
.account-page #register-username-field[data-state="error"]::after{content:"✕";font-size:13px;color:#ff8585;background:rgba(255,133,133,.12);animation:uname-shake .34s ease}
.account-page #register-username-field[data-state="unavailable"]::after{content:"Offline";color:#8f8c83;background:#ffffff08}
.account-page #register-username-field[data-state="success"] #register-username{border-color:rgba(110,213,154,.55)!important;box-shadow:0 0 0 4px rgba(110,213,154,.10)}
.account-page #register-username-field[data-state="error"] #register-username{border-color:rgba(255,133,133,.55)!important;box-shadow:0 0 0 4px rgba(255,133,133,.08)}
/* Hinweistext darunter: ruhig, eine Zeile, mit weichem Wechsel */
.account-page #register-username-status{min-height:18px!important;font-size:11px!important;gap:0!important}
.account-page #register-username-status::before{content:none!important;display:none!important}
.account-page #register-username-status[data-state="success"]{animation:uname-text-a .25s ease-out}
.account-page #register-username-status[data-state="error"]{animation:uname-text-b .25s ease-out}
@keyframes uname-in-a{from{opacity:0;transform:translateY(-50%) scale(.85)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes uname-in-b{from{opacity:0;transform:translateY(-50%) scale(.6)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes uname-shake{0%,100%{transform:translateY(-50%)}25%{transform:translate(-4px,-50%)}50%{transform:translate(4px,-50%)}75%{transform:translate(-2px,-50%)}}
@keyframes uname-pulse{50%{opacity:.55}}
@keyframes uname-text-a{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes uname-text-b{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.account-page #register-username-field::after,.account-page #register-username-status{animation:none!important}}
/* Allgemeine [data-state]-Flächen hier nicht anwenden */
.account-page #register-username-field[data-state],.account-page #register-username-status[data-state]{background:none!important;padding:0!important;border-radius:0!important}
.account-page #register-username-field[data-state]::before{content:none!important;display:none!important}

/* Anmelde-Popup der Startseite (konto.html?popup=1 im iframe) */
html.popup-mode,html.popup-mode body{background:#0f0f0d!important;min-height:0!important}
html.popup-mode body:before,html.popup-mode .unified-header,html.popup-mode .homebase-footer,html.popup-mode .account-heading,
html.popup-mode #auth .account-switch,html.popup-mode #guard-entry,html.popup-mode .account-footnote,html.popup-mode .skip-link{display:none!important}
html.popup-mode .account-main{min-height:0!important;max-width:none!important;margin:0!important;padding:0 2px 6px!important}
html.popup-mode #auth{margin:0 auto!important;padding:0 0 4px!important;animation:none}
html.popup-mode #auth h2{margin-top:2px!important}

/* Kontoseite: Registrierung. Anmeldung nur im eingebetteten Popup. */
html.registration-only #auth .account-switch{display:none!important}

/* Konto erstellen: gleicher Aufbau, aber kompakter */
html:not(.popup-mode) .account-page .account-heading{flex-direction:row!important;gap:10px!important;margin:30px auto 18px!important}
html:not(.popup-mode) .account-page .account-heading img{width:20px!important;padding:11px!important;border-radius:13px!important;animation:none!important}
html:not(.popup-mode) .account-page #auth h2{margin:0 0 6px!important;font-size:clamp(26px,4.2vw,32px)!important;line-height:1.08!important}
html:not(.popup-mode) .account-page #auth .auth-description{margin:0 0 18px!important;font-size:13.5px!important;line-height:1.5!important}
html:not(.popup-mode) .account-page #auth-feedback:not(:empty){margin:0 0 14px!important}
html:not(.popup-mode) .account-page #auth .auth-step-label{margin:0 0 14px!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
html:not(.popup-mode) .account-page #auth-form hr,html:not(.popup-mode) .account-page #auth .auth-divider{display:none}
html:not(.popup-mode) .account-page .account-panel input:not([type=checkbox]){min-height:48px!important;margin:7px 0 14px!important;padding:12px 14px!important}
html:not(.popup-mode) .account-page #auth #register-username{height:48px!important;margin:7px 0 5px!important}
html:not(.popup-mode) .account-page #register-username-field::after{top:47px!important}
html:not(.popup-mode) .account-page #register-username-field{margin-bottom:10px!important}
html:not(.popup-mode) .account-page #submit{min-height:48px!important;margin-top:6px!important}
html:not(.popup-mode) .account-page #auth .guard-entry{margin-top:20px!important;padding-top:16px!important}
html:not(.popup-mode) .account-page #auth .guard-button{margin-top:10px!important;padding:8px 14px 8px 8px!important}
html:not(.popup-mode) .account-page #auth .guard-entry>p{margin:8px 0 0!important}
html:not(.popup-mode) .account-page .account-footnote{margin-top:16px!important}

/* „Mit Guard anmelden": ruhiger Sekundär-Button im Stil des Konto-Buttons */
.account-page #auth .guard-entry{text-align:center}
.account-page #auth .guard-button{display:inline-flex!important;width:auto!important;align-items:center;gap:9px!important;min-height:42px;margin:10px auto 0!important;padding:0 14px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;background:transparent!important;color:#f5f3ec!important;transition:border-color .16s,color .16s,background .16s}
.account-page #auth .guard-button:hover{border-color:rgba(255,210,63,.45)!important;background:rgba(255,210,63,.05)!important;color:#ffd23f!important}
.account-page #auth .guard-button svg{width:16px!important;height:16px!important;padding:0!important;background:none!important;border-radius:0!important;stroke:#ffd23f}
.account-page #auth .guard-button>span:nth-child(2){display:block!important;flex:none}
.account-page #auth .guard-button strong{font-size:13px!important;font-weight:700!important}
.account-page #auth .guard-button small{display:none!important}
.account-page #auth .guard-button>span:last-child{font-size:12px;opacity:.7}
.account-page #auth .guard-entry>p{font-size:11px!important;color:#6f6d65!important}