/* Angebots-Dokument in der Live-Demo, Optik eines DIN-A4-Briefs */
.demo-out{display:flex;flex-direction:column;gap:14px}
.demo-out-head{display:flex;justify-content:space-between;align-items:center}
.angebot-wrap{background:#f0f0f0;padding:20px;min-height:420px;overflow:auto}
.angebot-empty{color:#666;font-size:14px;padding:24px;background:#fff;border:1px solid #e6e6e6}
.angebot{background:#fff;color:#111;width:100%;max-width:640px;margin:0 auto;padding:44px 48px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12.5px;line-height:1.5;border:1px solid #e0e0e0;position:relative}
.angebot .ph{background:#6eff47;padding:0 3px;border-bottom:1px solid #000}
.angebot .kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:1px solid #000;padding-bottom:14px;margin-bottom:26px}
.angebot .kopf .firma{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.angebot .kopf .firma small{display:block;font-size:11px;font-weight:400;color:#666;margin-top:4px;line-height:1.4}
.angebot .kopf .meta{text-align:right;font-size:11px;color:#333;line-height:1.5}
.angebot .kopf .meta b{display:block;font-size:20px;letter-spacing:-.01em;margin-bottom:4px;color:#000}
.angebot .adr{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;font-size:12px}
.angebot .adr .absender{font-size:9.5px;color:#666;border-bottom:1px solid #000;padding-bottom:3px;margin-bottom:8px;display:inline-block}
.angebot .adr .kunde{white-space:pre-line;line-height:1.5}
.angebot .adr .rechts{text-align:right;font-size:11px;color:#333;line-height:1.7}
.angebot .betreff{font-weight:700;font-size:14px;margin:8px 0 12px}
.angebot .text{margin:0 0 12px;white-space:pre-line}
.angebot table{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:12px}
.angebot th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#666;font-weight:500;border-bottom:1px solid #000;padding:6px 6px 6px 0}
.angebot td{padding:9px 6px 9px 0;border-bottom:1px solid #e0e0e0;vertical-align:top}
.angebot th.r,.angebot td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.angebot td.pos{color:#666;width:32px}
.angebot td.beschr small{display:block;color:#666;margin-top:2px;font-size:11px}
.angebot .summen{margin-left:auto;width:min(100%,300px);font-size:12px;margin-top:6px}
.angebot .summen .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #e0e0e0}
.angebot .summen .row.total{border-bottom:0;border-top:1px solid #000;font-weight:700;font-size:13px;padding-top:9px}
.angebot .hinweise{margin-top:18px;font-size:11.5px;color:#333;white-space:pre-line}
.angebot .gruss{margin-top:18px;white-space:pre-line}
.angebot .unterschrift{margin-top:26px;padding-top:6px;border-top:1px solid #000;width:200px;font-size:10px;color:#666}
.angebot .fuss{margin-top:34px;padding-top:10px;border-top:1px solid #000;font-size:9.5px;color:#666;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;line-height:1.5}
.angebot .stempel{position:absolute;right:40px;top:110px;border:2px solid #000;padding:5px 10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-6deg);background:#6eff47;font-weight:700}
@media(max-width:700px){.angebot{padding:26px 22px}.angebot .adr{grid-template-columns:1fr}.angebot .adr .rechts{text-align:left}.angebot .fuss{grid-template-columns:1fr}.angebot .stempel{display:none}}

/* A bis Z: Buchstabenleiste, Klick zeigt Erklärung */
.az{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.az-letters{display:flex;flex-wrap:wrap;gap:6px 0;border-top:1px solid #000;border-bottom:1px solid #000;padding:10px 0}
.az-letters button{border:0;background:transparent;font:inherit;font-weight:700;font-size:22px;letter-spacing:.02em;width:40px;height:40px;cursor:pointer;color:#000;padding:0;line-height:1}
.az-letters button:hover{background:#f0f0f0}
.az-letters button.on{background:var(--yellow)}
.az-panel{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;padding:6px 0 2px;min-height:96px}
.az-panel b{font-size:48px;font-weight:700;line-height:1;letter-spacing:-.03em}
.az-panel strong{font-size:16px;display:block;margin-bottom:4px}
.az-panel p{font-size:15px;line-height:1.5;color:#111;margin:0 0 6px;max-width:56ch}
.az-panel .m{font-size:13px;color:#666;font-variant-numeric:tabular-nums}
@media(max-width:700px){.az-letters button{width:34px;height:34px;font-size:18px}}

/* Druck: nur das Angebot */
@media print{
  body *{visibility:hidden}
  .angebot,.angebot *{visibility:visible}
  .angebot{position:absolute;left:0;top:0;width:100%;max-width:none;border:0;padding:20mm 18mm;font-size:11pt}
  .angebot .ph{background:#6eff47!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .angebot .stempel{display:none}
  @page{size:A4;margin:0}
}