/* Kassenoberfläche.
 *
 * Ausgelegt auf einen Touchmonitor am Tresen, quer, ab 1024 px. Auf einem
 * Tablet hochkant stapeln sich die drei Spalten (siehe ganz unten).
 *
 * Zwei Entscheidungen bestimmen das Aussehen:
 *
 * 1. GROSSE FLÄCHEN. Jede Taste ist mindestens 48 px hoch. Am Tresen wird
 *    mit dem Finger getippt, oft in Eile, gelegentlich mit Handschuh. Eine
 *    Kachel, die man zweimal treffen muss, kostet mehr als der Platz, den
 *    sie spart.
 *
 * 2. WENIG FARBE, AUSSER WO ES ZÄHLT. Rot ist dem TSE-Ausfall und Fehlern
 *    vorbehalten, Grün dem Abschließen. Wäre die Oberfläche bunt, ginge
 *    der rote Balken darin unter — und genau der ist die eine Farbe, die
 *    jemand sehen muss.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dunkel: #2d394b;
  --dunkler: #232d3c;
  --rand: #d7dce3;
  --grau: #6b7280;
  --hell: #f3f4f6;
  --rot: #b91c1c;
  --rot-hell: #fee2e2;
  --gruen: #047857;
  --gelb: #d97706;
  --gelb-hell: #fef3c7;
}

html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #1f2937;
  background: var(--hell);
  display: flex;
  flex-direction: column;
  /* Textauswahl aus: Beim Tippen auf einer Touchfläche markiert man sonst
     dauernd Text, und die blaue Markierung bleibt stehen. */
  -webkit-user-select: none;
  user-select: none;
}

body.wartet { cursor: progress; }
body.wartet button { pointer-events: none; opacity: 0.6; }

/* ===================== Balken ===================== */

.modusbalken {
  background: var(--gelb-hell);
  border-bottom: 1px solid var(--gelb);
  color: #78350f;
  padding: 6px 14px;
  font-size: 13px;
  text-align: center;
}

.tse-balken {
  padding: 10px 14px;
  font-weight: 600;
  text-align: center;
  background: var(--rot);
  color: #fff;
}
.tse-balken.simulation { background: #4c1d95; }
.tse-balken[hidden] { display: none; }

/* ===================== Kopf ===================== */

.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--dunkel);
  color: #fff;
  padding: 9px 14px;
}

.kopf-links, .kopf-rechts { display: flex; align-items: center; gap: 12px; }
.kassenname { font-weight: 600; }
.seriennr, .bediener { font-size: 12px; opacity: 0.75; }

/* --- Firmenlogo ------------------------------------------------------
   Feste Kachel, immer gleich groß, ob mit Bild oder ohne. Damit sitzt
   der Rest der Kopfzeile an derselben Stelle, sobald ein Betrieb sein
   Logo hinterlegt — und die Kachel nimmt jedes Seitenverhältnis auf,
   ohne das Bild zu verzerren (`object-fit: contain`).                  */
