/* Oberflaeche fuer die iPads: grosse Flaechen, kein Scrollen im Normalfall. */

body.pad {
  height: 100dvh;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select: none;
  -webkit-user-select: none;
}

.view { height: 100%; display: flex; flex-direction: column; }
.view.centered { align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; }

/* ---------- Kopfleiste ---------- */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--rule);
  flex: none; flex-wrap: wrap;
}
.bar-left { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.bar-right { display: flex; align-items: center; gap: .6rem; }
.who, .place { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-sub { font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }

.view-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.25rem 2.5rem; -webkit-overflow-scrolling: touch; }
.screen-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.1rem; }

/* ---------- Panels (Kopplung, PIN) ---------- */

.panel { padding: 1.75rem; width: min(30rem, 100%); display: flex; flex-direction: column; gap: 1rem; position: relative; }
.panel h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; }
.panel .lede { color: var(--ink-muted); font-size: .95rem; }
.block { width: 100%; }
.code-input {
  font-family: var(--mono); font-size: 1.9rem; text-align: center;
  letter-spacing: .22em; min-height: 68px; text-transform: uppercase;
}

/* ---------- Mitarbeiterauswahl ---------- */

.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.staff-tile {
  min-height: 104px; padding: 1rem;
  border-radius: var(--radius-l); border: 1px solid var(--rule);
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; text-align: left;
  display: flex; align-items: flex-end; transition: transform .08s ease, border-color .12s ease;
}
.staff-tile:hover { border-color: var(--rule-strong); }
.staff-tile:active { transform: scale(.97); }

/* ---------- PIN ---------- */

.pin-panel { align-items: center; text-align: center; padding-top: 3.25rem; }
.back { position: absolute; top: .9rem; left: .9rem; }
.pin-dots { display: flex; gap: .8rem; margin: .3rem 0 .2rem; }
.pin-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--rule-strong); background: transparent;
}
.pin-dots i.filled { background: var(--pine); border-color: var(--pine); }
.pin-panel.shake { animation: shake .4s ease; }
@keyframes shake { 25% { transform: translateX(-8px) } 75% { transform: translateX(8px) } }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; width: 100%; max-width: 20rem; }
.pin-key {
  min-height: 66px; border-radius: var(--radius);
  border: 1px solid var(--rule-strong); background: var(--surface);
  font-size: 1.5rem; font-weight: 600; font-family: var(--mono);
  transition: background .1s ease, transform .07s ease;
}
.pin-key:hover { background: var(--surface-2); }
.pin-key:active { transform: scale(.95); background: var(--pine-soft); }
.pin-key.wide { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink-muted); }

/* ---------- Zaehlen ---------- */

/* 200px statt 230px: auf einem iPad quer ergibt das 5 statt 4 Spalten — damit
   passen 20 Produkte ohne Scrollen auf einen Bildschirm. Im Service nach
   Getraenken scrollen zu muessen waere der haeufigste Handgriff ueberhaupt. */
.count-grid {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .6rem; padding: .7rem .85rem .7rem; align-content: start;
}

