.account-page { min-height: 100vh; background: radial-gradient(circle at 50% 0, rgba(108,70,250,.15), transparent 34%), var(--bg-2); }
.account-nav { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.account-logo img { width: 130px; display: block; }
[data-theme="dark"] .account-logo img { filter: brightness(0) invert(1); }
.account-back { color: var(--text-3); text-decoration: none; font-size: 14px; font-weight: 650; }
.account-main { width: min(520px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0 90px; }
.account-card { background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 34px; box-shadow: var(--shadow-lg); }
.account-icon { width: 58px; height: 58px; border-radius: 17px; margin-bottom: 22px; }
.account-card h1 { font-size: 30px; letter-spacing: -.035em; margin-bottom: 9px; }
.account-lead { color: var(--text-3); line-height: 1.6; margin-bottom: 26px; }
.account-form { display: grid; gap: 16px; }
.account-form label { display: grid; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 750; }
.account-form input { width: 100%; border: 1.5px solid var(--border); border-radius: 13px; padding: 13px 14px; background: var(--bg); color: var(--text-1); font: inherit; outline: none; }
.account-form input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108,70,250,.1); }
.account-form .btn { justify-content: center; padding: 14px 20px; font-size: 15px; }
.account-message { display: none; margin: 2px 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.account-message.visible { display: block; }
.account-message.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.account-message.success { background: #ccfbf1; color: #115e59; border: 1px solid #99f6e4; }
.account-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; color: var(--text-3); font-size: 14px; }
.text-button { appearance: none; border: 0; background: transparent; color: var(--purple); font: inherit; font-weight: 750; cursor: pointer; padding: 2px; }
.account-security { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--border); color: var(--text-4); font-size: 12px; line-height: 1.55; }
.account-profile { display: grid; gap: 14px; }
.account-user { padding: 14px 16px; border-radius: 14px; background: var(--bg-2); color: var(--text-2); font-size: 14px; }
.hidden { display: none !important; }
@media (max-width: 560px) { .account-main { padding-top: 28px; } .account-card { padding: 25px; border-radius: 22px; } }
.account-kicker{margin:4px 0 -8px;color:#6758dc;font-size:11px;font-weight:800;letter-spacing:.16em}.invite-privacy{display:grid;gap:5px;margin:22px 0 0;padding:16px;text-align:left;border:1px solid #e2e5ee;border-radius:13px;background:#f8f9fc}.invite-privacy span{color:#687087;font-size:13px;line-height:1.5}.disabled{pointer-events:none;opacity:.6}
.account-profile:not(.hidden) { gap: 24px; }
.account-main:has(#accountProfile:not(.hidden)) { width: min(1120px, calc(100% - 32px)); }
.portal-head,.portal-section-head,.organization-switch { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.portal-head .account-user { flex:1; display:flex; align-items:center; gap:8px; }
.organization-switch { padding:16px 18px; border:1px solid var(--border); border-radius:16px; background:var(--bg-2); }
.organization-switch label { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:750; color:var(--text-3); }
.organization-switch select,.portal-panel input,.portal-panel select { width:100%; border:1.5px solid var(--border); border-radius:11px; padding:11px 12px; background:var(--bg); color:var(--text-1); font:inherit; }
.organization-switch select { min-width:260px; }
.status-pill { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border-radius:999px; background:#ede9fe; color:#5b21b6; font-size:11px; font-weight:800; }
.status-pill.warning { background:#fef3c7; color:#92400e; }
.license-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; padding:22px; border:1px solid #c4b5fd; border-radius:18px; background:linear-gradient(135deg,#f5f3ff,#fff); }
[data-theme="dark"] .license-panel { background:linear-gradient(135deg,rgba(91,33,182,.2),rgba(15,23,42,.6)); }
.license-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:3px 0 7px; }.license-title-row h2 { margin:0; font-size:23px; }.license-panel p { margin:0; color:var(--text-3); line-height:1.55; }
.license-panel-actions { display:grid; justify-items:end; gap:10px; }.license-key-hint { padding:9px 12px; border-radius:10px; background:var(--surface); color:var(--text-2); font:750 12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.beta-data-note { display:grid; gap:3px; margin-top:13px; padding:11px 13px; border:1px solid #fde68a; border-radius:12px; background:#fffbeb; color:#854d0e; font-size:12px; line-height:1.45; }.beta-data-note span{color:#92400e}
.portal-tabs { display:flex; gap:6px; overflow:auto; padding:5px; border:1px solid var(--border); border-radius:14px; background:var(--bg-2); }
.portal-tabs button { flex:1; white-space:nowrap; border:0; border-radius:10px; padding:10px 13px; background:transparent; color:var(--text-3); font:inherit; font-size:13px; font-weight:750; cursor:pointer; }
.portal-tabs button.active { background:var(--surface); color:var(--text-1); box-shadow:0 2px 8px rgba(20,18,40,.08); }
.portal-section { display:grid; gap:18px; }
.portal-section-head h2 { margin:3px 0 5px; font-size:24px; }
.portal-section-head p,.portal-panel p { margin:0; color:var(--text-3); line-height:1.55; }
.section-kicker { color:var(--purple); font-size:10px; font-weight:850; letter-spacing:.14em; }
.portal-grid { display:grid; gap:14px; }.portal-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.portal-panel { display:grid; gap:13px; padding:18px; border:1px solid var(--border); border-radius:16px; background:var(--bg-2); }
.portal-panel h3 { margin:0; font-size:16px; }.portal-panel label { display:grid; gap:6px; color:var(--text-2); font-size:12px; font-weight:750; }
.inline-form { grid-template-columns:2fr 1fr auto; align-items:end; }
.settings-form { grid-template-columns:repeat(3,minmax(0,1fr)); }.settings-form .wide { grid-column:1/-1; }
.portal-list { display:grid; gap:9px; }
.portal-row { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--border); border-radius:13px; }
.portal-row-main { display:grid; gap:3px; min-width:0; }.portal-row-main strong { overflow:hidden; text-overflow:ellipsis; }.portal-row-main small { color:var(--text-4); }
.portal-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }.portal-row-actions select { padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text-1); }
.portal-row-actions button { padding:8px 11px; }
.portal-notice { padding:13px 15px; border:1px solid #c4b5fd; border-radius:13px; background:#f5f3ff; color:#5b21b6; font-size:13px; line-height:1.55; word-break:break-word; }.portal-notice.warning { border-color:#fcd34d; background:#fffbeb; color:#92400e; }
.danger-button { justify-content:center; border:1px solid #fecaca; background:#fff1f2; color:#b91c1c; }.danger-button:hover { background:#ffe4e6; }
@media(max-width:760px){.portal-grid.two,.settings-form,.inline-form,.license-panel{grid-template-columns:1fr}.license-panel-actions{justify-items:start}.portal-section-head,.organization-switch{align-items:stretch;flex-direction:column}.organization-switch label{align-items:stretch;flex-direction:column}.organization-switch select{min-width:0}.portal-row{grid-template-columns:1fr}.portal-row-actions{justify-content:flex-start}.portal-tabs button{flex:none}.account-card:has(#accountProfile:not(.hidden)){padding:20px}}

/* Kontobereich 2026: ruhigeres Dashboard und echte Smartphone-Bedienung. */
.account-main:has(#accountProfile:not(.hidden)) .account-card{background:transparent;border:0;box-shadow:none;padding:0}
.account-main:has(#accountProfile:not(.hidden)) .account-icon,
.account-main:has(#accountProfile:not(.hidden))>section>h1,
.account-main:has(#accountProfile:not(.hidden))>section>.account-lead{display:none}
.account-profile:not(.hidden)>.portal-head{padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 8px 28px rgba(25,22,55,.05)}
.account-profile:not(.hidden) .account-user{background:transparent;padding:0}
.portal-section,.portal-tabs,.organization-switch,.license-panel{box-shadow:0 8px 28px rgba(25,22,55,.045)}
.portal-section{padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.portal-tabs{position:sticky;top:12px;z-index:5;backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg-2) 88%,transparent)}
.portal-panel input:focus,.portal-panel select:focus,.organization-switch select:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 4px rgba(108,70,250,.1)}
.portal-panel .btn,.portal-section-head .btn{min-height:42px}

@media(max-width:760px){
  .account-page{background:var(--bg-2)}
  .account-nav{height:58px;padding:0 16px;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg-2) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
  .account-logo img{width:105px}.account-back{font-size:12px}
  .account-main,.account-main:has(#accountProfile:not(.hidden)){width:100%;padding:18px 12px 45px}
  .account-card{padding:22px 18px;border-radius:20px}
  .account-card h1{font-size:26px}.account-icon{width:50px;height:50px;border-radius:15px}
  .account-profile:not(.hidden){gap:13px}
  .account-profile:not(.hidden)>.portal-head{padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;border-radius:14px}
  .portal-head .account-user{display:grid;gap:5px;font-size:12px;min-width:0}.portal-head .account-user strong{overflow:hidden;text-overflow:ellipsis}.portal-head>.btn{padding:9px 11px;font-size:11px}
  .license-panel{padding:17px;border-radius:15px;gap:15px}.license-title-row{align-items:flex-start}.license-title-row h2{font-size:19px}.license-panel p{font-size:12px}.beta-data-note{font-size:11px}.license-panel-actions{grid-template-columns:1fr;width:100%}.license-panel-actions .btn{width:100%;justify-content:center}.license-key-hint{width:100%;text-align:center}
  .organization-switch{padding:14px;border-radius:14px;gap:9px}.organization-switch label{gap:7px}.organization-switch .status-pill{order:-1}.organization-switch select{font-size:13px}
  .portal-tabs{top:66px;margin:0 -12px;padding:7px 12px;border-left:0;border-right:0;border-radius:0;scrollbar-width:none;box-shadow:0 8px 20px rgba(24,20,55,.06)}.portal-tabs::-webkit-scrollbar{display:none}.portal-tabs button{padding:9px 12px;font-size:11px}
  .portal-section{padding:17px 14px;border-radius:14px;gap:14px}.portal-section-head{gap:12px}.portal-section-head h2{font-size:20px}.portal-section-head p,.portal-panel p{font-size:12px}.portal-section-head>.btn{width:100%;justify-content:center}
  .portal-grid{gap:10px}.portal-panel{padding:14px;border-radius:13px;gap:11px}.portal-panel h3{font-size:15px}.portal-panel label{font-size:11px}.portal-panel input,.portal-panel select{min-height:44px;font-size:16px;padding:10px 11px}.portal-panel .btn{width:100%;justify-content:center}
  .inline-form{padding:14px}.inline-form .btn{min-height:44px}
  .portal-row{padding:13px;border-radius:12px;gap:11px}.portal-row-main strong{font-size:13px}.portal-row-main small{font-size:11px;line-height:1.45}.portal-row-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.portal-row-actions select{grid-column:1/-1;width:100%;min-height:42px;font-size:13px}.portal-row-actions .btn{width:100%;justify-content:center;padding:9px 7px;font-size:11px}
  .portal-notice{font-size:11px;padding:11px 12px}.settings-form .wide{grid-column:auto}.account-security{font-size:11px}.account-actions{font-size:12px}
}
@media(max-width:390px){.account-profile:not(.hidden)>.portal-head{grid-template-columns:1fr}.portal-head>.btn{width:100%;justify-content:center}.portal-row-actions{grid-template-columns:1fr}.portal-row-actions select{grid-column:auto}}