.firmenzeichen {
  flex: none;
  /* Feste Höhe, wachsende Breite: Ein Logo ist meist breiter als hoch,
     und in einer quadratischen Kachel bliebe davon ein Briefmarkenbild
     übrig. Die Höhe bleibt fest, damit die Kopfzeile nicht springt. */
  height: 40px;
  min-width: 40px;
  max-width: 150px;
  padding: 2px 4px;
  border-radius: 6px;
  /* Weiß hinter dem Logo: Die meisten Logos sind für hellen Grund
     gezeichnet und verschwinden sonst im dunklen Kopfbalken. */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Die Höhe führt, die Breite folgt dem Seitenverhältnis. Über
   `max-height` allein käme ein SVG ohne width/height-Attribute nicht
   heraus: Es hat keine eigene Größe, nur ein Verhältnis — und in einer
   Kachel, deren Breite sich erst aus dem Inhalt ergibt, fiele es auf
   Briefmarkengröße zusammen. */
.firmenzeichen img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Der Platzhalter, solange kein Logo hinterlegt ist: der
   Anfangsbuchstabe des Betriebs auf gestricheltem Rahmen. Gestrichelt,
   weil es eine offene Stelle ist und nicht das Ergebnis. */
.firmenzeichen.leer {
  width: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.kopf-namen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  min-width: 0;
}
.firmenname {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kassenzeile { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.kassenzeile .kassenname { font-size: 12px; opacity: 0.85; }

/* ===================== Raster ===================== */

.raster {
  flex: 1;
  display: grid;
  /* Bon | Artikel | Tastenfeld. Der Bon links, weil dort der Blick
     zuerst hinfällt und weil der Kunde von der Seite mitliest. */
  grid-template-columns: 340px 1fr 220px;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}

.raster > section {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  /* Beide Nullen sind nötig: Ein Rasterfeld ist von sich aus so breit
     wie sein längster Inhalt und läuft sonst über die Spalte hinaus —
     die Artikelkacheln schöben sich unter die Nachbarspalte. */
  min-height: 0;
  min-width: 0;
}

/* ===================== Bon ===================== */

.bonkopf {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
}
#bon-status { font-weight: 400; font-size: 12px; color: var(--grau); }

.positionen {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 4px 0;
  min-height: 0;
}

.position {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #f0f2f5;
}
.pos-links { flex: 1; min-width: 0; }
.pos-name { font-weight: 500; }
.pos-detail { font-size: 12px; color: var(--grau); }
.pos-rabatt { font-size: 12px; color: var(--gruen); }
.pos-betrag { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Mengenänderung an der Zeile: [−] 2 [+] */
.pos-menge {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.mengentaste {
  /* Dieselben 32 px wie beim ×. Zwischen Minus und Plus liegt der
     Mengenstand, sonst wären zwei gleich aussehende Tasten direkt
     nebeneinander — und ein Fehlgriff ändert die Menge in die falsche
     Richtung, ohne dass es auffällt. */
  width: 32px;
  height: 32px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.mengentaste:hover { background: var(--hell); }
.mengentaste:active { background: #e4e7eb; }

.mengenstand {
  min-width: 44px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pos-weg {
  border: none;
  background: none;
  color: var(--grau);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  /* 32 px Trefferfläche — kleiner lässt sich das × am Tresen nicht
     zuverlässig treffen, und danebentippen entfernt die falsche Zeile. */
  width: 32px;
  height: 32px;
}
.pos-weg:hover { color: var(--rot); }

.bonsumme {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-top: 2px solid var(--dunkel);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.zahlungen { padding: 0 12px; }
.zahlung {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

.offen, .rueckgeld {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.offen { background: var(--gelb-hell); color: #78350f; }
.rueckgeld { background: #d1fae5; color: #065f46; font-size: 19px; }

/* ===================== Artikel ===================== */

.suchzeile {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--rand);
}
#suche {
  flex: 1;
  font: inherit;
  font-size: 16px; /* 16px verhindert das Hineinzoomen auf iOS. */
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 5px;
  -webkit-user-select: text;
  user-select: text;
}
#suche:focus { outline: 2px solid var(--dunkel); outline-offset: -1px; }

.warengruppen {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rand);
}
.wg {
  font: inherit;
  white-space: nowrap;
  padding: 7px 13px;
  border: 1px solid var(--rand);
  border-bottom: 3px solid var(--rand);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.wg.aktiv { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }

.artikelraster {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  padding: 10px;
  align-content: start;
  min-height: 0;
}

.kachel {
  font: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  /* 78 px: hoch genug für zwei Zeilen Name plus Preis, ohne dass das
     Raster auf einem 1024er-Monitor scrollt. */
  min-height: 78px;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--rand);
  border-top: 3px solid var(--dunkel);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.kachel:active { background: var(--hell); }
.kachel-bild {
  width: 100%;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}
.kachel-name { font-weight: 600; font-size: 14px; }
.kachel-preis {
  font-size: 13px;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

.leer { padding: 20px; color: var(--grau); text-align: center; }

/* ===================== Aktionen ===================== */

.aktionsspalte { padding: 10px; gap: 10px; }

.mengenfeld { display: flex; align-items: center; gap: 8px; }
.mengenfeld label { font-size: 13px; color: var(--grau); }
#menge {
  flex: 1;
  /* min-width: 0 gegen die Voreinstellung `auto` für Flex-Kinder: Ein
     <input> bringt eine Eigenbreite von rund 20 Zeichen mit, und mit
     `auto` darf es darunter nicht schrumpfen. Es ragte dadurch über die
     Spalte hinaus — und weil die Zahl rechtsbündig steht, stand die
     eingegebene Menge außerhalb des sichtbaren Bereichs. Das Feld sah
     leer aus, obwohl der Wert drin war. */
  min-width: 0;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  text-align: right;
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: text;
  user-select: text;
}

.tastenfeld {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.tastenfeld button {
  font: inherit;
  font-size: 19px;
  padding: 12px 0;
  border: 1px solid var(--rand);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.tastenfeld button:active { background: var(--hell); }

.aktionen { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }

.knopf {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--dunkel);
  border-radius: 5px;
  background: #fff;
  color: var(--dunkel);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.knopf:hover { background: var(--hell); }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }
.knopf.schmal { padding: 5px 10px; font-size: 13px; border-color: rgba(255,255,255,0.35); color: #fff; background: transparent; }
.knopf.schmal:hover { background: rgba(255,255,255,0.12); }

.knopf.gross { padding: 15px; font-size: 17px; font-weight: 600; }
.knopf.bar { background: var(--dunkel); color: #fff; }
.knopf.karte { background: var(--dunkler); color: #fff; border-color: var(--dunkler); }
.knopf.fertig { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.knopf.abbruch { border-color: var(--rot); color: var(--rot); }

/* ===================== Meldungen ===================== */

.meldungen {
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: min(420px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 50;
}

.meldung {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 6px;
  border-left: 4px solid;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
  font-size: 14px;
  -webkit-user-select: text;
  user-select: text;
}
.meldung span { flex: 1; }
.meldung.fehler  { border-color: var(--rot);   background: var(--rot-hell); }
.meldung.hinweis { border-color: var(--gelb);  background: var(--gelb-hell); }
.meldung.erfolg  { border-color: var(--gruen); background: #d1fae5; }

.meldung-zu {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  width: 24px;
}

/* ===================== Virtueller Bondruck =====================
   Nur in Schulung und Entwicklung sichtbar (siehe kasse/index.php).

   Die Bahn liegt ÜBER der Oberfläche und schiebt sie nicht zur Seite:
   Wer sie zumacht, soll dieselbe Kasse wiederfinden, die er vorher
   hatte — ohne dass Artikelraster und Tastenfeld zwischendurch die
   Breite gewechselt haben.                                            */

.bondrucker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 92vw);
  background: var(--dunkler);
  display: flex;
  flex-direction: column;
  /* Über den Meldungen (50), unter den Dialogen (100): Eine
     Kartenzahlung darf nicht hinter der Papierbahn verschwinden. */
  z-index: 60;
  box-shadow: -6px 0 18px rgba(0, 0, 0, 0.28);
}
.bondrucker[hidden] { display: none; }

/* Solange die Bahn offen ist, rückt ALLES aus ihrem Weg.
   Der erste Versuch ließ das Raster stehen, damit es seine
   Spaltenbreiten nicht wechselt — dahinter lag dann die Aktionsspalte
   mit „Bar", „Karte" und „Abschließen". Eine Kasse, an der man mit
   offener Papierbahn nicht kassieren kann, ist der schlechtere Tausch:
   Die Artikelkacheln brechen um, das ist alles. */
body.bondruck-offen .meldungen { right: calc(min(360px, 92vw) + 12px); }
body.bondruck-offen .kopf,
body.bondruck-offen .modusbalken,
body.bondruck-offen .tse-balken,
body.bondruck-offen .raster { padding-right: calc(min(360px, 92vw) + 14px); }

.bondrucker-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.bondrucker-modus {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.bondrucker-knoepfe { display: flex; gap: 6px; }
.bondrucker-kopf .knopf {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.bondrucker-papier {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bondrucker-leer {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

/* Ein Abzug: Kopfzeile, der Beleg selbst, darunter die Abrisskante. */
.bon-abzug {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.bon-abzug.neu { animation: einlaufen 0.35s ease-out; }
@keyframes einlaufen {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bon-abzug.neu { animation: none; }
}

.abzug-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px dotted #9aa2ad;
  font-size: 12px;
  color: var(--grau);
}
/* Hier NICHT `.schmal`: Das ist die Fassung für den dunklen Kopfbalken
   (weiße Schrift auf durchsichtigem Grund) und wäre auf dem weißen
   Papier unsichtbar. */
.abzug-kopf .knopf { padding: 3px 8px; font-size: 11px; }
.abzug-knoepfe { display: flex; gap: 5px; flex: none; }

/* Der Umschalter im Kopfbalken zeigt an, ob die Bahn Papier bekommt. */
.knopf.schmal.gewaehlt {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  font-weight: 600;
}

/* Der Beleg selbst, in genau der Fassung, die auch der Drucker bekommt.
   Die Höhe setzt kasse.js nach dem Laden — ein Bon ist mal zehn und mal
   sechzig Zeilen lang, und ein Rollbalken im Rollbalken ist unlesbar. */
.bon-abzug iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Die Abrisskante. Weiße Zacken auf dunklem Grund — das Papier endet
   gezackt, wie an der Abrisskante des Bondruckers. */
.abzug-kante {
  height: 6px;
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(-45deg, transparent 50%, #fff 50%);
  background-size: 8px 6px;
  background-repeat: repeat-x;
}

/* ===================== Overlays ===================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.overlay[hidden] { display: none; }

.overlay-kasten {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  width: min(440px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.overlay-kasten h2 { font-size: 17px; }
.overlay-kasten p { color: var(--grau); font-size: 14px; }
.overlay-kasten .gross {
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}

.overlay-kasten input {
  font: inherit;
  font-size: 18px;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 5px;
  -webkit-user-select: text;
  user-select: text;
}

.dialog-knoepfe { display: flex; gap: 8px; }
.dialog-knoepfe .knopf { flex: 1; }

/* --- Das Zahlungsstatus-Fenster -------------------------------------
   Die wichtigste Zahl gross und allein in der Mitte. Am Tresen wird sie
   aus zwei Metern Abstand gelesen, oft im Vorbeigehen — 44 px ist die
   Groesse, bei der das ohne Hinsehen geht.

   Der farbige Streifen oben traegt die Bedeutung doppelt: Gruen heisst
   fertig, Gelb heisst „hier ist noch etwas zu tun". Farbe allein
   genuegt nicht, deshalb steht es zusaetzlich als Text darunter.       */
.zahlstatus { gap: 6px; }

.zahlstatus h2 { font-size: 15px; color: var(--grau); font-weight: 500; }
.zahlstatus > p { margin: 0; }

.zahlstatus-hauptzahl {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.zahlstatus-hauptzahl-text {
  font-size: 15px !important;
  font-weight: 600;
  color: #1f2937 !important;
}

.zahlstatus.rueckgeld .zahlstatus-hauptzahl { color: var(--gelb); }
.zahlstatus.offen     .zahlstatus-hauptzahl { color: var(--gelb); }
.zahlstatus.fertig    .zahlstatus-hauptzahl { color: var(--gruen); }

/* Der Streifen sitzt am Kasten, nicht an der Zahl: Er soll den ganzen
   Zustand faerben und nicht nur eine Zeile. */
.zahlstatus { border-top: 5px solid var(--rand); }
.zahlstatus.rueckgeld { border-top-color: var(--gelb); }
.zahlstatus.offen     { border-top-color: var(--gelb); }
.zahlstatus.fertig    { border-top-color: var(--gruen); }

.zahlstatus-zeilen {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  margin: 8px 0 2px;
  font-size: 14px;
  text-align: left;
}
.zahlstatus-zeilen dt { color: var(--grau); }
.zahlstatus-zeilen dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.zahlstatus-zeilen:empty { display: none; }

/* Dieselbe Größe wie `.knopf.gross`, aber ohne dessen Namen — siehe den
   Kommentar am Knopf in index.php. */
.zahlstatus-weiter {
  padding: 15px;
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
}

/* --- Kartendialog ---------------------------------------------------
   Die Kartenart als Knopfreihe, nicht als Ausklappliste: Am Tresen wird
   getippt, und eine Auswahlliste braucht auf einem Touchgeraet zwei
   Beruehrungen statt einer.                                            */
.overlay-kasten label {
  font-size: 13px;
  color: var(--grau);
  text-align: left;
}

/* Die Knopfreihe der Kartenarten (.markenwahl, #karte-marken, .knopf.marke)
   ist mit 1.17 entfallen. Am Tresen wird die Kartenart nicht mehr gewaehlt
   — sie kommt aus dem Terminal. Siehe KARTEN_MARKEN in lib/kasse.php.     */

#karte-grundfeld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#karte-grundfeld[hidden] { display: none; }
#karte-grundfeld input { width: 100%; box-sizing: border-box; }

/* Eine ohne Terminal erfasste Zahlung wird am Bon hervorgehoben. */
.zahlung .manuell { color: var(--rot); }

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3px solid var(--rand);
  border-top-color: var(--dunkel);
  border-radius: 50%;
  animation: dreh 0.9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* ===================== Einrichtungsseite ===================== */

body.einrichtung { display: block; padding: 30px 16px; }
.hinweisblatt {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 26px 30px;
}
.hinweisblatt h1 { font-size: 20px; margin-bottom: 10px; }
.hinweisblatt p { margin-bottom: 12px; }
.hinweisblatt ul { margin: 0 0 14px 18px; }
.hinweisblatt li { margin-bottom: 7px; }
.hinweisblatt li.stufe-pflicht { color: var(--rot); font-weight: 600; }
.hinweisblatt li.stufe-wichtig { color: #78350f; }

/* ===================== Schmale Bildschirme ===================== */

/* Unter 1100 px wandert das Tastenfeld unter den Bon: Auf einem Tablet
   quer ist sonst keine Spalte mehr breit genug, um lesbar zu bleiben.

   =====================================================================
   WARUM HIER `.raster > .aktionsspalte` STEHT UND NICHT `.aktionsspalte`
   =====================================================================

   Weiter oben steht `.raster > section { flex-direction: column }`.
   Das ist ein Klassenname PLUS ein Elementname und damit spezifischer
   als ein Klassenname allein — `.aktionsspalte { flex-direction: row }`
   verlor gegen diese Regel, ohne dass irgendetwas gemeldet hätte.

   Die Folge, am 14.08.2026 bei 900 px gemessen: Die Aktionsspalte blieb
   senkrecht, behielt aber das `flex-wrap: wrap` dieser Querlage. In
   einer Spalte heißt `wrap` nicht „Zeilen umbrechen", sondern SPALTEN
   umbrechen — Mengenfeld, Tastenfeld und Aktionen standen deshalb
   nebeneinander statt untereinander, und für das Tastenfeld blieben
   138 px übrig: sechs Zifferntasten zu je 19 px, bei einem eigenen
   Mindestmaß von 48 px (§ 11). Das war der Grund, warum die Kasse
   unter 1100 px nicht bedienbar war — nicht das Tastenfeld selbst. */
@media (max-width: 1100px) {
  .raster {
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr auto;
  }
  .raster > .aktionsspalte {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Zwei Zeilen statt einer: oben Menge und Ziffern, darunter die
     Knöpfe über die volle Breite. In EINER Zeile passt beides nur auf
     einem breiten Tablet — bei 900 px blieben je Knopf 47 px und je
     Zifferntaste 42, beides unter dem eigenen Mindestmaß von 48 px.
     Die `flex-basis`-Werte sind die Umbruchstellen: Sobald Menge und
     Tastenfeld zusammen nicht mehr nebeneinander passen, rutscht das
     Tastenfeld eine Zeile tiefer, statt sich zusammenzuquetschen.

     `min-width: 0` überall, weil Flex-Kinder von sich aus nicht unter
     ihre Inhaltsbreite schrumpfen dürfen — sonst nimmt sich die
     Knopfreihe, was ihre Beschriftungen brauchen, und das Tastenfeld
     bekommt den Rest, auch wenn davon nichts übrig ist. */
  .mengenfeld { flex: 1 1 200px; min-width: 0; }
  .tastenfeld {
    grid-template-columns: repeat(6, 1fr);
    flex: 3 1 380px;
    min-width: 0;
  }
  .aktionen { flex-direction: row; margin-top: 0; flex: 1 1 100%; min-width: 0; }
  .aktionen .knopf { flex: 1; min-width: 0; }
  .tastenfeld button, .aktionen .knopf { min-height: 48px; }

  /* Unter 1100 px ist für die Papierbahn NEBEN der Kasse kein Platz
     mehr: Bliebe sie am Rand, quetschte sie das Artikelraster auf ein
     paar Zentimeter. Sie legt sich deshalb über die ganze Fläche — wer
     sie zumacht, hat die Kasse unverändert wieder. */
  .bondrucker { width: 100%; }
  body.bondruck-offen .meldungen { right: 12px; }
  body.bondruck-offen .kopf,
  body.bondruck-offen .modusbalken,
  body.bondruck-offen .tse-balken,
  body.bondruck-offen .raster { padding-right: 10px; }
  body.bondruck-offen .kopf { padding-right: 14px; }
}

/* Unter 780 px steht alles untereinander: Bon, Artikel, Bedienung.
   =====================================================================
   ACHTUNG BEIM ÄNDERN: Dieser Abschnitt muss NEHMEN, was der 1100er
   oben gegeben hat.
   =====================================================================

   Bis 1.19 tat er das nicht, und deshalb war die Kasse unter etwa
   1100 px unbedienbar. Der 1100er legt die Aktionsspalte quer — sechs
   Zifferntasten nebeneinander, die Aktionsknöpfe in einer Reihe. Das
   ist richtig, solange die Spalte über die volle Breite eines Tablets
   geht. Sobald das Raster einspaltig wird, steht dieselbe Regel in
   einer Spalte von Handybreite: Am 14.08.2026 bei 375 px gemessen
   waren die Zifferntasten 19 px breit (eigener Mindestwert für Touch:
   48 px), die Aktionsreihe 635 px, und das Dokument insgesamt 655 px
   statt 375 — das Artikelraster lag außerhalb des Bildes.

   Beide Regeln werden hier deshalb ausdrücklich zurückgenommen. */
@media (max-width: 780px) {
  /* Untereinander und als Ganzes scrollend — NICHT mit einer 1fr-Zeile.
     Die Reihe `auto 1fr auto` teilt die Höhe des Bildschirms auf; wenn
     Bon und Bedienfeld sie zusammen schon füllen, bekommt die
     1fr-Zeile null. Genau das ist auf einem Handy der Normalfall, und
     die 1fr-Zeile ist ausgerechnet das Artikelraster: Es fiel auf
     Kachelhöhe 44 px zusammen, während Bon und Zifferntasten
     vollständig dastanden. */
  .raster {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
    padding: 8px;
    gap: 8px;
  }

  /* Der Bon darf mitscrollen statt die Hälfte des Bildes zu belegen.
     Die Summe steht ohnehin in der Kopfzeile des Bons. */
  .bonspalte { max-height: 32vh; }

  /* Das Artikelraster bekommt eine Untergrenze, keine Obergrenze: Es
     ist die Fläche, auf die am häufigsten getippt wird.

     Mit `.raster >` geschrieben, weil `.raster > section` weiter oben
     `min-height: 0` setzt — das ist die spezifischere Auswahl und
     gewänne sonst. */
  .raster > .artikelspalte { min-height: 55vh; }

  /* Die Aktionsspalte steht wieder senkrecht. Quer gelegt ist sie eine
     Leiste unter dem Raster; in einer Spalte von Handybreite wäre sie
     eine Leiste aus lauter Zeilenresten.

     `flex-wrap: nowrap` ist dabei der Teil, der nicht offensichtlich ist
     und ohne den nichts davon wirkt: Der 1100er setzt `wrap` für die
     Querlage. Zusammen mit `column` heißt das nicht „Zeilen umbrechen",
     sondern SPALTEN umbrechen — Mengenfeld und Tastenfeld standen
     dadurch nebeneinander, und das Tastenfeld bekam die 66 px, die
     übrig blieben. */
  .raster > .aktionsspalte {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .mengenfeld { flex: 0 0 auto; }

  /* Der Kopf bricht um, statt seitlich hinauszulaufen. */
  .kopf { flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; }
  .kopf-links, .kopf-rechts { flex-wrap: wrap; gap: 8px; min-width: 0; }
  .kopf-rechts { margin-left: auto; }

  /* Zurück auf drei Spalten. Über die volle Breite sind das rund 115 px
     je Taste — deutlich über den 48 px, die die Kasse für sich selbst
     als Mindestmaß gesetzt hat. */
  .tastenfeld { grid-template-columns: repeat(3, 1fr); flex: none; }

  /* Die Aktionsknöpfe zu zweit nebeneinander. In einer Reihe wären es
     sechs auf 375 px; untereinander verbrauchten sie den halben
     Bildschirm und schöben die Artikel aus dem Bild. */
  .aktionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: none;
    margin-top: 0;
    gap: 7px;
  }

  /* Das Mindestmaß, das sich die Kasse selbst gibt (§ 11): Was mit dem
     Finger getroffen werden muss, ist mindestens 48 px hoch. Es steht
     hier und nicht oben, weil auf einem Zeigergerät die kleinere Fläche
     genügt und mehr Zeilen aufs Blatt passen. */
  .tastenfeld button,
  .aktionen .knopf,
  .warengruppen .wg,
  .kopf .knopf { min-height: 48px; }
}

/* --- Die Trefferliste der Kundensuche -------------------------------
   Ein Knopf je Treffer, nicht eine Liste mit einem Knopf daneben: Am
   Tresen ist die ganze Zeile das Ziel, und ein Treffbereich von 44 px
   ist der, bei dem auch mit nassen Fingern nichts danebengeht.

   Die Liste scrollt in sich. Ohne die feste Hoehe waechst der Dialog
   bei zwanzig Treffern ueber den Bildschirm hinaus, und die Knoepfe
   „Schliessen" und „Zuordnung aufheben" waeren nicht mehr erreichbar. */
.trefferliste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
  text-align: left;
}

.trefferliste .hinweis {
  color: var(--grau);
  font-size: 14px;
  padding: 8px 2px;
}

.treffer {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-radius: 5px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.treffer:hover  { background: #f9fafb; }
.treffer:active { background: #f3f4f6; }

.treffer-name   { font-weight: 600; }
.treffer-zusatz { font-size: 13px; color: var(--grau); }