/* ============================================================== Grundlagen */
:root {
  --orange: #e8712a;
  --orange-hell: #f08b4d;
  --orange-dunkel: #c95c1d;
  --grau-900: #202124;
  --grau-800: #303134;
  --grau-700: #45464a;
  --grau-500: #8b8d91;
  --grau-300: #d4d6da;
  --grau-200: #e6e8eb;
  --grau-100: #f2f3f5;
  --flaeche: #fafafa;
  --rand: #d9dbdf;
  --gut: #1c8c4a;
  --warn: #c2410c;
  --schatten: 0 1px 3px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .10);
  --kopf-hoehe: 46px;
  --beleg-breite: 33%;
  --radius: 6px;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss IMMER gewinnen, auch gegen eigene display-Regeln
   wie .modal/.login (sonst bleiben Dialoge/Login-Bildschirm sichtbar hängen). */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font: 14px/1.4 "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--grau-900);
  background: var(--grau-800);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.ansicht { display: none; height: 100%; flex-direction: column; }
.ansicht--aktiv { display: flex; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =================================================================== Kopf */
.kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--kopf-hoehe);
  flex: 0 0 var(--kopf-hoehe);
  padding: 0 8px;
  background: var(--grau-200);
  border-bottom: 1px solid var(--rand);
}

.kopf__links { display: flex; gap: 6px; }
.kopf__mitte { flex: 1; text-align: center; font-weight: 600; letter-spacing: .01em; }
.kopf__rechts { display: flex; align-items: center; gap: 6px; }

.kopf-tab {
  background: var(--grau-100);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 6px 12px;
  color: var(--grau-700);
}
.kopf-tab:hover { background: #fff; }
.kopf-tab--aktiv { background: #fff; color: var(--grau-900); font-weight: 600; }

.kopf-uhr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  font-size: 12px;
  color: var(--grau-700);
  font-variant-numeric: tabular-nums;
}

.kopf-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--grau-700);
}
.kopf-icon:hover { background: var(--grau-100); color: var(--grau-900); }

.kopf-zurueck {
  background: var(--grau-100);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 6px 14px;
  color: var(--grau-700);
}
.kopf-zurueck:hover { background: #fff; }
.kopf--schlicht { background: var(--grau-100); }

/* ================================================================== Kasse */
.kasse {
  flex: 1;
  display: flex;
  min-height: 0;
  background: var(--grau-800);
}

/* -------------------------------------------------------------- Belegteil */
.beleg {
  position: relative;
  flex: 0 0 var(--beleg-breite);
  min-width: 0; /* sonst zwingt Inhalt (z. B. Kundenzeile) die Breite über die Vorgabe hinaus (Safari-Flexbug) */
  max-width: 420px; /* verhindert, dass 1/3 auf sehr breiten Bildschirmen ausufert */
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--rand);
  font-size: var(--beleg-schrift, 14px);
}

.beleg__marke {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo art" "nr nr" "meta meta";
  gap: 1px 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--grau-200);
  text-align: center;
  transition: background .15s ease;
}
.beleg--aktiv .beleg__marke {
  background: #fff4e5;
  border-bottom-color: var(--orange);
}
.beleg--aktiv .beleg__nr { color: var(--orange); font-weight: 700; }
.beleg__logo {
  grid-area: logo;
  justify-self: end;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: .02em;
}
.beleg__art { grid-area: art; justify-self: start; font-size: 12px; color: var(--grau-500); align-self: center; }
.beleg__nr { grid-area: nr; font-size: 17px; }
.beleg__meta { grid-area: meta; font-size: 11px; color: var(--grau-500); }

.beleg__kunde {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--grau-200);
  background: var(--grau-100);
}
.beleg__kunde:hover { background: var(--grau-200); }
.beleg__kunde-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--grau-500); }
.beleg__kunde-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.beleg__positionen { flex: 1; overflow-y: auto; min-height: 0; }
.beleg__leer { margin: 28px 16px; text-align: center; color: var(--grau-500); font-size: 13px; }

