/* nav.css – wird nach app.css geladen, überschreibt/ergänzt */

/* ── Grundlagen: Layout-Container wachsen nie über 100% ───── */
.as-container, .as-event-content, .as-event-layout > * { min-width: 0; }
.as-container { width: 100%; }
.as-shell-main { padding-top: var(--as-space-lg); }
.as-shell-main > .as-alert, .as-shell-content > .as-alert { margin: 0 0 var(--as-space-md); }
.as-shell-content { padding-top: var(--as-space-lg); }

/* ── Header ───────────────────────────────────────────────── */
.as-nav2-header { position: relative; z-index: 40; gap: var(--as-space-lg); flex-wrap: nowrap; }
.as-nav2-header .as-header__brand { flex: 0 0 auto; white-space: nowrap; }
.as-nav2-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.as-nav2 { display: flex; flex: 1 1 auto; align-items: stretch; justify-content: space-between; gap: var(--as-space-lg); flex-wrap: nowrap; align-self: stretch; min-width: 0; }
.as-nav2-list, .as-nav2-sub { list-style: none; margin: 0; padding: 0; }
.as-nav2-list { display: flex; align-items: stretch; gap: 4px; }
.as-nav2-list > li { display: flex; align-items: stretch; }
.as-nav2 a, .as-nav2 summary, .as-nav2-logout {
  display: flex; align-items: center; color: var(--as-white); text-decoration: none; cursor: pointer;
  font: inherit; font-size: var(--as-text-small); font-weight: var(--as-weight-bold); letter-spacing: var(--as-tracking-btn);
  white-space: nowrap; padding: 0 12px; border-bottom: 3px solid transparent; list-style: none;
}
.as-nav2 summary::-webkit-details-marker { display: none; }
.as-nav2 summary::after { content: "▾"; margin-left: 6px; font-size: 10px; }
.as-nav2 a:hover, .as-nav2 summary:hover, .as-nav2-logout:hover { opacity: 0.8; }
.as-nav2 a.is-active, .as-nav2 summary.is-active { color: var(--as-white); border-bottom-color: var(--as-blue); }
.as-nav2 :focus-visible, .as-nav2-burger:focus-visible { outline: 2px solid var(--as-blue); outline-offset: -2px; }
.as-nav2-count { margin-left: 6px; }
.as-nav2-details { display: flex; position: relative; }
.as-nav2-details > summary { height: 100%; }
.as-nav2-sub {
  position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--as-dark-bg);
  border-top: 1px solid rgba(255,255,255,0.15); box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.as-nav2-sub a { padding: 12px 16px; border-bottom: none; border-left: 3px solid transparent; min-height: 44px; }
.as-nav2-sub a.is-active { border-left-color: var(--as-blue); border-bottom-color: transparent; }
.as-nav2-account { display: flex; align-items: stretch; gap: 4px; margin-left: auto; }
.as-nav2-account form { margin: 0; display: flex; }
.as-nav2-logout { background: none; border: none; border-bottom: 3px solid transparent; font-weight: var(--as-weight-regular); color: rgba(255,255,255,0.85); }
.as-nav2-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.as-nav2-burger { display: none; }

@media (max-width: 1000px) {
  .as-nav2 a, .as-nav2 summary, .as-nav2-logout { padding: 0 8px; }
}

