/* Ergon mobile.css */
  @media (max-width:1024px) {
    .sidebar-toggle { display: flex; flex-direction: column; justify-content: center; }
    .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
    .sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
    .main { margin-left: 0 !important; }
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr 1fr; }
    .modal { max-width: 95vw; margin: 1rem; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-wide { max-width: 95vw; }
    html, body { overflow-x: hidden; max-width: 100vw; }
    .app, .main, .content { max-width: 100vw; overflow-x: hidden; }
    .metrics-grid { grid-template-columns: 1fr 1fr !important; width: 100% !important; }
    .tax-widget, .tax-grid, .card { max-width: 100% !important; box-sizing: border-box; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .card table th, .card table td { padding: 6px 8px !important; font-size: 12px !important; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
    .doc-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
    .doc-table th, .doc-table td { padding: 5px 8px; font-size: 12px; }
    /* Actions-Buttons kompakter */
    .doc-table .actions-bar { display: flex; gap: 2px; flex-wrap: nowrap; }
    .doc-table .actions-bar .btn { padding: 2px 4px !important; font-size: 11px !important; min-height: 26px !important; min-width: 26px !important; }
    /* Dashboard compact: Zeilen ohne leere Höhe */
    .doc-table tbody tr { height: auto !important; }
  }

  /* ── MOBILE (max 640px) ─────────────────────────────────────────── */
  @media (max-width:640px) {
    /* Grundlayout */
    .metrics-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .form-row-2 { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }

    /* Topbar */
    .topbar { padding: 0.6rem 0.75rem; gap: 6px; }
    .topbar h1 { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-actions { gap: 4px; flex-shrink: 0; }
    .topbar-actions .btn { padding: 7px 10px; font-size: 11px; white-space: nowrap; min-height: 36px; }
    .topbar-actions .btn .btn-text { display: none; }
    .topbar-actions .btn .btn-icon { display: inline; font-size: 16px; }

    /* Content & Cards */
    .content { padding: 0.6rem; }
    .card { padding: 0.75rem; border-radius: 10px; }
    .card-header { padding: 0.75rem; }
    .card-header h2 { font-size: 14px; }

    /* Buttons - Touch-freundlich */
    .btn { padding: 8px 12px; font-size: 13px; min-height: 38px; border-radius: 8px; }
    .btn-sm { padding: 6px 10px; font-size: 12px; min-height: 32px; }
    .btn-xs { padding: 5px 8px; font-size: 11px; min-height: 28px; }
    .btn-primary { min-height: 42px; }

    /* Inputs - Touch-freundlich */
    input, select, textarea { font-size: 16px !important; min-height: 42px; padding: 10px 12px; }
    textarea { min-height: 80px; }
    label { font-size: 13px; margin-bottom: 4px; }
    .form-group { margin-bottom: 12px; }

    /* Tabellen scrollbar */
    .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
    table { font-size: 12px; min-width: 500px; }
    th, td { padding: 8px 6px; white-space: nowrap; }

    /* Navigation */
    .btn-icon { display: none; }
    .btn-text { display: inline; }
    .mobile-hide { display: none !important; }
    .actions-bar { flex-wrap: wrap; gap: 6px; }
    .tax-row { grid-template-columns: 20px 1fr 60px 70px 28px; gap: 4px; padding: 8px 8px; overflow: visible; }
    .tax-row-amount { font-size: 12px; white-space: nowrap; }
    .tax-pct-input { width: 52px !important; }
    .tax-checkbox { width: 18px !important; height: 18px !important; min-height: 18px !important; min-width: 18px !important; max-height: 18px !important; max-width: 18px !important; -webkit-appearance: none !important; appearance: none !important; border: 2px solid var(--border); border-radius: 4px; background: var(--bg); cursor: pointer; flex-shrink: 0 !important; align-self: center; position: relative; padding: 0 !important; }
    .tax-checkbox:checked { background: var(--blue); border-color: var(--blue); }
    .tax-checkbox:checked::after { content: "✓"; position: absolute; top: -2px; left: 2px; font-size: 13px; color: white; font-weight: bold; }
    .tax-pct-input { width: 56px; }

    /* Modal */
    .modal { max-width: 100vw; width: 100%; margin: 0; border-radius: 16px 16px 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-wide { max-width: 100vw; }
    .modal-overlay { align-items: flex-end; }
    .modal-footer { position: sticky; bottom: 0; background: var(--card); padding: 0.75rem; border-top: 1px solid var(--border); }

    /* Positions-Tabelle im Angebot */
    #pos-body tr td input { font-size: 13px !important; min-height: 36px; }

    /* Fotos */
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }

    /* Dashboard Tabellen */
    .table-list td:last-child { white-space: nowrap; }
  }

  /* ── QUERFORMAT MOBILE (landscape) ─────────────────────────────── */
  @media (max-width:900px) and (orientation:landscape) {
    .modal { max-height: 85vh; border-radius: 12px; position: relative; margin: 1rem auto; bottom: auto; }
    .modal-overlay { align-items: center; }
    .sidebar { width: 200px; }
    .content { padding: 0.5rem; }
  }

  /* ── IPAD (768px - 1024px) ──────────────────────────────────────── */
  @media (min-width:768px) and (max-width:1024px) {
    .form-row-2 { grid-template-columns: 1fr 1fr; }
    .metrics-grid { grid-template-columns: repeat(4, 1fr); }
    .btn { min-height: 36px; }
    input, select { min-height: 38px; }
  }

  /* === TABELLEN MOBILE/TABLET === */
  html, body { overflow-x: hidden; }
  .app, .main, .content { max-width: 100vw; box-sizing: border-box; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  .doc-tbl { border-collapse: collapse; white-space: nowrap; }
  .doc-tbl th, .doc-tbl td { padding: 6px 10px; font-size: 13px; }
  .doc-tbl tbody tr { height: auto !important; }
  .doc-tbl .actions-bar { display: flex; gap: 2px; flex-wrap: nowrap; }
  .doc-tbl .actions-bar .btn { padding: 2px 5px !important; font-size: 12px !important; min-height: 28px !important; }

  @media (max-width: 1200px) {
    .actions-col { display: none !important; }
  }
  @media (max-width: 820px) {
    html, body { overflow-x: hidden; }
    .app, .main, .content { max-width: 100vw; box-sizing: border-box; }
    .tbl-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
    .doc-table { white-space: nowrap; width: 100%; display: table !important; table-layout: fixed; }
    .doc-tbl { white-space: nowrap; width: 100%; display: table !important; }
    .doc-table thead, .doc-tbl thead { width: 100%; display: table-header-group; }
    .doc-tbl th, .doc-tbl td,
    .doc-table th, .doc-table td { padding: 5px 6px !important; font-size: 11px !important; }
    .doc-tbl tbody tr, .doc-table tbody tr { height: auto !important; }
    .doc-table th:empty, .doc-tbl th:empty { width: 0 !important; padding: 0 !important; }
    .metrics-grid { grid-template-columns: 1fr 1fr !important; width: 100% !important; }
    .tax-widget, .tax-grid, .card { max-width: 100% !important; box-sizing: border-box; }
  }

  @media (max-width: 480px) {
    .doc-table { table-layout: auto !important; }
  }