.tile {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-l); box-shadow: var(--shadow);
  padding: .6rem .7rem .6rem; display: flex; flex-direction: column; gap: .45rem;
  border-top: 4px solid var(--tile-color, var(--pine));
}
.tile-label { display: flex; flex-direction: column; gap: .05rem; min-height: 2.2rem; }
.tile-name {
  font-weight: 700; font-size: .98rem; line-height: 1.2; letter-spacing: -.01em;
  overflow-wrap: anywhere;   /* "Dessert Waffel & Co" darf umbrechen statt ueberzulaufen */
}
.tile-price { font-family: var(--mono); font-size: .76rem; color: var(--ink-faint); }
.tile-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.step {
  width: 58px; height: 56px; flex: none; border-radius: var(--radius);
  border: 1px solid var(--rule-strong); background: var(--surface-2);
  font-size: 1.7rem; line-height: 1; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  transition: transform .07s ease, filter .12s ease;
}
.step:active { transform: scale(.92); }
.step.plus { background: var(--pine); border-color: var(--pine); color: #fff; font-size: 2rem; }
.step.plus:active { filter: brightness(1.25); }
.step[disabled] { opacity: .3; pointer-events: none; }

.count {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1; min-width: 2.2ch; text-align: center;
}
.count.zero { color: var(--ink-faint); }
.count.bump { animation: bump .18s ease; }
@keyframes bump { 50% { transform: scale(1.22) } }

.totals {
  flex: none; padding: .8rem 1.15rem;
  background: var(--surface); border-top: 1px solid var(--rule);
}

/* Vier gleich gebaute Felder statt dreier Angaben an drei Kanten: links die
   eigenen Zahlen, rechts daneben der Umsatz, darunter die beiden Balken. */
.totals-raster { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.totals-feld {
  display: flex; flex-direction: column; gap: .35rem; min-width: 0;
  padding: .5rem .75rem .6rem;
  background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius);
  font: inherit; color: inherit; text-align: left;
}
.totals-feld:first-child, .totals-feld:nth-child(2) {
  flex-direction: row; align-items: baseline; justify-content: space-between; gap: .8rem;
}
.totals-label {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-faint); white-space: nowrap;
}
.totals-wert { font-size: 1.35rem; font-weight: 700; }
.totals-wert.geld { color: var(--ok); }

/* Hochkant stehen nur 3 Spalten zur Verfuegung, also 7 Reihen. Auf dem kleinsten
   iPad reicht die Hoehe dafuer knapp nicht — hier ein paar Pixel je Reihe sparen.
   Die Tippflaeche bleibt mit 58x52 deutlich ueber Apples Mindestmass von 44. */
@media (orientation: portrait) and (max-width: 850px) {
  .count-grid { gap: .55rem; padding: .65rem .75rem .8rem; }
  .tile { padding: .6rem .65rem; gap: .45rem; }
  .tile-label { min-height: 2.3rem; }
  .step { height: 52px; }
}

@media (max-width: 640px) {
  .count-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .step { width: 56px; height: 56px; }
  .count { font-size: 1.7rem; }
}


/* ---------- Leaderboard auf dem Auswahlbildschirm ---------- */

.board { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .6rem; max-width: 34rem; }
.board-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.board-datum { font-size: .76rem; color: var(--ink-faint); }
.board-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.board-liste li {
  display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .8rem;
  padding: .6rem .85rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--rule);
}
.board-platz {
  font-family: var(--mono); font-size: .9rem; font-weight: 700; text-align: center;
  color: var(--ink-faint);
}
.board-liste li:nth-child(1) { border-color: var(--brass); background: #FBF5E9; }
.board-liste li:nth-child(1) .board-platz { color: var(--brass); }
.board-name { font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Die Leermeldung steht als <li> in derselben Liste wie die Plaetze. Ohne
   eigenes Raster landete ihr Text in der 2rem schmalen Platzziffern-Spalte und
   brach Wort fuer Wort um. */
.board-liste li.board-leer {
  display: block; font-size: .9rem; color: var(--ink-faint);
  padding: .7rem .85rem; background: none; border: 1px dashed var(--rule);
}
.board-leer { font-size: .9rem; color: var(--ink-faint); padding: .5rem 0; }

/* ---------- Sammelposten ---------- */

.tile.frei .tile-price { color: var(--brass); font-weight: 600; }

#pad-dialog {
  border: none; border-radius: var(--radius-l); padding: 0; margin: auto;
  max-width: min(26rem, 94vw); width: 100%; max-height: 90vh; overflow: hidden;
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px -20px rgba(22,33,28,.5);
}
#pad-dialog::backdrop { background: rgba(22,33,28,.45); }
.pad-dlg { padding: 1.3rem; display: flex; flex-direction: column; gap: .9rem; max-height: 90vh; overflow-y: auto; }
.pad-dlg h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.pad-dlg p { font-size: .9rem; color: var(--ink-muted); line-height: 1.5; }
.pad-dlg .betrag { font-family: var(--mono); font-size: 1.6rem; text-align: center; min-height: 62px; letter-spacing: .04em; }
.pad-dlg-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; padding-top: .3rem; }

