/* App-Rahmen: Sidebar links, Inhalt als runde Karte auf grauem Grund (wie Musubi) */

.skip-link {
  position: absolute; z-index: 100; left: 12px; top: -48px;
  padding: var(--s-space-2) var(--s-space-4); border-radius: var(--s-radius);
  background: var(--s-text); color: var(--s-surface); font-weight: 600;
  transition: top .15s;
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; color: var(--s-surface); outline: 2px solid var(--s-accent); outline-offset: 2px; }

body.no-scroll { overflow: hidden; }

/* ---------- Marke ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--s-space-3); color: var(--s-text); text-decoration: none; border-radius: var(--s-radius-lg); }
.brand:hover { color: var(--s-text); }
.brand__mark { width: 32px; height: 32px; border-radius: var(--s-radius); }
.brand__word { font-family: var(--s-font-head); font-weight: 800; font-size: var(--s-text-xl); letter-spacing: -0.015em; line-height: 1; }
.brand__word--lg { font-size: var(--s-text-2xl); }
.brand__kanji { font-family: var(--s-font); font-weight: 500; font-size: .7em; color: var(--s-text-3); margin-left: 2px; }

/* ---------- Grundgerüst ---------- */
.shell { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--s-sidebar-w);
  display: flex; flex-direction: column;
  padding: var(--s-space-4) var(--s-space-3) var(--s-space-3);
  background: var(--s-bg);
}
.sidebar__head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 var(--s-space-2) 0 var(--s-space-2); margin-bottom: var(--s-space-4); }
.sidebar__close { display: none; }
/* Viele Verwaltungs-Links: Die Navigation scrollt, das Benutzermenü unten bleibt immer erreichbar */
.sidebar__nav {
  display: grid; gap: 2px; align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(var(--s-space-1) * -1); padding: 0 var(--s-space-1) var(--s-space-1);
}
.sidebar__heading {
  margin: var(--s-space-4) 0 var(--s-space-2); padding: 0 var(--s-space-3);
  font-size: var(--s-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--s-text-3);
}

/* Nav-Pills */
.nav-link {
  display: flex; align-items: center; gap: var(--s-space-3);
  height: 36px; padding: 0 var(--s-space-3); border-radius: var(--s-radius);
  color: var(--s-text-2); font-size: var(--s-text-base); font-weight: 500; text-decoration: none;
  transition: background-color .12s, color .12s;
}
.nav-link .icon { width: 18px; height: 18px; color: var(--s-icon); }
.nav-link:hover { background: var(--s-surface-3); color: var(--s-text); }
.nav-link:hover .icon { color: var(--s-text); }
.nav-link--active, .nav-link--active:hover { background: var(--s-accent-soft); color: var(--s-accent-text); font-weight: 600; }
.nav-link--active .icon, .nav-link--active:hover .icon { color: var(--s-accent); }

/* Organisations-Wechsler oben in der Sidebar (gleiche Bauart wie der Benutzer-Button) */
.org-switcher { margin-bottom: var(--s-space-4); }
.org-button {
  display: flex; align-items: center; gap: var(--s-space-3); width: 100%;
  padding: var(--s-space-2) var(--s-space-2); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg);
  background: var(--s-surface); text-align: left; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.org-button:hover, .org-button[aria-expanded="true"] { border-color: var(--s-border-strong); }
