/* layout.css — S5-A Shell: Grid-Token, Top-/Bottom-Nav, Seitenrahmen.
   Grid-Kontrakt (Spec §4): .shell = Content-Spalte; Abstände NUR über --sp-*. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --shell-max: 1200px; --topnav-h: 56px; --bottomnav-h: 58px;
}
.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .shell { padding: 0 var(--sp-5); } }

.topnav { position: sticky; top: 0; z-index: 41; /* 41: über .bottomnav (40), damit das mobile Konto-Sheet den Balken überdeckt */ display: flex; align-items: center;
  gap: var(--sp-4); height: var(--topnav-h); padding: 0 var(--sp-5);
  background: var(--surface, #fff); border-bottom: 1px solid var(--border, #e2e0dc); }
.topnav-tabs { display: flex; gap: var(--sp-2); }
.topnav .nav-tab { display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: 8px; text-decoration: none; }
.topnav .nav-tab.is-active { background: var(--accent-soft, #efe7ff);
  color: var(--accent, #6b46ff); font-weight: 600; }
.topnav .search-pill { margin-left: auto; }
/* Brand: the app.css brand rules are scoped to the old `.nav`, so re-anchor the
   mark size + wordmark under `.topnav` (the mark SVG has only a viewBox — without
   an explicit size it would fall back to the 300px default replaced-box size). */
.topnav .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.topnav .brand-mark { width: 26px; height: 26px; display: block; flex: none; }
.topnav .brand-word { font-family: var(--font-display); font-weight: 700;
  font-size: 1.06rem; color: var(--fg); letter-spacing: -0.02em; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 280px;
  max-width: calc(100vw - 2 * var(--sp-4)); }

.bottomnav { display: none; }
@media (max-width: 767px) {
  .topnav-tabs, .topnav .search-pill { display: none; }
  .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; height: var(--bottomnav-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface, #fff); border-top: 1px solid var(--border, #e2e0dc); }
  .bn-tab { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; min-height: 44px; font-size: 11px;
    color: var(--muted, #888); text-decoration: none; background: none; border: 0; }
  .bn-tab.is-active { color: var(--accent, #6b46ff); font-weight: 700; }
  body { padding-bottom: calc(var(--bottomnav-h) + var(--sp-4)); }
  /* Konto-Menü als Bottom-Sheet über der Bottom-Nav */
  .acct-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,.25); }
}