.frei-liste { display: flex; flex-direction: column; gap: .4rem; max-height: 44vh; overflow-y: auto; }
.frei-zeile {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.frei-zeile.storniert { opacity: .5; }
.frei-betrag { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.frei-note { font-size: .88rem; color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ---------- Selbstanpassung des Rasters ---------- */
/* Wird von passeRasterAn() gesetzt, wenn die Produkte sonst nicht auf einen
   Bildschirm passen. Zwei Stufen, danach wird gescrollt. */

.count-grid.kompakt { gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.count-grid.kompakt .tile { padding: .5rem .6rem; gap: .35rem; }
.count-grid.kompakt .tile-label { min-height: 1.9rem; }
.count-grid.kompakt .tile-name { font-size: .92rem; }
.count-grid.kompakt .step { width: 52px; height: 50px; font-size: 1.5rem; }
.count-grid.kompakt .step.plus { font-size: 1.7rem; }
.count-grid.kompakt .count { font-size: 1.6rem; }

.count-grid.sehr-kompakt { gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.count-grid.sehr-kompakt .tile { padding: .4rem .5rem; gap: .28rem; }
.count-grid.sehr-kompakt .tile-label { min-height: 1.7rem; }
.count-grid.sehr-kompakt .tile-name { font-size: .85rem; line-height: 1.15; }
.count-grid.sehr-kompakt .tile-price { font-size: .69rem; }
.count-grid.sehr-kompakt .step { width: 46px; height: 46px; font-size: 1.3rem; }
.count-grid.sehr-kompakt .step.plus { font-size: 1.5rem; }
.count-grid.sehr-kompakt .count { font-size: 1.35rem; min-width: 1.8ch; }

/* ---------- Tagesziel des Mitarbeiters ---------- */

.ziel-kopf { display: flex; align-items: baseline; gap: .55rem; }
.ziel-kopf .mono { font-size: .95rem; font-weight: 700; }
.ziel-prozent { margin-left: auto; color: var(--ink-faint); }
/* display:block ist hier Pflicht, nicht Geschmack: beides sind <span>, und bei
   einem Inline-Element greifen Hoehe und Breite in Prozent nicht — die Fuellung
   bliebe 0 x 0 und der Balken dauerhaft grau. */
.ziel-schiene {
  display: block; height: .55rem; border-radius: 100px;
  background: var(--rule); overflow: hidden;
}
.ziel-balken-fuell {
  display: block; height: 100%; width: 0; border-radius: 100px; background: var(--ok);
  transition: width .35s ease;
}
.ziel-balken-fuell.voll { background: var(--brass); }
.totals-feld.erreicht .ziel-prozent { color: var(--brass); font-weight: 700; }
.lede.klein { font-size: .85rem; color: var(--ink-faint); margin-top: -.3rem; }

/* Tagesziel des Hauses auf dem Auswahlbildschirm */
.hausziel {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin-bottom: 1.4rem; padding: .85rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  max-width: 34rem;
}
.hausziel-k {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-faint);
}
.hausziel-v { font-size: 1.6rem; font-weight: 700; margin-left: auto; }

/* Zwei Balken nebeneinander: das eigene Ziel und der Stand des Hauses. */
.ziel-kopf .mono { white-space: nowrap; }
.ziel-feld { cursor: pointer; }
.ziel-feld:active { background: var(--surface-2); }
/* Hochkant ist fuer zwei Spalten zu wenig Platz — dann untereinander. */
@media (max-width: 760px) {
  .totals-raster { grid-template-columns: 1fr; }
}
.ziel-balken-fuell.haus { background: var(--pine); }
.ziel-balken-fuell.haus.voll { background: var(--brass); }