/* Fiammetta · der Bestellzettel
 * Er liegt dort, wo gewählt wird, nie in einer festen Leiste (FINGERPRINTS:
 * la-vesuvio und da-aurora haben die sammelnde Leiste belegt):
 *   - an der Tafel als Zettel neben der Karte (.brett), am Telefon unten klebend,
 *     aber nur innerhalb der Tafel,
 *   - an der Theke groß (.theke__zettel, seite.css).
 * Die Posten sind handgeschrieben (handschrift.js), die Preise gesetzt.
 */
.brett {
  position: sticky; top: calc(var(--leiste-h) + 1.2rem);
  margin-top: 1.4rem; padding: .9rem 1rem 1rem;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2rem, color-mix(in srgb, #7aa0b8 35%, transparent) 2rem calc(2rem + 1px)),
    var(--papier);
  box-shadow: 0 14px 26px -18px rgb(31 42 37 / .5);
  transform: rotate(1.2deg);
}
.brett::before {
  content: ""; position: absolute; top: -.7rem; left: 50%; width: 1rem; height: 1.8rem; margin-left: -.5rem;
  border-radius: 3px; background: linear-gradient(90deg, #c9a577, #e3c596 50%, #c9a577); box-shadow: 0 1px 0 rgb(0 0 0 / .15);
}
.brett__kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0 0 .4rem;
  font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
}
.brett__kurz { font-family: var(--sc-font-text); text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--sc-ink-soft); }
.brett[data-voll] .brett__kurz { color: var(--karo); font-weight: 500; }
.brett .knopf { width: 100%; margin-top: .4rem; }

.zettel__posten { list-style: none; margin: 0; padding: 0; }
.posten {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .45rem;
  min-height: 2rem; color: #203a63;
}
.posten__was { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: 1.2rem; }
.posten__menge { flex: none; }
.posten__was .hand { max-width: 100%; }
.posten__preis { font-family: var(--sc-font-display); font-size: .82rem; color: var(--sc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.posten__tun { display: flex; gap: .2rem; }
.posten__tun button {
  width: 2rem; height: 2rem; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--linie) 30%, transparent); background: transparent; font-size: .95rem; line-height: 1;
}
.posten__tun button:hover { border-color: var(--karo); color: var(--karo); }
.zettel__leer { font-size: .84rem; color: var(--sc-ink-soft); margin: .4rem 0 .6rem; }
.zettel__summe { display: flex; justify-content: space-between; border-top: 1.5px solid var(--linie); margin: .6rem 0 .5rem; padding-top: .45rem; font-family: var(--sc-font-display); font-weight: 700; }

/* Groß an der Theke. */
.zettel__posten--gross .posten { min-height: 3.2rem; border-bottom: 1px solid color-mix(in srgb, #7aa0b8 35%, transparent); padding: .3rem 0; }
.zettel__posten--gross .posten__was { font-size: 1.6rem; }
.zettel__posten--gross .posten__preis { font-size: 1rem; }
.zettel__posten--gross .posten__tun { gap: .35rem; }
.zettel__posten--gross .posten__tun button { width: 2.75rem; height: 2.75rem; }

/* Getränkeschiene: eine Zeile, was auf dem Zettel steht. */
.getraenke__stand { margin: 1rem 0 0; font-size: .88rem; color: var(--sc-ink-soft); }
.getraenke__stand[data-voll] { color: var(--karo); font-weight: 500; }

@media (pointer: coarse) {
  .posten__tun button { width: 2.75rem; height: 2.75rem; }
}

/* Telefon: der Zettel klebt unten, solange die Tafel im Bild ist, und zeigt nur
   die Kurzform; die Posten stehen an der Theke. */
@media (max-width: 900px) {
  .brett {
    position: sticky; top: auto; bottom: 0; z-index: 30;
    margin: 1.2rem -1rem 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    background: var(--papier); transform: none;
    border-top: 3px solid var(--karo); box-shadow: 0 -8px 20px -12px rgb(31 42 37 / .45);
  }
  .brett::before { display: none; }
  .brett__kopf { flex-direction: column; align-items: flex-start; gap: .1rem; margin: 0; }
  .brett .zettel__posten, .brett .zettel__leer, .brett .zettel__summe { display: none !important; }
  .brett .knopf { width: auto; margin: 0; min-height: 2.9rem; }
}