/* 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; }

  /* Bis 08.09.2026 stand hier .actions-col { display:none }. Unter 1200px
     Fensterbreite verschwanden damit Bearbeiten, PDF und Löschen komplett —
     auf jedem Handy und in jedem halbierten Fenster liess sich kein Bericht
     und keine Rechnung mehr öffnen. Jetzt kleben die Knöpfe am rechten Rand
     und der Rest der Tabelle lässt sich darunter wegschieben. */
  @media (max-width: 1200px) {
    .tbl-wrap { overflow-x: auto; }
    .doc-tbl td.actions-col {
      position: sticky; right: 0; z-index: 2;
      background: var(--surface);
      box-shadow: -6px 0 8px -6px rgba(0,0,0,0.18);
    }
    .doc-tbl thead th:last-child {
      position: sticky; right: 0; z-index: 3;
      background: var(--bg);
    }
    .doc-tbl .actions-bar { flex-wrap: nowrap; }
    .doc-tbl .actions-bar .btn { white-space: nowrap; }
  }
  @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; }
  }

  /* ── DOKUMENT-VORSCHAU HOCHKANT-FIX (2026-06-18, v5) ──────────────
     Hochformat: Vollbild + normale Tabelle, nur auf Seitenbreite
     verkleinert (keine Kaertchen).                                   */
  @media (max-width: 640px) and (orientation: portrait) {
    /* Vorschau/Editor als Vollbild ueber die SICHTBARE Flaeche */
    .modal-overlay { align-items: stretch; }
    .modal {
      position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: 0;
      width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh;
      border-radius: 0;
    }

    /* Kopfzeile: kompakt, klebt oben, voll sichtbar */
    .modal-header {
      flex-wrap: wrap; gap: 5px; align-items: flex-start;
      padding: calc(0.55rem + env(safe-area-inset-top)) 0.8rem 0.55rem;
      position: sticky; top: 0; z-index: 5; background: var(--card);
      border-bottom: 1px solid var(--border);
    }
    .modal-header h2 { font-size: 15px; width: 100%; line-height: 1.25; }
    .modal-header .actions-bar { flex-wrap: wrap; gap: 5px; width: 100%; }
    .modal-header .actions-bar .btn { font-size: 12px; padding: 6px 8px; min-height: 34px; }

    /* Dokument auf Bildschirmbreite, nichts laeuft raus */
    .modal-body, #print-area { overflow-x: hidden; padding: 0.55rem; }
    #print-area .doc-sheet {
      padding: 0.9rem !important; width: 100% !important; box-sizing: border-box;
      box-shadow: none; border: none; overflow-x: hidden; overflow-wrap: anywhere;
    }
    #print-area .doc-sheet > div { min-width: 0; }
    #print-area .doc-sheet > div:first-child { flex-wrap: wrap; gap: 12px; }
    #print-area .doc-sheet [style*="position:fixed"] {
      position: static !important; padding-left: 0 !important; padding-right: 0 !important;
      box-sizing: border-box;
    }

    /* Positions-Tabelle: normale Tabelle, fest auf 100% Breite verkleinert */
    #print-area .doc-sheet table { table-layout: fixed; width: 100% !important; min-width: 0 !important; font-size: 10px; }
    #print-area .doc-sheet th,
    #print-area .doc-sheet td { padding: 4px 4px; white-space: normal; overflow-wrap: break-word; vertical-align: top; }
    #print-area .doc-sheet th { font-size: 9px; line-height: 1.15; }
    #print-area .doc-sheet th span { font-size: 9px !important; line-height: 1.15 !important; }
    #print-area .doc-sheet th span ~ span { font-size: 7.5px !important; }
  }