/* La Vesuvio · Der Bon
 *
 * Signatur der Seite. Auf dem Desktop steht er rechts neben dem Inhalt, auf dem
 * Telefon ist er eine Lasche unten, die man aufzieht. Papier, Zackenkante,
 * Druckkopf und Strichcode nach 21st.dev „Receipt Pricing" (n1m4mz), von React
 * auf reines CSS/JS umgebaut: jede Zeile wird einzeln „gedruckt" (clip-path),
 * statt dass ein ganzer Beleg auf einmal erscheint.
 */
.bon {
  position: fixed; z-index: 50; font-family: var(--sc-font-mono); color: var(--tinte);
  font-size: .78rem; line-height: 1.55; letter-spacing: .02em;
}
.bon__papier {
  position: relative; background: var(--bonweiss);
  padding: 1.6rem 1.25rem 1.5rem;
  background-image: repeating-linear-gradient(180deg, rgb(31 26 22 / .035) 0 1px, transparent 1px 4px);
  -webkit-mask: var(--zacken); mask: var(--zacken);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.bon p { margin: 0; }
.bon__kopf { text-align: center; text-transform: uppercase; }
.bon__firma { font-family: var(--sc-font-display); font-style: italic; font-weight: 900; font-size: 1.7rem; text-transform: none; letter-spacing: -.01em; line-height: 1; margin-bottom: .45rem !important; color: var(--tomate); }
.bon__trenner { border-top: 1px dashed rgb(31 26 22 / .4); margin: .8rem 0; }
.bon__meta { margin: 0; display: grid; gap: .15rem; text-transform: uppercase; }
.bon__meta div, .bon__zeile, .bon__summe div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.bon__meta dd { margin: 0; text-align: right; }
.bon__leise { color: var(--tinte-leise); }
.bon__ziel { text-transform: uppercase; display: grid; gap: .1rem; }
.bon__ziel b { font-weight: 600; }
.bon__posten { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bon__posten li { display: grid; grid-template-columns: 1fr auto auto; gap: .25rem .5rem; align-items: baseline; }
.bon__posten .punkte { border-bottom: 1px dotted rgb(31 26 22 / .45); translate: 0 -.3em; min-width: .75rem; }
.bon__posten .name { grid-column: 1; }
.bon__posten .preis { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; }
.bon__posten .weg {
  grid-column: 1 / -1; justify-self: start; font: inherit; font-size: .7rem; color: var(--tinte-leise);
  background: none; border: 0; padding: .1rem 0; min-height: 1.75rem; cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}
.bon__posten .weg:hover { color: var(--tomate); }
.bon__leer { color: var(--tinte-leise); }
.bon__summe { display: grid; gap: .2rem; margin-top: .8rem; padding-top: .7rem; border-top: 3px double rgb(31 26 22 / .45); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.bon__summe .gesamt { font-weight: 700; font-size: .95rem; }
.bon__summe .lf { color: var(--tomate); }
.bon__summe .spar { color: var(--gruen); font-weight: 600; }
.bon__summe .fehlt { color: #8a5a00; background: rgb(240 169 58 / .22); padding: .15rem .35rem; margin-inline: -.35rem; }
.bon__summe .frei { color: var(--gruen); }
.bon__strich { display: flex; justify-content: center; align-items: stretch; height: 2.1rem; margin: 1rem auto .35rem; }
.bon__strich span { display: block; }
.bon__strich span:nth-child(odd) { background: var(--tinte); }
.bon__danke { text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; color: var(--tinte-leise); }

/* Gedruckte Zeile: der Druckkopf schiebt die Zeile von oben nach unten frei. */
.gedruckt { animation: drucken .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes drucken { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.bon__kopf-druck { position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, rgb(31 26 22 / .25), transparent); opacity: 0; pointer-events: none; }
.bon.druckt .bon__kopf-druck { animation: kopf .42s linear; }
@keyframes kopf { from { opacity: 1; top: 0; } to { opacity: 0; top: 100%; } }

/* Abriss: im letzten Akt reißt der Bon ab und kippt leicht. */
.bon.bon--ab .bon__papier { transform: translateY(10px) rotate(-1.5deg); box-shadow: none; }
.bon__papier { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.bon.bon--ab .bon__danke { color: var(--tomate); font-weight: 700; }

/* ------------------------------------------------------------- Desktop -- */
@media (min-width: 1024px) {
  .bon { top: calc(var(--leiste-h) + 1.25rem); right: clamp(1rem, 2vw, 1.75rem); width: calc(var(--bon-b) - 2 * clamp(1rem, 2vw, 1.75rem)); filter: drop-shadow(0 12px 18px rgb(31 26 22 / .22)); }
  .bon__papier { max-height: calc(100vh - var(--leiste-h) - 2.5rem); }
  .bon__lasche { display: none; }
}

/* ------------------------------------------------------------- Telefon -- */
@media (max-width: 1023px) {
  .bon { left: 0; right: 0; bottom: 0; filter: drop-shadow(0 -6px 14px rgb(31 26 22 / .22)); }
  .bon__lasche {
    width: 100%; min-height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem var(--sc-gutter) calc(.8rem + env(safe-area-inset-bottom)); cursor: pointer;
    font: inherit; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--tinte); background: var(--bernstein); border: 0; border-top: 2px solid var(--tinte);
  }
  .bon__lasche-pfeil { width: .7rem; height: .7rem; border-left: 2px solid; border-top: 2px solid; rotate: 45deg; translate: 0 .2rem; transition: rotate .25s ease; }
  .bon.offen .bon__lasche-pfeil { rotate: 225deg; translate: 0 -.2rem; }
  .bon__papier { display: none; max-height: min(70vh, 34rem); padding-bottom: 1.25rem; }
  .bon.offen .bon__papier { display: block; }
  .bon.offen { display: flex; flex-direction: column-reverse; }
  .bon.bon--ab .bon__papier { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gedruckt { animation: none; }
  .bon.druckt .bon__kopf-druck { animation: none; }
  .bon__papier, .bon__lasche-pfeil { transition: none; }
}
.bon__summe .vergleich-kopf { margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed rgb(31 26 22 / .4); }
.bon__summe .hinweis { color: var(--tinte-leise); font-size: .68rem; text-transform: none; margin-top: .35rem; }