.org-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--s-ring); border-color: var(--s-accent); }
.org-button__mark {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--s-radius);
  background: var(--s-accent-soft); color: var(--s-accent);
}
.org-button__text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.org-button__label { font-size: var(--s-text-xs); color: var(--s-text-3); }
.org-button__name { font-size: var(--s-text-sm); font-weight: 600; color: var(--s-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-button__chevron { color: var(--s-text-3); }
.org-menu { top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; }
.org-menu__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-menu__role { font-size: var(--s-text-xs); color: var(--s-text-3); }
.org-menu__item[aria-current] { font-weight: 600; }
.org-menu__item[aria-current] .icon { color: var(--s-accent); }

/* Benutzer unten in der Sidebar */
.sidebar__foot { margin-top: auto; padding-top: var(--s-space-3); }
.user-button {
  display: flex; align-items: center; gap: var(--s-space-3); width: 100%;
  padding: var(--s-space-2); border: 1px solid transparent; border-radius: var(--s-radius-lg);
  background: transparent; text-align: left; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.user-button:hover, .user-button[aria-expanded="true"] { background: var(--s-surface); border-color: var(--s-border); }
.user-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--s-ring); border-color: var(--s-accent); }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--s-primary-grad); color: var(--s-on-accent);
  font-family: var(--s-font-head); font-weight: 800; font-size: var(--s-text-base);
}
/* Profilbild statt Initiale (B4.12) */
.avatar--image { object-fit: cover; background: var(--s-surface-2); }
.avatar--lg { width: 64px; height: 64px; font-size: var(--s-text-2xl); }
.avatar--sm { width: 24px; height: 24px; font-size: var(--s-text-xs); }
.member-cell { display: flex; align-items: center; gap: var(--s-space-2); }
.member-cell__email { font-weight: 400; font-size: var(--s-text-sm); }
.avatar-edit { display: flex; flex-wrap: wrap; gap: var(--s-space-4); align-items: flex-start; margin-top: var(--s-space-5); padding-top: var(--s-space-5); border-top: 1px solid var(--s-border-soft); }
.avatar-edit__forms { display: grid; gap: var(--s-space-2); flex: 1; min-width: min(260px, 100%); }
.avatar-edit__upload { display: grid; gap: var(--s-space-2); }
.user-button__text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.user-button__label { font-size: var(--s-text-xs); color: var(--s-text-3); }
.user-button__email { font-size: var(--s-text-sm); font-weight: 600; color: var(--s-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-button__chevron { color: var(--s-text-3); transition: transform .15s; }
.user-button[aria-expanded="true"] .user-button__chevron { transform: rotate(180deg); }

.topbar { display: none; }
.tabbar { display: none; }

/* Hauptbereich als Karte */
.main { min-height: 100vh; padding: var(--s-space-3) var(--s-space-3) var(--s-space-3) calc(var(--s-sidebar-w)); }
.main:focus { outline: none; }
.main__inner {
  min-height: calc(100vh - 24px);
  padding: var(--s-space-6) var(--s-space-6) var(--s-space-7);
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-xl);
  box-shadow: var(--s-shadow-topbar);
}

/* ---------- Seitenkopf ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-space-4); flex-wrap: wrap; margin-bottom: var(--s-space-5); }
.page-header__text { display: grid; gap: var(--s-space-1); min-width: 0; }
.page-header__desc { max-width: var(--s-measure); color: var(--s-text-2); }
.section-title { font-family: var(--s-font); font-size: var(--s-text-base); font-weight: 600; color: var(--s-text); margin-bottom: var(--s-space-3); }
.section { margin-top: var(--s-space-6); }
.narrow { max-width: 680px; }
.narrow--wide { max-width: 900px; }
.crumbs { margin-bottom: var(--s-space-4); }
.crumbs__back { display: inline-flex; align-items: center; gap: var(--s-space-2); padding: var(--s-space-1) var(--s-space-2) var(--s-space-1) var(--s-space-1); margin-left: calc(var(--s-space-1) * -1); border-radius: var(--s-radius-sm); color: var(--s-text-2); font-size: var(--s-text-sm); font-weight: 500; }
.crumbs__back:hover { background: var(--s-surface-2); color: var(--s-text); }
.form-actions { margin-top: var(--s-space-5); }
.form-error { margin-bottom: var(--s-space-4); }

/* ---------- Handy & kleines Tablet ---------- */
@media (max-width: 767.98px) {
  .topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--s-topbar-h); padding: 0 var(--s-space-2) 0 var(--s-space-4);
    background: color-mix(in srgb, var(--s-surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--s-border);
  }
  .topbar__actions { display: flex; gap: 2px; }
  .topbar .brand__mark { width: 30px; height: 30px; }
  .topbar .brand__word { font-size: var(--s-text-lg); }

  /* Sidebar wird zur Schublade; unsichtbar heisst auch: nicht per Tab erreichbar */
  .sidebar {
    width: min(300px, 86vw);
    background: var(--s-surface);
    border-right: 1px solid var(--s-border);
    box-shadow: var(--s-shadow-dlg);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .shell[data-drawer-open] .sidebar { transform: none; visibility: visible; transition: transform .22s ease; }
  .sidebar__close { display: inline-flex; }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 35; background: var(--s-backdrop); backdrop-filter: blur(2px); }

  .main { padding: 0; }
  .main__inner { min-height: calc(100vh - var(--s-topbar-h)); padding: var(--s-space-5) var(--s-space-4) var(--s-space-7); border: 0; border-radius: 0; box-shadow: none; }
  h1 { font-size: var(--s-text-xl); }
  .page-header { align-items: flex-start; margin-bottom: var(--s-space-4); }

  /* Tab-Leiste unten (B5.4): Daumen-Zone, Safe-Area des iPhones frei lassen */
  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
    padding: var(--s-space-1) var(--s-space-2) max(var(--s-space-1), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--s-surface) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--s-border);
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; padding: var(--s-space-1) var(--s-space-1); border: 0; border-radius: var(--s-radius);
    background: transparent; color: var(--s-text-2); font: inherit; font-size: var(--s-text-xs); font-weight: 600;
    text-decoration: none; cursor: pointer;
  }
  .tabbar__item .icon { width: 22px; height: 22px; color: var(--s-icon); }
  .tabbar__item:hover { color: var(--s-text); background: var(--s-surface-2); }
  .tabbar__item:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }
  .tabbar__item--active, .tabbar__item--active:hover, .tabbar__item[aria-expanded="true"] { color: var(--s-accent-text); }
  .tabbar__item--active .icon, .tabbar__item[aria-expanded="true"] .icon { color: var(--s-accent); }
  .tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Inhalt endet über der Leiste, nicht dahinter */
  .main__inner { padding-bottom: calc(var(--s-tabbar-h) + var(--s-space-6) + env(safe-area-inset-bottom)); }
  /* Fokus und Sprungziele nie unter Kopfzeile oder Tab-Leiste (WCAG 2.2 SC 2.4.11): Der Browser
     scrollt ein fokussiertes Element sonst nur knapp in den Viewport – also hinter die Leiste */
  html:has(.tabbar) {
    scroll-padding-top: calc(var(--s-topbar-h) + var(--s-space-2));
    scroll-padding-bottom: calc(var(--s-tabbar-h) + env(safe-area-inset-bottom) + var(--s-space-2));
  }
  /* Schublade und Hintergrund liegen über der Leiste – die Schublade über ihrem Hintergrund */
  .drawer-backdrop { z-index: 45; }
  .sidebar { z-index: 46; }
  .nav-link { height: var(--s-touch); }
}