/* Shared by interactive pages and the statically rendered help page. */
.sidebar.grouped-sidebar{width:256px;padding:24px 16px 16px;color:var(--nav-text)}
.grouped-sidebar .navigation-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px}
.grouped-sidebar .brand{gap:12px;padding:0 12px;font-size:1.4375rem}
.grouped-sidebar .brand-flex{font-size:.8125rem;color:var(--nav-muted)}
.grouped-sidebar .navigation-content{display:flex;flex-direction:column;flex:1;min-height:min-content}
.grouped-sidebar .grouped-navigation{display:flex;flex-direction:column;gap:8px;overflow:visible;margin:0}
.grouped-sidebar .navigation-group{margin:0;color:inherit}
.navigation-group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:8px 12px;color:var(--nav-muted);font-size:.8125rem;font-weight:600;letter-spacing:0;border-radius:6px}
.navigation-group summary::-webkit-details-marker{display:none}
.navigation-group summary:hover,.navigation-group summary:active{background:var(--nav-hover);color:var(--on-accent)}
.navigation-group summary>.nav-symbol{display:grid;place-items:center;width:16px;height:16px;flex-shrink:0}
.navigation-group summary svg{width:16px;height:16px}
.navigation-group[open] summary>.nav-symbol{transform:rotate(90deg)}
.grouped-sidebar .navigation-links{display:flex;flex-direction:column;gap:4px}
.grouped-sidebar .navigation-links a,.grouped-sidebar .navigation-service a{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border-radius:8px;font-size:.875rem;line-height:1.5;margin:0;white-space:normal}
.grouped-sidebar nav a:hover,.grouped-sidebar nav a:active{background:var(--nav-hover);color:var(--on-accent)}
.grouped-sidebar nav a.active{background:var(--nav-active);color:var(--on-accent);box-shadow:inset 3px 0 var(--accent-ring);font-weight:600}
.grouped-sidebar nav a>.nav-symbol,.grouped-sidebar .navigation-service a>.nav-symbol{width:20px}
.grouped-sidebar nav a>.nav-symbol svg,.grouped-sidebar .navigation-service a>.nav-symbol svg{width:20px;height:20px;opacity:1}
.grouped-sidebar .navigation-service{display:flex;flex-direction:column;gap:4px;margin:0;padding-top:24px;margin-top:auto;overflow:visible}
.grouped-sidebar .navigation-service a{font-size:.8125rem;color:var(--nav-text)}
.grouped-sidebar .sidebar-bottom{margin-top:16px;padding:16px 12px 0;border-color:var(--nav-line)}
.grouped-sidebar .workspace-dot{top:21px;left:12px}
.grouped-sidebar .sidebar-bottom strong{font-size:.875rem;color:var(--nav-text)}
.grouped-sidebar .sidebar-bottom small{font-size:.8125rem;color:var(--nav-muted)}
.grouped-sidebar .legal-links{margin-top:8px;font-size:.75rem;gap:4px 8px}
.grouped-sidebar .legal-links a{font-size:.875rem;padding:4px;min-height:36px}
.grouped-sidebar :focus-visible{outline:3px solid var(--focus-on-dark);outline-offset:3px}
/* Nur unter 650 px (Block E): spezifischer als ".sidebar nav" aus app.css, sonst stuende die Tab-Leiste auch am Rechner. */
.grouped-sidebar .nur-mobil,.sidebar nav.nur-mobil{display:none}
@media(max-width:950px) and (min-width:651px){.sidebar.grouped-sidebar{width:232px;padding:24px 12px 16px}}
@media(max-width:650px){
 .sidebar.grouped-sidebar{width:100%;padding:16px;position:static;height:auto}
 .grouped-sidebar .navigation-header{padding-bottom:0;gap:8px}
 .grouped-sidebar .brand{padding:0;gap:8px;font-size:1.125rem}
 .grouped-sidebar .brand-logo{width:32px;height:32px}
 .grouped-sidebar .brand-flex{font-size:.75rem;letter-spacing:2px;margin-top:0}
 .grouped-sidebar .navigation-header{min-height:46px;padding-right:140px}
 .grouped-sidebar .navigation-content{padding-top:16px}
 .navigation-ready .grouped-sidebar:not(.navigation-is-open) .navigation-content{display:none}
 .navigation-group summary{min-height:44px}
 .grouped-sidebar .navigation-links a,.grouped-sidebar .navigation-service a{min-height:44px}
 .grouped-sidebar .navigation-service{padding-top:12px}
 .app-shell:has(>.grouped-sidebar.navigation-is-open)>.main-shell{display:none}
}

/* Telefon (Apple-Design-Review 01.11.2026, Block E): Tab-Leiste am unteren Rand (16) und Konto im Menue (7). */
@media(max-width:650px){
 /* Dreiteilige Selektoren, weil ".sidebar nav a" und ".grouped-sidebar nav a.active" aus app.css und von oben sonst gewinnen. */
 .sidebar nav.tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border-top:1px solid var(--line-strong);padding:6px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 14px #18263c14}
 .sidebar nav.tab-bar a,.sidebar nav.tab-bar button{display:grid;justify-items:center;align-content:center;gap:3px;margin:0;padding:6px 0;min-height:48px;font:inherit;font-size:.8125rem;line-height:1.2;font-weight:600;color:var(--muted-2);background:none;border:0;border-radius:6px;box-shadow:none;text-decoration:none;cursor:pointer}
 .grouped-sidebar nav.tab-bar a:hover,.grouped-sidebar nav.tab-bar a:active,.grouped-sidebar nav.tab-bar button:hover{background:var(--surface-tint);color:var(--accent-text)}
 .grouped-sidebar nav.tab-bar a.active,.grouped-sidebar nav.tab-bar button[aria-expanded="true"]{background:none;box-shadow:none;color:var(--accent-text);font-weight:600}
 .sidebar nav.tab-bar a>.nav-symbol,.sidebar nav.tab-bar button>.nav-symbol{display:grid;place-items:center;width:24px;height:24px;font-size:0}
 .sidebar nav.tab-bar a>.nav-symbol svg,.sidebar nav.tab-bar button>.nav-symbol svg{width:24px;height:24px;opacity:1}
 .sidebar nav.tab-bar :focus-visible{outline:3px solid var(--focus-strong);outline-offset:-3px}
 .grouped-sidebar .navigation-konto{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px;border-top:1px solid var(--nav-line);color:var(--nav-text)}
 .navigation-konto .avatar{background:var(--nav-avatar);color:var(--nav-muted)}
 .navigation-konto small{display:block;font-size:.8125rem;color:var(--nav-muted)}
 .navigation-konto form{margin-left:auto}
 .navigation-konto .text-button{color:var(--focus-on-dark);min-height:44px}
 .grouped-sidebar.navigation-is-open .navigation-content{position:fixed;top:78px;bottom:70px;left:0;right:0;overflow:auto;min-height:0;padding-bottom:24px}.navigation-konto .text-button:hover,.navigation-konto .text-button:active{color:var(--on-accent)}
 .app-shell>.main-shell{padding-bottom:24px}html:has(.tab-bar){scroll-padding-bottom:84px}
}