/* BAY-Food WWS – Aufbau der Bestelloberfläche für unterwegs.

   Diese Datei wird von zwei Programmen benutzt:
     mobile/index.html  – die eigenständige Tablet-App des Außendienstes
     index.html         – das Büroprogramm, für die Feldansicht auf dem Handy

   Deshalb stehen hier ausschließlich eigene Klassen. Alles, was global wirkt
   (Schriftart, Abstände, Eingabefelder), bleibt in mobile/mobile.css – sonst
   würde die Tablet-App das ganze Büroprogramm umstylen. */

/* ── Bestellmaske ────────────────────────────────────────────────────────────
   Quer (Tablet in der Hand des Außendienstes) stehen Warenkorb und Katalog
   nebeneinander. Hochkant wird über die Umschalter oben gewechselt, damit auf
   schmalen Geräten nichts gequetscht wird. */
.split { display: flex; flex: 1; min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; }
.pane-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

@media (min-width: 900px) {
  .split .cart { flex: 0 0 40%; max-width: 480px; border-right: 1px solid #e5e7eb; background: #fff; }
}

/* Startseite: zwei Kacheln nebeneinander auf dem Handy, vier auf dem Tablet.
   Feste Spaltenzahlen statt auto-fill – die Kacheln sind Wege in die Arbeit und
   sollen immer gleich groß danebenliegen, nicht je nach Fenster springen. */
.homegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .homegrid { grid-template-columns: repeat(4, 1fr); } }

/* Auf einem Tablet quer liegen Zahlen und nächste Läden nebeneinander: sonst
   steht die halbe Fläche leer und die Ladenliste rutscht unter den Rand. */
.homecols { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 900px) { .homecols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* Die Schublade kommt von links herein statt einfach dazustehen: die Bewegung
   sagt, wo sie herkommt und wohin sie wieder verschwindet. */
.drawer { animation: drawer-ein .18s ease-out; box-shadow: 4px 0 24px rgba(0,0,0,.35); }
@keyframes drawer-ein { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* Kacheln und Ladenliste: so viele Spalten, wie die Breite hergibt */
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
/* Auf dem Handy wird der Abstand zwischen den Ladenkarten kleiner – so passen
   mehr Läden auf den Bildschirm, ohne dass es gedrängt wirkt. */
@media (max-width: 560px) { .shopgrid { gap: 6px; } }

/* Bedienelemente mindestens 44 px – mit Handschuhen im Laden bedienbar */
.step { display: inline-flex; align-items: center; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.step button { width: 46px; height: 44px; border: none; background: #638f1c; color: #fff;
  font-size: 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.step button.del { background: #e11d48; }
.step .qty { min-width: 62px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #111827; font-size: 16px; font-weight: 800; }

/* ── Feldansicht im Büroprogramm ─────────────────────────────────────────────
   Dort gilt die Büro-Gestaltung; nur innerhalb dieser Hülle braucht es die
   Tablet-Regeln. Die 16 px sind kein Geschmack, sondern Pflicht: bei kleinerer
   Schrift zoomt iOS beim Antippen eines Eingabefeldes in die Seite hinein. */
.feldansicht { position: fixed; inset: 0; z-index: 5000; background: #f8fafc; }
.feldansicht input,
.feldansicht button,
.feldansicht select,
.feldansicht textarea { font-family: inherit; font-size: 16px; }
.feldansicht button:active { transform: scale(0.98); }
.feldansicht input[type=number] { -moz-appearance: textfield; }
.feldansicht input[type=number]::-webkit-outer-spin-button,
.feldansicht input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feldansicht input:focus {
  outline: none;
  border-color: #638f1c !important;
  box-shadow: 0 0 0 3px rgba(99, 143, 28, 0.15);
}