/* ── Header mobil ─────────────────────────────────────────── */
@media (max-width: 799px) {
  .as-nav2-header { height: auto; min-height: 64px; flex-wrap: wrap; padding: 0 var(--as-space-md); gap: 0; justify-content: space-between; }
  .as-nav2-header .as-header__brand { min-height: 64px; }
  .as-nav2-burger {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px;
    color: var(--as-white); border: 1px solid rgba(255,255,255,0.5); font-size: var(--as-text-small);
    font-weight: var(--as-weight-bold); cursor: pointer; user-select: none;
  }
  .as-nav2-burger:hover { opacity: 0.8; }
  .as-nav2 { display: none; flex: 0 0 100%; width: 100%; flex-direction: column; justify-content: flex-start; gap: 0; padding: 0 0 var(--as-space-md); border-top: 1px solid rgba(255,255,255,0.15); }
  .as-nav2-check:checked ~ .as-nav2-header .as-nav2 { display: flex; }
  .as-nav2-check:focus-visible ~ .as-nav2-header .as-nav2-burger { outline: 2px solid var(--as-blue); outline-offset: 2px; }
  .as-nav2-list { flex-direction: column; gap: 0; }
  .as-nav2-list > li { display: block; }
  .as-nav2 a, .as-nav2 summary, .as-nav2-logout {
    min-height: 48px; padding: 0 4px; width: 100%; border-bottom: none; border-left: 3px solid transparent; padding-left: 12px; white-space: normal;
  }
  .as-nav2 a.is-active, .as-nav2 summary.is-active { border-bottom: none; border-left-color: var(--as-blue); background: rgba(255,255,255,0.08); }
  .as-nav2-details { display: block; }
  .as-nav2-sub { position: static; box-shadow: none; border-top: none; min-width: 0; background: rgba(0,0,0,0.12); }
  .as-nav2-sub a { padding-left: 28px; }
  .as-nav2-account { flex-direction: column; margin: var(--as-space-sm) 0 0; padding-top: var(--as-space-sm); border-top: 1px solid rgba(255,255,255,0.15); gap: 0; }
  .as-nav2-account form { display: block; }
  .as-nav2-name { max-width: none; }
  .as-nav2-logout { text-align: left; }
  .as-shell-main { padding: var(--as-space-md); }
}

/* ── Event-Layout ─────────────────────────────────────────── */
.as-shell-event { width: 100%; }
.as-shell-event .as-event-content { max-width: none; width: 100%; }
.as-shell-event .as-event-sidebar { flex: 0 0 240px; }
.as-shell-side { margin: 0; }
.as-shell-side__summary { display: none; }
.as-shell-side__summary::-webkit-details-marker { display: none; }
.as-shell-event .as-event-sidebar__title { margin-bottom: var(--as-space-md); }
.as-shell-event .as-event-nav a.is-active { border-left-color: var(--as-blue); background: rgba(0,159,227,0.08); }
.as-shell-event .as-event-nav a { min-height: 40px; display: flex; align-items: center; }
.as-shell-event .as-event-nav__group-label { font-size: 11px; color: rgba(49,49,49,0.6); padding: 14px 12px 2px; cursor: default; }
.as-shell-event .as-event-nav a.as-event-nav__sub { padding-left: 24px; font-weight: var(--as-weight-bold); font-size: var(--as-text-small); }
.as-shell-pos { margin-top: var(--as-space-md); border-top: 1px solid rgba(0,0,0,0.08); padding-top: var(--as-space-sm); }
.as-shell-pos > summary {
  cursor: pointer; padding: 10px 12px; min-height: 40px; display: flex; align-items: center; justify-content: space-between;
  font-size: var(--as-text-small); font-weight: var(--as-weight-bold); list-style: none; border-left: 3px solid transparent;
}
.as-shell-pos > summary::-webkit-details-marker { display: none; }
.as-shell-pos > summary::after { content: "▾"; font-size: 10px; }
.as-shell-pos[open] > summary::after { content: "▴"; }
.as-shell-pos > summary:hover { opacity: 0.8; background: var(--as-color-surface); }
.as-shell-pos .as-sidebar-position-group-label { font-size: 11px; color: rgba(49,49,49,0.6); }
.as-shell-pos__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-shell-pos__count { font-size: 11px; font-variant-numeric: tabular-nums; }
.as-shell-event .as-sidebar-position-link.is-active { border-left-color: var(--as-blue); background: rgba(0,159,227,0.08); }

.as-shell-crumbs { font-size: var(--as-text-small); margin: 0 0 var(--as-space-md); color: rgba(49,49,49,0.75); overflow-wrap: anywhere; }
.as-shell-crumbs a { color: var(--as-color-primary); text-decoration: none; }
.as-shell-crumbs a:hover { opacity: 0.8; text-decoration: underline; }
.as-shell-crumbs [aria-current="page"] { color: var(--as-color-heading); font-weight: var(--as-weight-bold); }

