/* ============================================================
   Responsive — Sidebar→Bottom-Nav, Filter→Bottom-Sheet,
   KPI-Stack, vereinfachte Charts, horizontale Trend-Scrolls.
   Breakpoint: ≤860px = "mobile" (Handoff: 390px Frame).
   Screen-1-Fokus: Desktop ist maßgeblich; Mobile-Feinschliff
   folgt mit Screen 2/3.
   ============================================================ */

.bottom-nav { display: none; }

/* Mobile-only Filter-Trigger-Row (Desktop versteckt) */
.filter-trigger-row { display: none; }

@media (max-width: 860px) {
  /* Desktop-Filter-Row aus, Trigger-Row an */
  .filter-row--desktop { display: none; }
  .filter-trigger-row {
    display: flex; align-items: center; gap: var(--sp-8);
    padding: var(--sp-12) var(--gutter-m);
    border-bottom: 1px solid var(--border-1);
    overflow: hidden;
  }
  .filter-trigger-chips { display: flex; gap: 7px; overflow-x: auto; }
  .filter-trigger-chips .chip { white-space: nowrap; flex-shrink: 0; }
}

.filter-trigger-btn {
  display: flex; align-items: center; gap: var(--sp-6);
  background: var(--amber); color: var(--amber-on);
  border-radius: var(--r-pill);
  padding: 8px 14px; font-size: 12.5px; font-weight: 500;
  flex-shrink: 0;
}
.filter-trigger-btn__count {
  font-family: var(--f-mono); font-size: 11px;
  background: rgba(22, 21, 26, .25); border-radius: 8px; padding: 0 5px;
}

/* — Bottom-Sheet Innenleben — */
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-22); }
.sheet__reset { font-family: var(--f-mono); font-size: 11px; color: var(--text-muted); }
.sheet__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--text-faint); margin-bottom: 11px; }
.sheet__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: var(--sp-24); }
.sheet-seg {
  display: flex; background: var(--bg);
  border: 1px solid var(--border-2); border-radius: 10px; padding: 4px;
  margin-bottom: var(--sp-24);
}
.sheet-seg__btn {
  flex: 1; background: transparent; color: var(--text-muted);
  border-radius: 7px; padding: 10px;
  font-family: var(--f-mono); font-size: 12.5px;
}
.sheet-seg__btn.is-active { background: var(--amber); color: var(--amber-on); }
.sheet__apply { width: 100%; padding: 15px; font-size: 15px; border-radius: 12px; margin-top: var(--sp-8); }

@media (max-width: 860px) {
  .sidebar { display: none; }

  .main { width: 100%; }

  .topbar {
    padding: var(--sp-16) var(--gutter-m) var(--sp-12);
    align-items: center;
  }
  .topbar__title { font-size: 24px; }

  .filter-row { padding: var(--sp-12) var(--gutter-m); }
  .body { padding: var(--sp-16) var(--gutter-m) 88px; }

  /* Asymmetrische Reihen → vertikaler Stack */
  .row { flex-direction: column; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .flex-115, .flex-17, .flex-23, .flex-1 { flex: none; width: 100%; }

  /* Charts: kleinere Höhe, größere Touch-Ziele */
  .chart__svg, .chart__yaxis { height: 180px; }

  /* Trends: horizontaler Scroll statt vertikaler Liste (Frame 2) */
  .trends {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--sp-12);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .trends .trend {
    min-width: 160px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--inset);
    border-radius: var(--r-card-m);
    padding: var(--sp-14);
  }

  /* — Discover Mobile (Frame 6): single-column, scrollende Pills — */
  .discover-search-row { padding: var(--sp-12) var(--gutter-m) 0; }
  .cat-bar { padding: var(--sp-12) var(--gutter-m); gap: var(--sp-12); }
  .cat-pills {
    flex-wrap: nowrap; overflow-x: auto; flex: 1;
    -webkit-overflow-scrolling: touch;
  }
  .cat-pill { white-space: nowrap; flex-shrink: 0; }
  .cat-bar__sort { margin-left: 0; }
  .feed-grid { grid-template-columns: 1fr; }

  /* — Bottom-Nav — */
  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--sidebar);
    border-top: 1px solid var(--border-1);
    padding: var(--sp-8) var(--sp-12) calc(var(--sp-8) + env(safe-area-inset-bottom));
    justify-content: space-around;
    z-index: 40;
  }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--sp-6) var(--sp-10);
    flex: 1;
  }
  .bottom-nav__idx { font-family: var(--f-mono); font-size: 9px; color: var(--text-faint); }
  .bottom-nav__label { font-family: var(--f-head); font-size: 11px; color: var(--text-sec); }
  .bottom-nav__item.is-active .bottom-nav__idx,
  .bottom-nav__item.is-active .bottom-nav__label { color: var(--amber); }
}

/* — Filter bottom-sheet (Mobile, Screen 3) — */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(3px);
  display: none;
}
.sheet-backdrop.is-open { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--card);
  border-radius: var(--r-card-m) var(--r-card-m) 0 0;
  padding: var(--sp-16) var(--gutter-m) calc(var(--sp-24) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 220ms ease;
}
.sheet.is-open { transform: translateY(0); }
.sheet__handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border-3); margin: 0 auto var(--sp-16);
}