.position {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 2px 8px;
  min-height: var(--beleg-zeile-hoehe, 0px);
  padding: 7px 12px 7px 8px;
  border-bottom: 1px solid var(--grau-100);
  cursor: pointer;
}
.position:hover { background: var(--grau-100); }
.position--markiert { background: #fdf0e6; }
.position__menge { grid-row: span 2; align-self: center; text-align: center; font-weight: 700; color: var(--orange-dunkel); }
.position__name { font-weight: 500; }
.position__summe { font-weight: 600; font-variant-numeric: tabular-nums; }
.position__detail { grid-column: 2 / -1; font-size: 11px; color: var(--grau-500); font-variant-numeric: tabular-nums; }
.position__notiz { grid-column: 2 / -1; font-size: 11px; color: var(--warn); font-style: italic; }

.beleg__summen { border-top: 1px solid var(--grau-200); padding: 8px 14px; background: var(--grau-100); }
.beleg__summe-zeile { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.beleg__summe-zeile--klein { font-size: 12px; color: var(--grau-700); }
.beleg__summe-zeile--gross { font-size: 22px; font-weight: 700; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--grau-300); }
#beleg-steuer-zeilen { display: block; }
#beleg-steuer-zeilen > div { display: flex; justify-content: space-between; }

.beleg__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  padding: 13px 10px;
  background: var(--grau-200);
  color: var(--grau-900);
  font-weight: 600;
}
.knopf:hover { filter: brightness(.96); }
.knopf:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.knopf__ikon { font-size: 16px; line-height: 1; }
.knopf--orange { background: var(--orange); color: #fff; }
.knopf--orange-hell { background: var(--orange-hell); color: #fff; }
.knopf--menue { width: 100%; background: var(--orange-dunkel); color: #fff; border-top: 1px solid rgba(255, 255, 255, .2); }
.knopf--klein { padding: 7px 14px; border-radius: var(--radius); font-size: 13px; background: #fff; border: 1px solid var(--rand); }
.knopf--klein.knopf--orange { border-color: var(--orange); color: var(--orange-dunkel); }
.knopf--still { background: transparent; border: 1px solid var(--rand); font-weight: 500; }
.knopf--gefahr { background: #b3261e; color: #fff; }

/* --------------------------------------------------------- Beleg-Auswahl */
.beleg__belegliste {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.beleg__belegliste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--grau-200);
  font-weight: 600;
}
.belegliste__zeitfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--grau-200);
}
.zeitfilter__knopf {
  border: 1px solid var(--rand);
  background: #fff;
  color: var(--grau-700);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
}
.zeitfilter__knopf:hover { background: var(--grau-100); }
.zeitfilter__knopf--aktiv { background: var(--orange); border-color: var(--orange); color: #fff; }

.belegliste__zeitraumsumme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #fff4e5;
  border-bottom: 1px solid var(--grau-200);
  font-size: 12px;
  font-weight: 700;
  color: var(--grau-900);
}

#belegliste-inhalt { flex: 1; overflow-y: auto; }

.belegliste__tagkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: var(--grau-100);
  border-bottom: 1px solid var(--grau-200);
  font-size: 12px;
  font-weight: 700;
  color: var(--grau-700);
  position: sticky;
  top: 0;
}

.belegzeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--grau-100);
  background: #fff;
}
.belegzeile:hover { background: var(--grau-100); }
.belegzeile__nr { font-weight: 600; }
.belegzeile__betrag { font-weight: 600; font-variant-numeric: tabular-nums; }
.belegzeile__meta { grid-column: 1 / -1; font-size: 11px; color: var(--grau-500); }

.ikon-knopf {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--grau-700);
}
.ikon-knopf:hover { background: var(--grau-100); }

