/* =============================================================================
   Tablet (v511) — iPad 11" (820 × 1180) hochkant und quer, Android-Tablets ähnlich.
   Wird als LETZTE Stildatei geladen und überschreibt gezielt.

   HOCHKANT (700–1024 px Breite): die Handy-Bedienung bleibt (untere Leiste, Menü-Schublade),
   aber die Breite wird genutzt — Listen zweispaltig, Tabellen ohne seitliches Schieben.
   QUER (Touch-Gerät quer ab 1000 px, Klasse body.tablet-quer aus tablet.js): die PC-Ansicht mit
   Seitenleiste (seit v512 entscheidet beim Touch-Gerät die AUSRICHTUNG, nicht die Breite), dazu
   fingergerechte Tippflächen.
   ========================================================================== */

/* ---------------------------------------------------------------- HOCHKANT */
@media (min-width: 700px) and (max-width: 1024px) and (pointer: fine), (min-width: 700px) and (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  /* Kundenliste: zweispaltig. Die Regel stand schon in styles.css, wurde aber von der späteren
     Handy-Regel („.hl-liste … flex-direction: column") überschrieben. */
  main.content:has(.hl-liste) > .hl-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .hl-liste > li { min-width: 0; }
  /* Anrufen/Route neben der Karte (galt bisher nur bis 700 px — darüber hingen die Knöpfe lose darunter). */
  .hl-liste > li.hl-mit-tat { display: flex; align-items: stretch; gap: 6px; }
  .hl-liste > li.hl-mit-tat > .hl-zeile { flex: 1 1 auto; min-width: 0; }
  .hl-liste > li.hl-mit-tat .hl-pfeil { display: none; }
  .hl-taten { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
  .hl-tat { flex: 1 1 0; display: flex; align-items: center; justify-content: center; width: 46px; min-height: 36px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--card); --ico: var(--brand-text); }
  .hl-zeile .hl-name, .hl-zeile .hl-unten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .hl-zeile .hl-text { min-width: 0; }

  /* Lieferanten, Themen, Belege-Kacheln: drei statt zwei Spalten, wo Platz ist. */
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Einstellungen: Abschnitte zweispaltig (ausgeklappte gehen über die ganze Breite). */
  main.content:has(> details.setting-acc) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  main.content:has(> details.setting-acc) > :not(details.setting-acc) { grid-column: 1 / -1; }
  main.content:has(> details.setting-acc) > details.setting-acc[open] { grid-column: 1 / -1; }

  /* Fenster (Dialoge) als Karte in der Mitte statt über die ganze Breite. */
  /* Nur einfache Formular-Fenster — Betrachter (PDF, Medien), Scan-Editor und breite Fenster behalten ihre Größe. */
  .modal-backdrop > .modal:not(.modal-doc):not(.modal-wide):not(.media-modal):not(.scan-editor) { max-width: min(680px, calc(100vw - 48px)); }

  /* Projekte (Baustellen): zwei Kacheln nebeneinander, Bild als Streifen oben. */
  .pj-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pj-kachel { flex-direction: column; }
  .pj-bild { flex: 0 0 116px; width: 100%; }

  /* Tabellen (Zeit & Lohn, Lohn, Auswertungen …) ohne seitliches Schieben: engere Zellen,
     Kopfzeilen dürfen umbrechen, Aktionen kleiner. */
  main.content table:not(.rech-tabelle) { font-size: 13px; }
  main.content table:not(.rech-tabelle) th { white-space: normal; line-height: 1.25; }
  main.content table:not(.rech-tabelle) th, main.content table:not(.rech-tabelle) td { padding-left: 6px; padding-right: 6px; }
  main.content table:not(.rech-tabelle) td .link { font-size: 12.5px; margin-right: 6px; white-space: nowrap; }

  /* Belegliste (Angebote, AB, Rechnungen): feste Spaltenbreiten. Vorher drückte ein langer Betreff
     in „Kunde / Betreff" Betrag und Offen auf über 1.100 px — weit hinter den Bildschirmrand. */
  table.rech-tabelle { display: table !important; table-layout: fixed; width: 100%; }   /* eine Handy-Regel macht Tabellen sonst zu Blöcken */
  table.rech-tabelle th:nth-child(1) { width: 96px; } table.rech-tabelle th:nth-child(2) { width: 84px; }
  table.rech-tabelle th:nth-child(4) { width: 78px; } table.rech-tabelle th:nth-child(5) { width: 96px; }
  table.rech-tabelle th:nth-child(6) { width: 92px; } table.rech-tabelle th:nth-child(7) { width: 40px; }
  table.rech-tabelle td.z-kunde { overflow: hidden; }
  table.rech-tabelle td.z-kunde * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.rech-tabelle td.z-betrag, table.rech-tabelle td.z-offen { white-space: nowrap; font-size: 13px; }
  table.rech-tabelle th { white-space: normal; line-height: 1.2; font-size: 11px; }

  /* Eingaben: 16 px Schrift, sonst zoomt das iPad beim Antippen hinein. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em); }
}

/* ---------------------------------------------------------------- QUER (Touch) */
body.tablet-quer {
  /* Seitenleiste etwas schmaler, damit der Inhalt Platz hat; Menüpunkte fingergerecht hoch. */
  --tablet-tipp: 44px;
}
body.tablet-quer nav.side { width: 208px; }
body.tablet-quer nav.side button { min-height: var(--tablet-tipp); }
body.tablet-quer .btn, body.tablet-quer button.btn, body.tablet-quer .tab, body.tablet-quer .chip { min-height: 40px; }
body.tablet-quer input:not([type=checkbox]):not([type=radio]):not([type=range]), body.tablet-quer select, body.tablet-quer textarea { font-size: max(16px, 1em); min-height: 40px; }
body.tablet-quer main.content { padding: 18px 20px; }
/* Was am PC erst beim Darüberfahren erscheint, ist mit dem Finger nicht erreichbar — immer zeigen. */
body.tablet-quer .bu-mehr { opacity: 1; }
body.tablet-quer .mmx-k > .mmx-klapp { opacity: .9; }
/* Die Handy-Leiste unten gehört nicht ins Querformat — dort ist die Seitenleiste da. */
body.tablet-quer .h-leiste { display: none !important; }
body.tablet-quer main.content { padding-bottom: 22px; }
/* Buchhaltung „Weitere": Menü rechtsbündig aufklappen, sonst ragt es am rechten Rand hinaus. */
body.tablet-quer .buch-weitere-menue { left: auto; right: 0; }
/* Kalkulator: randlos über die ganze Fläche (die Quer-Regel oben gab ihm sonst einen Rand). */
body.tablet-quer.view-kalkulator main.content { padding: 0; }
/* Das eingeklappte Menü (Schublade links) warf seinen Schatten ins Bild — ein grauer Streifen am linken Rand. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  body:not(.nav-open) nav.side { box-shadow: none; }
}
/* v512: Lange Kachelnamen („Auftragsbestätigungen") ragten im Schnellzugriff aus der Kachel — Silbentrennung statt Überlauf. */
.home-tile { min-width: 0; }
body.tablet .home-tile { padding-left: 4px; padding-right: 4px; font-size: 12px; }
.home-tile > span:last-child { max-width: 100%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }