/* Tablet und Handy in der Küche: größere Ziele, engere Kanten.
   Das Raster selbst (Rail → wischbare Leiste) regelt style.css ab 820 px;
   hier stehen nur Küchen-Ergonomie und Dichte. */

@media (max-width: 1100px) {
  main { padding: 14px; }

  /* Alles, was mit Handschuh gedrückt wird, mindestens 48 px */
  .rail button, button, .pl-btn, .pl-step, .laden, select, input, .pl-schalter {
    min-height: 48px;
    font-size: 16px;
  }
  button.laden, .pl-btn { min-height: 48px; }   /* schlägt button.laden aus style.css */
  .rail button { font-size: 15px; padding: 12px 14px; }
  .pl-step { min-width: 52px; }

  /* Wischleisten müssen auch mit breiten Fingern sicher greifbar bleiben. */
  .rail,
  body.nur-pass .kds-grid,
  body.nur-pass .bon-spalten {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: var(--line-stark) var(--panel-2);
  }
  .rail::-webkit-scrollbar,
  body.nur-pass .kds-grid::-webkit-scrollbar,
  body.nur-pass .bon-spalten::-webkit-scrollbar { width: 14px; height: 14px; }
  .rail::-webkit-scrollbar-track,
  body.nur-pass .kds-grid::-webkit-scrollbar-track,
  body.nur-pass .bon-spalten::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 999px; }
  .rail::-webkit-scrollbar-thumb,
  body.nur-pass .kds-grid::-webkit-scrollbar-thumb,
  body.nur-pass .bon-spalten::-webkit-scrollbar-thumb { min-height: 44px; background: var(--line-stark); border: 3px solid var(--panel-2); border-radius: 999px; }

  table { font-size: 14.5px; }
  th, td { padding: 8px 6px; }

  .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .kpi .wert { font-size: 32px; }

  /* Pass: Kacheln füllen die Breite, Zahl und Name skalieren mit der Kachel
     (cqi in style.css). Auf dem Tablet bleibt die Kachel groß — sonst wird aus
     "große Zahl" wieder Kleinschrift, sobald mehr Spalten Platz finden. */
  .kds-grid, .kds-grid.klein { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
  #pass .btn-plus, #pass .btn-minus, #pass .btn-plus5 { min-height: 60px; }
  #pass .gang > summary { min-height: 68px; }

  .legende { max-width: none; font-size: 13.5px; }
}

/* Querformat-Tablet am Pass: große Uhr, viel Kontrast */
@media (max-width: 1200px) and (orientation: landscape) {
  #leitstand .ls-uhr { font-size: clamp(56px, 8vw, 96px); }
  #leitstand .ls-cd-wert { font-size: clamp(40px, 6vw, 72px); }
}

/* Schmale Standalone-Pass-Ansicht: Safe-Area und lange Gangnamen dürfen
   weder unter die Browserleiste noch aus dem Bildschirm laufen. */
@media (max-width: 620px) {
  body.nur-pass .kopf {
    padding-left: max(var(--s-3), env(safe-area-inset-left));
    padding-right: max(var(--s-3), env(safe-area-inset-right));
  }
  body.nur-pass .kopf { padding-top: 5px; padding-bottom: 5px; }
  body.nur-pass .kopf h1 { font-size: 17px; }
  body.nur-pass .pass-ansichtwahl button { min-width: 40px; min-height: 40px; padding-inline: 5px; font-size: 18px; }
  body.nur-pass main {
    padding-left: max(var(--s-3), env(safe-area-inset-left));
    padding-right: max(var(--s-3), env(safe-area-inset-right));
  }
  #pass .gang-titel,
  #pass .gang-meta { min-width: 0; overflow-wrap: anywhere; }
  #pass .gang-meta { max-width: 42%; }
  #pass .dish { min-height: 0; grid-template-rows: auto auto 88px 18px auto auto 26px auto; }
  #pass .dish-btns { gap: 6px; }
  #pass .btn-plus, #pass .btn-minus, #pass .btn-plus5 { min-height: 56px; }
  #pass .btn-special { min-height: 50px; font-size: 15px; }
  #pass .gang > summary { min-height: 64px; padding: 12px 14px; }
  #pass .pass-kopfaktionen .laden { min-height: 48px; padding: 7px 10px; }
  #pass .pass-kopf .pl-zeilenaktion { width: 100%; }
  #pass .pass-kopf .pl-zeilenaktion .laden { flex: 0 0 42px; }
  body.nur-pass.pass-ansicht-smartphone .pass-kopf .pl-zeilenaktion .laden { min-width: 42px; padding-inline: 5px; font-size: 19px; }
  #pass .special-pending { grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: "text remove" "dec count" "inc book"; gap: 6px; padding: 8px; }
  #pass .special-pending-text { grid-area: text; align-self: center; font-size: 14px; line-height: 1.3; }
  #pass .special-pending [data-pending-dec] { grid-area: dec; }
  #pass .special-pending b { grid-area: count; display: grid; place-items: center; min-height: 52px; font-size: 18px; }
  #pass .special-pending [data-pending-inc] { grid-area: inc; }
  #pass .special-pending [data-pending-book] { grid-area: book; }
  #pass .special-pending [data-pending-remove] { grid-area: remove; }
  #pass .special-pending button { min-height: 52px; font-size: 18px; }
  #pass .special-pending button[data-pending-book] { font-size: 15px; }
}

/* Querformat auf kleinen Telefonen: zwei handliche Kacheln statt unnötig
   langer Scrollkarten, weiterhin mit großen Bedienflächen. */
@media (max-width: 700px) and (orientation: landscape) {
  body.nur-pass main { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
  #pass .kds-grid, #pass .kds-grid.klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pass .dish { min-height: 190px; }
  #pass .btn-plus, #pass .btn-minus, #pass .btn-plus5 { min-height: 54px; }
}

/* Manueller Querformat-Schalter: hilft in iOS-Captive-Fenstern, die die
   Geräteausrichtung nicht per Screen-Orientation-API sperren dürfen. */
body.nur-pass.pass-smartphone-quer .kopf,
body.nur-pass.pass-smartphone-quer main {
  width: min(100%, 900px);
  margin-inline: auto;
}
body.nur-pass.pass-smartphone-quer main { padding-inline: 10px; }
body.nur-pass.pass-smartphone-quer #pass .kds-grid,
body.nur-pass.pass-smartphone-quer #pass .kds-grid.klein {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.nur-pass.pass-smartphone-quer #pass .dish { min-height: 190px; }
body.nur-pass.pass-smartphone-quer #pass .btn-plus,
body.nur-pass.pass-smartphone-quer #pass .btn-minus,
body.nur-pass.pass-smartphone-quer #pass .btn-plus5 { min-height: 54px; }