/* ---------------------------------------------------- Ansicht anpassen */
.ansicht-popover {
  position: fixed; z-index: 60; min-width: 220px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.ansicht-popover__eintrag {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; text-align: left;
  padding: 10px 12px; border-radius: var(--radius); font-size: 14px; color: var(--grau-900);
}
.ansicht-popover__eintrag:hover { background: var(--grau-100); }

.regler {
  position: fixed; z-index: 60;
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.regler__anzeige { font-size: 12px; color: var(--grau-700); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.regler__reihe { display: flex; align-items: center; gap: 6px; }
.regler__knopf {
  min-width: 40px; min-height: 40px; border: 1px solid var(--rand); background: var(--grau-100);
  border-radius: var(--radius); font-size: 16px; color: var(--grau-900);
}
.regler__knopf:hover { background: var(--grau-200); }
.regler__knopf--schrift { min-width: 34px; font-size: 12px; font-weight: 700; }
.regler__schliessen { margin-top: 4px; width: 100%; justify-content: center; }

/* ------------------------------------------------------------ Artikelteil */
.artikelflaeche {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, #3b3c40, #26272a);
}

.artikelflaeche__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  background: var(--grau-100);
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
  font-size: 13px;
}
.artikelflaeche__suche { margin-left: auto; }
.artikelflaeche__suche input {
  width: 210px;
  padding: 5px 10px;
  border: 1px solid var(--rand);
  border-radius: 20px;
  background: #fff;
}

.kachelgitter {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kachel-breite, 112px), 1fr));
  gap: 4px;
  padding: 5px;
  align-content: start;
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--kachel-hoehe, 62px);
  padding: 5px 6px;
  border: 0;
  border-radius: 5px;
  text-align: left;
  line-height: 1.15;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .06s;
}
.kachel:hover { filter: brightness(1.08); }
.kachel:active { transform: scale(.96); }
.kachel__name { font-size: var(--kachel-schrift, 12.5px); font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.kachel__preis { font-size: var(--kachel-schrift-preis, 10.5px); opacity: .85; font-variant-numeric: tabular-nums; margin-top: 3px; }
.kachel--leer { grid-column: 1 / -1; color: var(--grau-300); text-align: center; padding: 30px; box-shadow: none; background: none; }

.gruppenleiste {
  display: flex;
  gap: 3px;
  padding: 4px 5px;
  overflow-x: auto;
  background: rgba(0, 0, 0, .28);
}
.gruppenknopf {
  flex: 0 0 auto;
  border: 0;
  border-radius: 5px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  opacity: .72;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gruppenknopf--aktiv { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }

/* ========================================================== Rechnungsliste */
.uebersicht { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--grau-100); }

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--rand);
}
.filterleiste label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--grau-500); text-transform: uppercase; letter-spacing: .04em; }
.filterleiste input, .filterleiste select {
  padding: 6px 9px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grau-900);
}
.filterleiste__suche { flex: 1; min-width: 180px; }
.filterleiste__suche input { width: 100%; }

.kennzahlen { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
.kennzahl {
  flex: 1 1 150px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 10px 14px;
}
.kennzahl__wert { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kennzahl__bez { font-size: 11px; color: var(--grau-500); text-transform: uppercase; letter-spacing: .05em; }

.tabellenrahmen { flex: 1; min-height: 0; overflow: auto; margin: 0 14px 14px; background: #fff; border: 1px solid var(--rand); border-radius: 8px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--grau-100);
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--rand);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grau-500);
  white-space: nowrap;
}
.tabelle th.sortierbar { cursor: pointer; user-select: none; }
.tabelle th.sortierbar:hover { color: var(--grau-900); }
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--grau-100); }
.tabelle tbody tr:hover { background: #fcfcfd; }
.tabelle td.num, .tabelle th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle__leer { text-align: center; color: var(--grau-500); padding: 34px; }
.aktionen-spalte { text-align: right; }
.tabelle .zeilen-aktionen { display: flex; gap: 5px; justify-content: flex-end; }
.tabelle .zeilen-aktionen .knopf--klein { padding: 4px 9px; font-size: 12px; }

.merker { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.merker--bezahlt { background: #e3f4ea; color: var(--gut); }
.merker--offen { background: #fdeee4; color: var(--warn); }

/* ============================================================ Verwaltungen */
.verwaltung { flex: 1; display: flex; min-height: 0; background: var(--grau-100); }
.verwaltung__liste {
  flex: 0 0 330px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--rand);
}
.verwaltung__filter { display: flex; gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--grau-200); }
.verwaltung__filter select, .verwaltung__filter input {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
}
.verwaltung__liste > div:last-child { flex: 1; overflow-y: auto; min-height: 0; }
.verwaltung__form { flex: 1; overflow-y: auto; padding: 18px 22px; min-width: 0; }

.eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--grau-100);
  background: #fff;
}
.eintrag:hover { background: var(--grau-100); }
.eintrag--aktiv { background: #fdf0e6; box-shadow: inset 3px 0 0 var(--orange); }
.eintrag__farbe { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .15); }
.eintrag__text { flex: 1; min-width: 0; }
.eintrag__name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag__meta { display: block; font-size: 11px; color: var(--grau-500); }
.eintrag__preis { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.eintrag--inaktiv .eintrag__name { text-decoration: line-through; color: var(--grau-500); }

.formzeile { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.feld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.feld--schmal { flex: 0 1 130px; }
.feld--breit { flex: 1 1 100%; }
.feld > span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau-500); }
.feld input, .feld select, .feld textarea {
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #fff;
  width: 100%;
}
.feld input[type="color"] { padding: 2px; height: 36px; }
.feld textarea { resize: vertical; min-height: 64px; }
.feld--check { flex-direction: row; align-items: center; gap: 8px; flex: 1 1 100%; }
.feld--check input { width: auto; }
.feld--check span { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--grau-900); }

.formkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.formkopf h2 { margin: 0; font-size: 18px; }
.formaktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.formhinweis { color: var(--grau-500); font-size: 12px; margin: 4px 0 16px; }
.platzhalter { display: grid; place-items: center; height: 100%; color: var(--grau-500); text-align: center; }

.abschnitt { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.abschnitt > h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--grau-500); }

.einstellungen { flex: 1; overflow-y: auto; padding: 16px; background: var(--grau-100); }
.einstellungen > div { max-width: 900px; margin: 0 auto; }

/* ================================================================ Dialoge */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.modal__box {
  pointer-events: auto;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: 18px 20px;
}
.modal__box--menue { width: min(430px, 100%); padding: 16px; }
.modal__box--liste { width: min(560px, 100%); display: flex; flex-direction: column; padding-bottom: 12px; }
.modal__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--grau-700); }
.modal__kopf h2 { margin: 0; font-size: 20px; font-weight: 400; flex: 1; }
.modal__marke { font-weight: 800; color: var(--orange); }
.modal__titel { margin: 0 0 14px; font-size: 18px; }
.modal__fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal__fuss .knopf { padding: 9px 18px; border-radius: var(--radius); }
.modal__schliessen { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px; border: 0; background: transparent; color: var(--grau-700); font-size: 15px; }
.modal__schliessen:hover { background: var(--grau-100); border-radius: var(--radius); }

.menuegitter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menuekachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--grau-200);
  color: var(--grau-700);
  font-size: 13px;
  text-align: center;
}
.menuekachel:hover { background: var(--grau-300); }
.menuekachel--breit { grid-column: 1 / -1; flex-direction: row; justify-content: center; padding: 14px; }
.menuekachel__ikon { font-size: 22px; line-height: 1; }

#liste-suche { width: 100%; padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--radius); margin-bottom: 8px; }
.auswahlliste { flex: 1; min-height: 120px; max-height: 46vh; overflow-y: auto; border: 1px solid var(--grau-200); border-radius: var(--radius); }
.auswahlzeile { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--grau-100); background: #fff; }
.auswahlzeile:hover { background: var(--grau-100); }
.auswahlzeile strong { display: block; font-weight: 600; }
.auswahlzeile span { font-size: 12px; color: var(--grau-500); }

