/* ══════════════════════════════════════════════════════════
   FlowDS — Mobile Responsive Styles
   Breakpoint: ≤768px (phones & small tablets)
   ══════════════════════════════════════════════════════════ */

/* ── Hamburger Button (nur Mobile sichtbar) ─────────────── */
#mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 20px;
  color: var(--text);
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: background .15s;
}
#mobile-menu-btn:active { background: var(--bg-3); }

/* ── Mobile Overlay (Sidebar-Hintergrund) ───────────────── */
#mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1500;
}

@media (max-width: 768px) {

  /* ── Grundlayout ──────────────────────────────────────── */
  body {
    flex-direction: column;
    overflow: hidden auto;
  }

  /* ── Hamburger einblenden ─────────────────────────────── */
  #mobile-menu-btn { display: flex; align-items: center; justify-content: center; }

  /* ── Sidebar als Drawer ───────────────────────────────── */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px !important;
    min-width: 240px !important;
    z-index: 1600;
    transform: translateX(-100%);
    transition: transform .25s ease, background .2s, border-color .2s;
    overflow-y: auto;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* ── Content: Vollbreite ────────────────────────────────── */
  .content {
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 56px 12px 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Activity Panel ─────────────────────────────────────── */
  #activity-panel {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── Expand-Felder: statt 3 Spalten → 1 Spalte ────────── */
  .expand-section__body > [style*="display:flex"][style*="gap:0"],
  .expand-section__body > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Preis-Rechner */
  .dc-price-row {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  /* Rand zwischen Spalten entfernen */
  .expand-section__body [style*="border-right:1px solid"] {
    border-right: none !important;
    padding-right: 0 !important;
  }
  .expand-section__body [style*="border-left:1px solid"] {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* ── Listings Tabelle → horizontal scrollbar ──────────── */
  .listings-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Img Grid ────────────────────────────────────────────── */
  .img-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── Specs Grid ──────────────────────────────────────────── */
  .specs-grid .spec-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Titel-Zeile umbrechen ───────────────────────────────── */
  .draft-expand__inner [style*="display:flex"][style*="align-items:center"][style*="flex-wrap:nowrap"] {
    flex-wrap: wrap !important;
  }
}