@media (max-width: 860px) {
  .as-shell-event .as-event-sidebar { flex: none; width: 100%; padding: 0; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); position: static; height: auto; overflow: visible; }
  .as-shell-side__summary {
    display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 var(--as-space-md); cursor: pointer;
    font-size: var(--as-text-small); list-style: none; border-left: 3px solid var(--as-blue);
  }
  .as-shell-side__summary::after { content: "▾"; margin-left: auto; font-size: 10px; }
  .as-shell-side[open] > .as-shell-side__summary::after { content: "▴"; }
  .as-shell-side__hint { color: rgba(49,49,49,0.75); }
  .as-shell-side__body { padding: var(--as-space-md); border-top: 1px solid rgba(0,0,0,0.08); }
  .as-shell-event .as-event-nav { flex-direction: column; flex-wrap: nowrap; }
  .as-shell-event .as-event-nav a { border-bottom: none; border-left: 3px solid transparent; min-height: 44px; }
  .as-shell-event .as-event-nav a.is-active { border-left-color: var(--as-blue); border-bottom-color: transparent; }
  .as-shell-pos > summary, .as-shell-event .as-sidebar-position-link { min-height: 44px; }
  .as-shell-content { padding: var(--as-space-md); }
}

/* Logo ist dunkel, Header ist dunkel: als Weißversion darstellen */
.as-nav2-header .as-header__brand img { filter: brightness(0) invert(1); }
@media (max-width: 799px) { .as-nav2-header .as-header__brand { gap: 10px; } .as-nav2-header .as-header__brand img { height: 22px; } }

@media (min-width: 800px) and (max-width: 1150px) {
  .as-nav2-header { padding: 0 var(--as-space-md); gap: var(--as-space-md); }
  .as-nav2 { gap: var(--as-space-sm); }
  .as-nav2 a, .as-nav2 summary, .as-nav2-logout { padding: 0 8px; }
  .as-nav2-name { max-width: 140px; }
}

/* Einklappbares Seitenmenü: Mini-Sidebar (Desktop) */
.as-rail-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 0 0 var(--as-space-md); padding: 0 10px;
  background: transparent; color: var(--as-color-primary); border: 1px solid rgba(0,159,227,0.35);
  font: inherit; font-size: var(--as-text-small); font-weight: var(--as-weight-bold); cursor: pointer; text-align: left;
}
.as-rail-toggle:hover { opacity: 0.8; background: rgba(0,159,227,0.06); }
.as-rail-toggle__arrow { font-size: 20px; line-height: 1; width: 20px; text-align: center; }
.as-shell-event .as-event-sidebar { transition: flex-basis .18s ease; }
.as-shell-event.is-side-collapsed .as-event-sidebar { flex: 0 0 60px; padding-left: 8px; padding-right: 8px; overflow-x: hidden; }
.as-shell-event.is-side-collapsed .as-rail-toggle { justify-content: center; padding: 0; }
.as-shell-event.is-side-collapsed .as-rail-toggle__text,
.as-shell-event.is-side-collapsed .as-event-sidebar__title,
.as-shell-event.is-side-collapsed .as-sidebar-stat,
.as-shell-event.is-side-collapsed .as-shell-pos { display: none; }
.as-shell-event.is-side-collapsed .as-event-nav__group-label { font-size: 0; height: 1px; padding: 0; margin: 8px 6px; background: rgba(0,0,0,0.1); }
.as-shell-event.is-side-collapsed .as-event-nav a {
  justify-content: center; padding: 0; min-height: 40px; font-size: 0; border-left-width: 3px;
}
.as-shell-event.is-side-collapsed .as-event-nav a::before {
  content: attr(data-kurz); font-size: 13px; font-weight: var(--as-weight-bold); letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) { .as-shell-event .as-event-sidebar { transition: none; } }
@media (max-width: 860px) {
  .as-rail-toggle { display: none; }
  .as-shell-event.is-side-collapsed .as-event-sidebar { flex: none; width: 100%; padding: 0; }
  .as-shell-event.is-side-collapsed .as-event-sidebar__title,
  .as-shell-event.is-side-collapsed .as-sidebar-stat,
  .as-shell-event.is-side-collapsed .as-shell-pos { display: block; }
  .as-shell-event.is-side-collapsed .as-event-nav a { font-size: var(--as-text-small); justify-content: flex-start; padding: 0 12px; }
  .as-shell-event.is-side-collapsed .as-event-nav a::before { content: none; }
  .as-shell-event.is-side-collapsed .as-event-nav__group-label { font-size: 11px; height: auto; padding: 14px 12px 2px; margin: 0; background: none; }
}