.hinweis {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 90;
  padding: 11px 20px;
  border-radius: 24px;
  background: var(--grau-900);
  color: #fff;
  box-shadow: var(--schatten);
  max-width: 76vw;
}
.hinweis--fehler { background: #b3261e; }

/* ============================================================== Druckbühne */
.druckbuehne { flex: 1; overflow: auto; padding: 22px; background: var(--grau-700); display: flex; justify-content: center; align-items: flex-start; }
.blatt {
  width: 210mm;
  min-height: 297mm;
  padding: 16mm 18mm 14mm;
  background: #fff;
  box-shadow: var(--schatten);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------- Rechnungsblatt-Inhalt */
/* Als <table> aufgebaut, damit thead/tfoot (Kopf-/Fusszeile) beim Drucken
   automatisch auf jeder Seite wiederholt werden. */
.rg { font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; color: #33383f; width: 100%; border-collapse: collapse; flex: 1; }
.rg > thead > tr > td, .rg > tfoot > tr > td, .rg > tbody > tr > td { padding: 0; }

/* align-items: flex-end - Firma/Anschrift auf Höhe des "Lindo"-Schriftzugs im
   Logo (der Schriftzug sitzt im unteren Teil der Grafik, nicht mittig). */
.rg__kopf { display: flex; align-items: flex-end; gap: 6mm; padding-bottom: 4mm; border-bottom: 0.5pt solid #e2e5e9; }
.rg__logo-bild { height: 20mm; width: auto; max-width: 55mm; object-fit: contain; object-position: left top; }
.rg__absender-kurz { font-size: 9.5pt; line-height: 1.55; color: #5b6068; }
.rg__absender-kurz b { color: #2b2f36; font-size: 10.5pt; }

.rg__fussinfo { margin-top: 8mm; padding-top: 3mm; border-top: 0.5pt solid #e2e5e9; font-size: 8.5pt; line-height: 1.6; color: #5b6068; display: flex; gap: 5mm; }
.rg__fussinfo-spalte { flex: 1; min-width: 0; }

.rg__empfaenger { margin-top: 10mm; line-height: 1.55; }
.rg__empfaenger-eyebrow { font-size: 7.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa0a8; margin-bottom: 1mm; }
.rg__empfaenger-name { font-size: 12.5pt; font-weight: 700; color: #2b2f36; }

.rg__titel {
  margin: 9mm 0 5mm; font-size: 19pt; font-weight: 700; letter-spacing: .03em;
  color: #a82929; text-transform: uppercase; padding-bottom: 2.5mm; border-bottom: 1.2pt solid #a82929;
}
.rg__meta { font-size: 10pt; line-height: 1.8; }
.rg__meta div { display: flex; gap: 8px; }
.rg__meta span:first-child { min-width: 40mm; font-weight: 700; color: #2b2f36; }
.rg__meta span:last-child { color: #444; }

.rg__tabelle { width: 100%; border-collapse: collapse; font-size: 10pt; margin-top: 9mm; }
.rg__tabelle th {
  text-align: left; font-weight: 700; font-size: 9pt; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; padding: 3.2mm 3mm; background: #2b2f36;
}
.rg__tabelle td { padding: 2.8mm 3mm; vertical-align: top; }
.rg__tabelle tbody tr.rg__zeile-alt { background: #f3f4f6; }
.rg__tabelle .r { text-align: right; }
.rg__tabelle .c { text-align: center; }
.rg__posnotiz { font-size: 8.5pt; color: #777; }

.rg__summen { margin-top: 5mm; margin-left: auto; width: 88mm; font-size: 10.5pt; }
.rg__summen div { display: flex; justify-content: space-between; padding: 1.4mm 3mm; color: #555; }
.rg__summen .rg__gesamt {
  font-weight: 800; font-size: 12.5pt; color: #a82929;
  border-top: 1.2pt solid #a82929; margin-top: 1mm; padding-top: 2.5mm;
}

.rg__hinweis { margin-top: 10mm; line-height: 1.6; font-size: 9.5pt; color: #5b6068; }

/* ================================================================ Schmale Fenster */
@media (max-width: 900px) {
  .kachelgitter { grid-template-columns: repeat(auto-fill, minmax(var(--kachel-breite, 96px), 1fr)); }
  .verwaltung { flex-direction: column; }
  .verwaltung__liste { flex: 0 0 42%; border-right: 0; border-bottom: 1px solid var(--rand); }
}

/* ============================================================== Handy (Kasse) */
@media (max-width: 640px) {
  /* Der Kopf ist auf dem Handy zu schmal für alles - Titel weg, Tabs/Uhr enger,
     damit kein Knopf rechts über den Bildschirmrand hinausgeschoben wird. */
  .kopf { gap: 4px; padding: 0 4px; }
  .kopf__mitte { display: none; }
  .kopf-tab { padding: 6px 8px; font-size: 12px; }
  .kopf__rechts { gap: 2px; margin-left: auto; }
  .kopf-benutzer { font-size: 11px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kopf-uhr { font-size: 10.5px; }

  /* Beleg und Artikel bleiben nebeneinander sichtbar - der Beleg zeigt kompakt an. */
  .beleg__marke { display: none; }
  .knopf--menue { display: none; } /* gleiche Funktion wie das Zahnrad oben rechts - spart hier Platz */

  .beleg__kunde { padding: 7px 8px; }
  .beleg__kunde-label { font-size: 8.5px; }
  .beleg__kunde-name { font-size: 11.5px; }

  .position { grid-template-columns: 20px 1fr; padding: 6px 8px; column-gap: 4px; }
  .position__menge { font-size: 11px; }
  .position__name { font-size: 11.5px; line-height: 1.25; }
  .position__summe { grid-column: 2; font-size: 11px; }
  .position__detail { display: none; }

  .beleg__summen { padding: 6px 8px; }
  .beleg__summe-zeile--klein { font-size: 10px; }
  .beleg__summe-zeile--gross { font-size: 15px; }

  .beleg__aktionen { grid-template-columns: 1fr; }
  .beleg__aktionen .knopf { padding: 9px 6px; font-size: 11.5px; }

  .artikelflaeche__kopf { padding: 5px 8px; gap: 6px; }
  .artikelflaeche__suche input { width: 100%; min-width: 0; }

  .kachelgitter { grid-template-columns: repeat(auto-fill, minmax(var(--kachel-breite, 96px), 1fr)); gap: 5px; padding: 6px; }
  .kachel { min-height: var(--kachel-hoehe, 58px); padding: 7px 6px; }
  .kachel__name { font-size: var(--kachel-schrift, 11.5px); }
  .kachel__preis { font-size: var(--kachel-schrift-preis, 10px); }

  /* Touch-Ziele großzügiger: Apple empfiehlt mindestens 44×44pt. */
  .gruppenknopf { padding: 11px 14px; font-size: 13.5px; }
  .knopf { padding: 13px 16px; font-size: 15px; }
  .knopf--klein { padding: 11px 16px; font-size: 14px; }
  .kopf-icon { width: 42px; height: 42px; }
  .ikon-knopf { width: 38px; height: 38px; font-size: 19px; }
  .eintrag, .auswahlzeile, .belegzeile { min-height: 46px; }
}

/* ==================================================================== Login */
.kopf-benutzer { font-size: 12px; color: var(--grau-700); white-space: nowrap; }

.login {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--grau-800); padding: 20px;
}
.login__box {
  width: min(360px, 100%); background: #fff; border-radius: 10px; box-shadow: var(--schatten);
  padding: 24px 22px; text-align: center;
}
.login__marke { font-size: 22px; font-weight: 800; color: var(--orange); margin-bottom: 18px; }
.login__marke span { font-weight: 400; color: var(--grau-900); }

.login__tabs { display: flex; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.login__tab { flex: 1; padding: 9px 0; border: 0; background: var(--grau-100); color: var(--grau-700); font-weight: 600; }
.login__tab--aktiv { background: var(--orange); color: #fff; }

.login__mitarbeiter-liste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.login__mitarbeiter-knopf {
  padding: 9px 16px; border: 1px solid var(--rand); border-radius: 20px;
  background: var(--grau-100); color: var(--grau-900); font-weight: 600; font-size: 14px;
}
.login__mitarbeiter-knopf--aktiv { background: var(--orange); border-color: var(--orange); color: #fff; }
.login__mitarbeiter-leer { color: var(--grau-500); font-size: 13px; margin-bottom: 10px; }

.login__hinweis { margin: 0 0 10px; color: var(--grau-500); font-size: 13px; }
.login__pin-anzeige {
  font-size: 26px; letter-spacing: 8px; height: 34px; margin-bottom: 14px; color: var(--grau-900);
}
.login__pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.login__pinpad button {
  padding: 14px 0; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--grau-100);
  font-size: 17px; font-weight: 600;
}
.login__pinpad button:active { background: var(--grau-200); }
.login__pinpad-orange { background: var(--orange) !important; color: #fff; border-color: var(--orange) !important; }
.login__pinpad-still { color: var(--grau-500); }

.login__panel .feld { text-align: left; margin-bottom: 12px; }
.login__panel input { width: 100%; padding: 9px 10px; border: 1px solid var(--rand); border-radius: var(--radius); }
#login-admin-ok { width: 100%; margin-top: 4px; }

.login__passwort-zeile { position: relative; display: block; }
.login__passwort-zeile input { padding-right: 38px; }
.login__augen-knopf {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--grau-500); border-radius: var(--radius);
}
.login__augen-knopf:hover { background: var(--grau-100); color: var(--grau-900); }
.login__augen-knopf--aktiv { color: var(--orange); }

.login__fehler { color: #b3261e; font-size: 13px; margin: 14px 0 0; }

/* ============================================================ Benutzerrechte */
.rechte-gitter { display: flex; flex-direction: column; gap: 10px; }
.rechte-zeile { align-items: flex-start !important; }
.rechte-zeile strong { display: block; font-weight: 600; }
.rechte-zeile small { display: block; margin-top: 1px; }