/* ============================================================
   Bausteinlager „Deine neue Webseite" — kassenbon.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-kassenbon-20261029
   Nach dem Absenden druckt ein kleiner Drucker einen Beleg aus: Reservierung, Anfrage, Bestellung, Gutschein.
   Ruckelt wie ein echter Bondrucker, gezackte Abrisskante, Strichcode aus der Belegnummer.
   EINBAU:
     <div class="kassenbon" data-kassenbon data-form="#reservierung"
          data-kopf="Gasthaus zum Beispiel" data-unterkopf="Tischreservierung"
          data-felder='{"Name":"name","Personen":"personen","Datum":"datum","Uhrzeit":"uhrzeit"}'
          data-fuss="Wir freuen uns auf euch!"></div>
     Druckt, sobald das Formular über den Senden-Knopf erfolgreich gesendet wurde (Ereignis sendeknopf:gesendet).
     Von Hand: Kassenbon.drucke(el, { kopf, unterkopf, zeilen:[["Name","Anna"],…], summe:["Gesamt","…"], fuss, nummer })
   Farben: --kb-gehaeuse (Standard --marke), --kb-papier, --kb-tinte
   ============================================================ */
.kassenbon{--kb-gehaeuse:var(--marke,#1E2A3A);--kb-papier:#FBF9F2;--kb-tinte:#23201C;--kb-breite:300px;
  position:relative;width:min(100%,calc(var(--kb-breite) + 60px));margin:0 auto;-webkit-tap-highlight-color:transparent}
.kb-drucker{position:relative;z-index:2;height:74px;border-radius:18px 18px 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(0,0,0,.25)),var(--kb-gehaeuse);background-color:var(--kb-gehaeuse);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 18px 30px -16px rgba(0,0,0,.55)}
.kb-schlitz{position:absolute;left:24px;right:24px;bottom:14px;height:8px;border-radius:6px;background:#0B0A09;box-shadow:0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(0,0,0,.6) inset}
.kb-led{position:absolute;right:22px;top:16px;width:9px;height:9px;border-radius:50%;background:#3A3F45;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.kassenbon.-druckt .kb-led{background:#47E39A;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 10px #47E39A;animation:kbBlink .5s steps(2) infinite}
.kassenbon.-fertig .kb-led{background:#47E39A;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 8px #47E39A}
@keyframes kbBlink{50%{opacity:.35}}
.kb-name{position:absolute;left:22px;top:13px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.kb-ausgabe{position:relative;z-index:1;margin:-20px auto 0;width:min(var(--kb-breite),calc(100% - 40px));height:0;overflow:hidden}
.kb-beleg{position:absolute;left:0;right:0;bottom:0;padding:28px 20px 30px;color:var(--kb-tinte);
  /* Papierwölbung an den Seiten, Schatten unten, damit die Zacken auch auf hellem Grund sichtbar sind */
  background:linear-gradient(0deg,rgba(70,55,30,.16),rgba(70,55,30,.05) 9px,rgba(70,55,30,0) 34px),
    linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,0) 9%,rgba(0,0,0,0) 91%,rgba(0,0,0,.07)),var(--kb-papier);background-color:var(--kb-papier);
  font:500 14px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) bottom/14px 9px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) bottom/14px 9px repeat-x}
.kb-kopf{margin:0;text-align:center;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.kb-unterkopf{margin:2px 0 0;text-align:center;font-size:13px}
.kb-strich{margin:12px 0;border:0;border-top:1.5px dashed rgba(35,32,28,.45)}
.kb-zeile{display:flex;justify-content:space-between;gap:12px;margin:0}
.kb-zeile span:last-child{text-align:right;font-weight:700;overflow-wrap:anywhere}
.kb-summe{font-weight:800;font-size:16px}
.kb-fuss{margin:14px 0 0;text-align:center;font-size:13.5px}
.kb-code{height:38px;margin:14px 6px 4px}
.kb-nummer{margin:0;text-align:center;font-size:12px;letter-spacing:.2em}
.kb-ansage{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kb-hinweis{text-align:center;font-size:13.5px;font-weight:600;color:var(--tinte-2,#4A5568);margin:16px 0 0;transition:opacity .3s}
.kassenbon.-druckt .kb-hinweis,.kassenbon.-fertig .kb-hinweis{opacity:0;height:0;margin:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.kassenbon.-druckt .kb-led{animation:none}}