/* OfficeBau – Handy-Ansicht: schlicht, kompakt, mit dem Daumen bedienbar.
   Gilt nur bis 760 px Breite; am PC ändert sich nichts. */

/* Am PC unsichtbar */
.tabbar, .m-savebar, .pt-mt, .m-only, .m-lbl { display: none; }
.pt-f { display: contents; }

@media (max-width: 760px) {
  /* ---------- Grundlage ---------- */
  /* 16 px in Feldern: sonst zoomt das iPhone beim Antippen hinein und man muss wischen */
  input, select, textarea { font-size: 16px; }
  /* Nie breiter als der Bildschirm (sonst muss man seitlich wischen) */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell > div { min-width: 0; }
  body { overflow-x: clip; }
  body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .main { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  h1, .list-head h1, .dash-head h1, .doc-title h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
  .m-only { display: inline; }
  .m-hide, .hide-sm, .hint-line { display: none !important; }
  .card { border-radius: 14px; }
  .btn { height: 40px; }
  .btn.sm { height: 34px; }

  /* Kopfzeile oben schlanker */
  .topbar { padding: 8px 12px; min-height: 52px; }
  .trial-bar { padding: 8px 12px; font-size: 13px; gap: 8px; }
  .trial-bar .btn { height: 32px; }

  /* ---------- Menüleiste unten ---------- */
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(15, 20, 30, .06);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px;
    border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted);
    border-radius: 10px; text-decoration: none !important; cursor: pointer;
  }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--accent); }
  .tabbar a.active svg { background: var(--accent-soft); border-radius: 99px; padding: 2px 12px; box-sizing: content-box; margin: -2px 0; }
  /* Im Editor ersetzt die Speichern-Leiste die Menüleiste */
  .shell:has(.main.wide-page) .tabbar { display: none; }

  /* Seitliches Menü als Schublade über der Menüleiste */
  .side { width: min(300px, 86vw); z-index: 60; }
  .shell.nav-open::after { z-index: 55; }
  .support-btn { margin-bottom: 8px; }

  /* ---------- Seitenköpfe ---------- */
  .page-head, .list-head, .dash-head { margin-bottom: 12px; gap: 10px; align-items: flex-start; }
  .page-head .sub { display: none; }
  .dash-head .muted { font-size: 13px; }
  .page-head > .row, .list-head .toolbar { width: 100%; flex-wrap: nowrap; }
  .page-head > .row .btn { flex: 1; }
  .list-head .toolbar .btn.primary { margin-left: auto; }
  .tb { width: 40px; height: 40px; }
  .list-head .count { display: block; font-size: 13px; margin: 2px 0 0; }

  /* Summen: kompakte, wischbare Leiste statt großer Kästen */
  .sumbar { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0 -12px 10px; padding: 0 12px; }
  .sumbar::-webkit-scrollbar { display: none; }
  .sum-item { flex: none; min-width: 132px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
  .sum-item span { font-size: 10.5px; }
  .sum-item b { font-size: 16px; }

  /* Filter-Chips in einer Zeile wischbar, Suche volle Breite */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; width: calc(100% + 24px); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; height: 34px; }
  .search, .searchbox { max-width: none; width: 100%; }
  .row:has(> .chips) { gap: 8px; }
  .row:has(> .chips) .spacer { display: none; }
  .list-tools { gap: 8px; }
  .seg { overflow-x: auto; width: 100%; }
  .seg button { white-space: nowrap; }

  /* ---------- Listen als Karten ---------- */
  .table-wrap { overflow: visible; }
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tfoot { display: block; }
  table.list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.list tr:last-child { border-bottom: 0; }
  table.list td { display: block; padding: 0; border: 0; min-width: 0; }
  table.list td.r { text-align: left; }
  table.list tbody tr.click:active { background: var(--surface-2); }
  /* Zeilen mit Kennzeichnung: Name links, Betrag rechts, darunter Nummer und Status */
  table.list tr:has(.m-main) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main amt act" "no st act"; }
  td.m-main { grid-area: main; }
  td.m-main .strong, td.m-main > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  td.m-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  td.m-amt { grid-area: amt; text-align: right !important; font-weight: 700; }
  td.m-no { grid-area: no; font-size: 12.5px; color: var(--muted); font-weight: 500; }
  td.m-no .strong, td.m-no b { display: inline; font-weight: 600; }
  td.m-no small { display: inline; margin-left: 4px; }
  td.m-st { grid-area: st; justify-self: end; }
  td.m-act { grid-area: act; align-self: center; margin-right: -8px; }
  td.m-act .row-more { opacity: .6; }
  table.list tr:has(.m-main):not(:has(.m-no)) { grid-template-areas: "main amt act" "main st act"; }
  td.ell { max-width: none; }
  /* Leere Liste */
  table.list tr:has(.empty) { display: block; }
  .pager { gap: 10px; padding: 10px; }
  .pager > label { display: none; }

  /* ---------- Übersicht ---------- */
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .quick-item { padding: 10px 12px; gap: 10px; }
  .quick-item b { font-size: 14px; }
  .quick-item small { font-size: 12px; }
  .qi { width: 34px; height: 34px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px 14px; gap: 4px; }
  .stat .value { font-size: 19px; }
  .stat .foot { font-size: 12px; }
  .card-pad { padding: 14px; }
  .setup { padding: 14px; }

  /* ---------- Formulare & Dialoge ---------- */
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .form-grid > * { grid-column: span 2; }
  .form-grid > .span-1 { grid-column: span 1; }
  label.field { gap: 4px; font-size: 12.5px; }
  input, select { padding: 9px 11px; }
  textarea { padding: 9px 11px; }
  /* Dialoge als Blatt von unten, volle Breite */
  dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  dialog.wide, dialog.xwide { width: 100vw; }
  dialog[open] { animation: sheet .22s ease-out; }
  @keyframes sheet { from { transform: translateY(60px); } }
  .dlg-head { padding: 14px 16px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .dlg-body { padding: 14px 16px; max-height: calc(92vh - 140px); }
  .dlg-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .dlg-foot .btn { flex: 1; height: 44px; }

  /* Aktionsmenü (⋯) als Blatt von unten */
  .ctx { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); min-width: 0; max-height: 70vh; overflow-y: auto; border-radius: 16px; padding: 6px 0; }
  .ctx-item { padding: 13px 18px; font-size: 15.5px; }
  /* Artikel-Vorschläge passen auf den Bildschirm */
  .sug { left: 8px !important; right: 8px; width: auto !important; max-height: 45vh; }
  .combo-list { max-height: 50vh; }

  /* ---------- Dokument-Editor ---------- */
  .doc-top { margin-bottom: 10px; gap: 8px; }
  .doc-title { gap: 6px 8px; }
  .doc-title .badge { height: 22px; padding: 0 8px; }
  .save-state { width: 100%; font-size: 12.5px; }
  .doc-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .doc-actions::-webkit-scrollbar { display: none; }
  .doc-actions .seg-toggle { flex: none; }
  /* Speichern/Abbrechen/Vorschau übernimmt die Leiste unten */
  .doc-actions [data-act="save"], .doc-actions [data-act="cancel"], .doc-actions [data-act="preview"] { display: none; }
  .doc-actions .btn { height: 38px; padding: 0 12px; }
  .doc-side { display: none; }
  .doc-layout { display: block; }
  .dm { gap: 10px; }
  .dm-card { padding: 14px; border-radius: 14px; }
  .dm-top { gap: 14px; margin-bottom: 4px; }
  .dm-h { font-size: 15px; margin-bottom: 8px; }
  .dm-label { font-size: 13.5px; margin-top: 12px; gap: 4px; }
  .dm-label-row { margin: 12px 0 4px; }
  .dm-label-row .btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .terms-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Kunde */
  .cust-card { flex-direction: column; padding: 12px; gap: 10px; }
  .cust-acts { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .cust-acts .btn { flex: 1; }

  /* Informationsblock: zwei Spalten, Beschriftung klein über dem Feld */
  .ib { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ib-row { display: flex; flex-direction: column; gap: 3px; }
  .ib-row:last-child { grid-column: 1 / -1; }
  .ib-label { min-height: 0; padding: 0; background: none; font-size: 12px; font-weight: 600; color: var(--muted); }
  .ib-val input, .ib-val select { height: 40px; }
  .ib-static { min-height: 40px; font-size: 14px; padding: 0 10px; }

  /* Positionen als kompakte Karten */
  .pos-head { margin-bottom: 4px; }
  .pt { border-top: 0; display: flex; flex-direction: column; gap: 8px; }
  .pt-head { display: none !important; }
  .pt-body { display: flex; flex-direction: column; gap: 8px; }
  .pt-row { gap: 8px !important; padding: 10px !important; border: 1px solid var(--line) !important; border-radius: 12px; background: var(--surface); }
  .pt-row .pt-handle, .pt-row .pt-pos { display: none !important; }
  .pt-row input, .pt-row select, .pt-row textarea { padding: 8px 10px; }
  .pt-row.k-item {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
      "desc desc desc desc desc more"
      "qty qty unit unit price price"
      "d2 d2 d2 d2 d2 d2"
      "mt mt mt tot tot tot";
  }
  .pt-row.k-item.m-open {
    grid-template-areas:
      "desc desc desc desc desc more"
      "qty qty unit unit price price"
      "art art vat vat disc disc"
      "d2 d2 d2 d2 d2 d2"
      "mt mt mt tot tot tot";
  }
  .pt-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .m-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); padding-left: 2px; }
  .pt-row.k-item .pt-desc { grid-area: desc !important; }
  .pt-row.k-item .pt-desc input { font-weight: 600; }
  .pt-row.k-item > [data-more] { grid-area: more !important; justify-self: end; align-self: center; }
  .f-qty { grid-area: qty; } .f-unit { grid-area: unit; } .f-price { grid-area: price; }
  .f-art, .f-vat, .f-disc { display: none; }
  .m-open .f-art { display: flex; grid-area: art; } .m-open .f-vat { display: flex; grid-area: vat; } .m-open .f-disc { display: flex; grid-area: disc; }
  .pt-row.k-item .pt-desc2 { grid-area: d2 !important; min-height: 38px; font-size: 14px; }
  .pt-row.k-item [data-total] { grid-area: tot; align-self: center; padding: 0 !important; font-size: 16px; }
  .pt-mt { display: block; grid-area: mt; justify-self: start; align-self: center; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
  /* Überschrift, Freitext, Zwischensumme, Seitenumbruch */
  .pt-row.k-title, .pt-row.k-text, .pt-row.k-break, .pt-row.k-sub { grid-template-columns: minmax(0, 1fr) auto !important; }
  .pt-row.k-title > div:empty, .pt-row.k-text > div:empty, .pt-row.k-break > div:empty { display: none; }
  .pt-span, .pt-span-sub { grid-column: 1 !important; }
  .k-sub [data-subamt] { grid-column: 1; grid-row: 2; text-align: left; padding: 0 2px !important; }
  .k-sub > [data-more] { grid-column: 2; grid-row: 1; }
  .pt-row.k-title > [data-more], .pt-row.k-text > [data-more], .pt-row.k-break > [data-more] { grid-column: 2; grid-row: 1; align-self: center; }
  /* Werkzeuge unter den Positionen */
  .pt-tools { gap: 6px; padding: 10px 0 2px; }
  .pt-tools .split { flex: 1 1 100%; }
  .pt-tools .split .btn:first-child { flex: 1; height: 44px; }
  .pt-tools .split-arrow { height: 44px; width: 48px; }
  .pt-tools .tb { width: 44px; height: 38px; }
  .pt-tools .spacer { display: none; }
  .pt-discount { justify-content: flex-start; }
  .pt-sums { max-width: none; margin-top: 8px; }

  /* Feste Leiste unten: Gesamt + Vorschau + Speichern */
  .m-savebar {
    display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(15, 20, 30, .08);
  }
  .m-savebar small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.1; }
  .m-savebar b { font-size: 17px; }
  .m-savebar .btn { height: 44px; padding: 0 14px; }
  .m-savebar .btn.primary { padding: 0 18px; }

  /* Vorschau-Seite */
  .print-bar { padding: 8px 12px; gap: 8px; }
  .print-actions { width: 100%; }
  .print-actions .btn { flex: 1; }
}