/* Rechnungsheft – document tool (form, A4 preview, print). Uses site tokens from site.css :root. */
.rh-tool { --rh-ink: var(--ink, #1c1f24); --rh-muted: var(--muted, #5d6570); --rh-line: var(--line, #e2e0d8);
  --rh-brand: var(--brand, #1e5b47); --rh-surface: var(--surface, #fff); --rh-bg: var(--bg, #f6f5f1);
  --rh-r: var(--radius, 10px); --rh-rs: var(--radius-sm, 6px); display: block; color: var(--rh-ink); }
.rh-app { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.rh-app *, .rh-app *::before, .rh-app *::after { box-sizing: border-box; }

/* tabs (mobile only) */
.rh-tabs { display: flex; gap: 4px; padding: 4px; background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-r); }
.rh-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: var(--rh-rs); background: transparent; color: var(--rh-muted);
  font: inherit; font-weight: 600; cursor: pointer; }
.rh-tabs button[aria-selected="true"] { background: var(--brand-soft, #e6f0ec); color: var(--rh-brand); }
.rh-app[data-view="edit"] .rh-pv, .rh-app[data-view="preview"] .rh-form { display: none; }

/* form */
.rh-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rh-sec { margin: 0; padding: 14px; background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-r); min-width: 0; }
.rh-sec > legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 1rem; }
.rh-sec > legend + .rh-grid { clear: both; }
details.rh-sec > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 24px; }
details.rh-sec > summary::-webkit-details-marker { display: none; }
details.rh-sec > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; flex: none; }
details.rh-sec[open] > summary::before { transform: rotate(45deg); }
details.rh-sec[open] > summary { margin-bottom: 10px; }
.rh-badge { font-weight: 400; font-size: .85rem; color: var(--rh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rh-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; }
.rh-wide { grid-column: 1 / -1; }
.rh-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rh-f > label, .rh-lbl, .rh-item-grid > label { font-size: .85rem; font-weight: 600; color: var(--rh-ink); }
.rh-f em { font-style: normal; font-weight: 400; color: var(--rh-muted); }
.rh-tool input[type="text"], .rh-tool input[type="email"], .rh-tool input[type="tel"], .rh-tool input[type="date"],
.rh-tool input[type="time"], .rh-tool select, .rh-tool textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cfccc2; border-radius: var(--rh-rs);
  background: #fff; color: var(--rh-ink); font: inherit; font-size: 16px; line-height: 1.35; }
.rh-tool textarea { resize: vertical; min-height: 40px; }
.rh-tool select { padding-right: 28px; }
.rh-tool input:focus, .rh-tool select:focus, .rh-tool textarea:focus { outline: 2px solid var(--rh-brand); outline-offset: 0; border-color: var(--rh-brand); }
.rh-tool :focus-visible { outline: 2px solid var(--rh-brand); outline-offset: 2px; }
.rh-suf { display: flex; gap: 6px; align-items: stretch; }
.rh-suf > input { flex: 1; min-width: 0; }
.rh-suf > select { width: auto; flex: none; }
.rh-suf > span { align-self: center; color: var(--rh-muted); font-size: .9rem; white-space: nowrap; }
.rh-hint { font-size: .8rem; color: var(--rh-muted); min-height: 1em; }
.rh-hint.rh-bad { color: var(--danger, #b42318); font-weight: 600; }
.rh-chk { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; font-size: .92rem; cursor: pointer; padding: 4px 0; }
.rh-chk input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--rh-brand); flex: none; }
.rh-chk span { flex: 1; min-width: 0; }
.rh-chk small { flex-basis: 100%; padding-left: 26px; color: var(--rh-muted); font-size: .8rem; }
.rh-small { margin: 0; font-size: .8rem; color: var(--rh-muted); }
.rh-logo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.rh-logo .rh-lbl { flex-basis: 100%; }
.rh-logo img { max-height: 40px; max-width: 140px; object-fit: contain; border: 1px solid var(--rh-line); border-radius: 4px; background: #fff; padding: 2px; }
.rh-file { position: relative; overflow: hidden; }
.rh-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rh-note { margin: 0; padding: 10px 12px; border-radius: var(--rh-rs); background: var(--brand-soft, #e6f0ec); font-size: .9rem; }
.rh-link { border: 0; background: none; padding: 0; font: inherit; color: var(--rh-brand); text-decoration: underline; cursor: pointer; }

/* checklist */
.rh-check { padding: 10px 14px; border: 1px solid var(--rh-line); border-radius: var(--rh-r); background: var(--rh-surface); font-size: .92rem; }
.rh-check > summary { cursor: pointer; font-weight: 700; color: #8a5a00; }
.rh-check.rh-all > summary { color: var(--ok, #1e7a46); }
.rh-check ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.rh-check li { padding-left: 22px; position: relative; }
.rh-check li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.rh-check li.ok::before { content: "✓"; color: var(--ok, #1e7a46); }
.rh-check li.no { color: var(--rh-ink); font-weight: 600; }
.rh-check li.no::before { content: "○"; color: #8a5a00; }
.rh-check li.info { color: var(--rh-muted); font-size: .85rem; }
.rh-check li.info::before { content: "i"; font-style: italic; color: var(--rh-muted); left: 4px; }

/* items / rows editor */
.rh-items { display: flex; flex-direction: column; gap: 10px; }
.rh-item { border: 1px solid var(--rh-line); border-radius: var(--rh-rs); padding: 10px; background: var(--rh-bg); }
.rh-item-top { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.rh-pos { flex: none; width: 26px; height: 26px; margin-top: 7px; border-radius: 50%; background: var(--rh-surface); border: 1px solid var(--rh-line);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--rh-muted); }
.rh-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; align-items: end; }
.rh-item-grid > label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--rh-muted); min-width: 0; }
.rh-zrow .rh-item-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.rh-sum { align-self: center; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 16px; }
.rh-acts { display: flex; gap: 4px; justify-content: flex-end; align-self: end; grid-column: -2 / -1; }
.rh-ic { width: 34px; height: 34px; border: 1px solid var(--rh-line); border-radius: var(--rh-rs); background: var(--rh-surface); color: var(--rh-ink);
  font-size: 1rem; line-height: 1; cursor: pointer; }
.rh-ic:hover:not(:disabled) { border-color: var(--rh-brand); color: var(--rh-brand); }
.rh-ic:disabled { opacity: .35; cursor: default; }
.rh-del:hover:not(:disabled) { border-color: var(--danger, #b42318); color: var(--danger, #b42318); }
.rh-add { align-self: flex-start; }

/* buttons + bar */
.rh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 16px;
  border: 1px solid #cfccc2; border-radius: var(--rh-rs); background: var(--rh-surface); color: var(--rh-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.rh-btn:hover { border-color: var(--rh-brand); color: var(--rh-brand); }
.rh-btn.rh-sm { min-height: 34px; padding: 4px 10px; font-size: .88rem; }
.rh-btn.rh-primary { background: var(--rh-brand); border-color: var(--rh-brand); color: var(--on-brand, #fff); }
.rh-btn.rh-primary:hover { background: var(--brand-hover, #174a3a); color: var(--on-brand, #fff); }
.rh-btn.rh-ghost { border-color: transparent; background: transparent; color: var(--rh-muted); }
.rh-btn.rh-ghost:hover { color: var(--rh-brand); border-color: var(--rh-line); }
.rh-btn:disabled { opacity: .7; cursor: progress; }
.rh-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: rh-spin .8s linear infinite; }
.rh-btn[aria-busy="true"] .rh-spin { display: inline-block; }
@keyframes rh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rh-spin { animation-duration: 2s; } }
.rh-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px;
  background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-r); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
.rh-bar-sum { font-variant-numeric: tabular-nums; margin-right: auto; }
.rh-bar-sum strong { font-size: 1.1rem; }
.rh-bar-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rh-more .rh-btn { min-height: 38px; padding: 6px 12px; }
.rh-msg { flex-basis: 100%; margin: 0; font-size: .88rem; min-height: 0; }
.rh-msg:empty { display: none; }
.rh-msg.rh-ok { color: var(--ok, #1e7a46); }
.rh-msg.rh-err { color: var(--danger, #b42318); font-weight: 600; }
.rh-trust { margin: 0 0 0 auto; font-size: .75rem; color: var(--rh-muted); }

/* preview */
.rh-pv { min-width: 0; }
.rh-pv-vp { position: relative; overflow: hidden; width: 100%; aspect-ratio: 210 / 297; border-radius: 4px; }
.rh-pv-sc { position: absolute; left: 0; top: 0; width: 210mm; transform-origin: 0 0; }

@media (min-width: 560px) {
  .rh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rh-app { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .rh-tabs { display: none; }
  .rh-app[data-view] .rh-form, .rh-app[data-view] .rh-pv { display: flex; }
  .rh-app[data-view] .rh-pv { display: block; position: sticky; top: 16px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .rh-bar, .rh-more { grid-column: 1 / -1; }
}

/* ---------------- A4 sheet (preview + print), sized in mm like the PDF ---------------- */
.rh-sheet { position: relative; width: 210mm; min-height: 297mm; padding: 96.5mm 20mm 8mm 25mm; display: flex; flex-direction: column;
  background: #fff; color: #1c1f24; font: 10pt/1.38 Helvetica, Arial, sans-serif; box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05));
  overflow-wrap: break-word; text-align: left; }
.rh-sheet *, .rh-sheet *::before { box-sizing: border-box; }
.rh-sheet p { margin: 0; }
.rh-sheet h2, .rh-sheet h3 { margin: 0; color: inherit; font-family: inherit; letter-spacing: 0; }
.rh-ph { color: #a0a6ad; font-style: italic; }
.rh-mark { position: absolute; left: 3mm; width: 5mm; border-top: .2mm solid #969696; }
.rh-m1 { top: 105mm; } .rh-m2 { top: 210mm; } .rh-mp { top: 148.5mm; width: 6mm; }
.rh-s-head { position: absolute; top: 15mm; left: 25mm; right: 20mm; height: 26mm; display: flex; justify-content: space-between; gap: 6mm; }
.rh-s-name { font-size: 14pt; font-weight: 700; line-height: 1.2; }
.rh-s-extra { font-size: 9pt; color: #5d6570; margin-top: 1mm; }
.rh-s-logo { max-width: 55mm; max-height: 22mm; object-fit: contain; object-position: right top; margin-top: -3mm; }
.rh-s-addr { position: absolute; left: 20mm; top: 45mm; width: 85mm; height: 45mm; padding: 0 5mm; overflow: hidden; }
.rh-s-ret { height: 16.2mm; display: flex; align-items: flex-end; font-size: 7pt; line-height: 1.2; color: #5d6570; }
.rh-s-ret { text-decoration: underline; text-decoration-color: #d6d3c9; text-underline-offset: .8mm; white-space: nowrap; overflow: hidden; }
.rh-s-to { padding-top: 3.2mm; font-size: 10pt; line-height: 4.4mm; }
.rh-s-meta { position: absolute; left: 125mm; top: 48.6mm; width: 65mm; margin: 0; display: grid; grid-template-columns: auto 1fr;
  column-gap: 3mm; row-gap: 0; line-height: 4.6mm; }
.rh-s-meta dt { font-size: 8pt; color: #5d6570; }
.rh-s-meta dd { margin: 0; font-size: 9pt; text-align: right; white-space: nowrap; }
.rh-s-body { flex: 1 0 auto; }
.rh-s-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; margin-top: 8mm; padding-top: 2.6mm;
  border-top: .2mm solid #d6d3c9; font-size: 7pt; line-height: 3.2mm; color: #5d6570; }
.rh-d-title { font-size: 15pt; font-weight: 700; line-height: 1.2; margin-bottom: 4mm !important; }
.rh-d-text { margin-bottom: 3mm; }
.rh-d-text p + p { margin-top: 2.2mm; }
.rh-d-small { font-size: 9pt; color: #5d6570; }
.rh-d-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9pt; line-height: 3.9mm; margin: 1mm 0 2mm; }
.rh-d-table th { background: #f3f2ed; color: #5d6570; font-size: 8pt; font-weight: 700; text-align: left; padding: 1.6mm 1.5mm; white-space: nowrap; overflow: hidden; }
.rh-d-table td { padding: 2.1mm 1.5mm 1.6mm; border-bottom: .2mm solid #d6d3c9; vertical-align: top; }
.rh-d-table .r { text-align: right; white-space: nowrap; }
.rh-d-table td small { display: block; font-size: 7.5pt; color: #5d6570; }
.rh-d-empty { color: #a0a6ad; text-align: center; }
.rh-d-totals { width: 78mm; margin: 1mm 0 5mm auto; border-collapse: collapse; font-size: 9pt; line-height: 1.3; break-inside: avoid; }
.rh-d-totals th { text-align: left; font-weight: 400; color: #5d6570; padding: .9mm 0; }
.rh-d-totals td { text-align: right; white-space: nowrap; padding: .9mm 0 .9mm 3mm; font-variant-numeric: tabular-nums; }
.rh-d-totals tr.s th, .rh-d-totals tr.s td { border-top: .45mm solid var(--brand, #1e5b47); padding-top: 1.8mm; font-weight: 700; font-size: 10.5pt; color: #1c1f24; }
.rh-d-kv { margin-bottom: 4mm; font-size: 9pt; break-inside: avoid; }
.rh-d-kv h3 { font-size: 9pt; font-weight: 700; padding-bottom: .8mm; border-bottom: .2mm solid #d6d3c9; width: 100mm; }
.rh-d-kv table { width: 100mm; border-collapse: collapse; margin-top: 1mm; }
.rh-d-kv th { text-align: left; font-weight: 400; color: #5d6570; padding: .5mm 0; }
.rh-d-kv td { text-align: right; white-space: nowrap; }
.rh-d-notes { margin-bottom: 3mm; font-size: 8.5pt; line-height: 3.9mm; color: #5d6570; }
.rh-d-notes p + p { margin-top: .8mm; }
.rh-d-pay { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; margin-bottom: 4mm; font-size: 9pt; line-height: 4.2mm; break-inside: avoid; }
.rh-d-pay h3 { font-size: 9pt; font-weight: 700; margin-bottom: .8mm; }
.rh-d-qr { margin: -3.5mm 0 0; width: 26mm; flex: none; text-align: center; }
.rh-d-qr svg, .rh-d-qrph { display: block; width: 26mm; height: 26mm; }
.rh-d-qrph { background: repeating-linear-gradient(45deg, #eee 0 2mm, #f8f8f8 2mm 4mm); }
.rh-d-qr figcaption { font-size: 6.5pt; line-height: 1.2; color: #5d6570; }
.rh-d-closing { margin: 1mm 0 6mm; }
.rh-d-cname { margin-top: 6mm !important; }
.rh-d-sign { font-size: 9pt; break-inside: avoid; margin-bottom: 4mm; }
.rh-d-lines { display: flex; justify-content: space-between; gap: 10mm; margin-top: 13mm; }
.rh-d-lines > div { width: 70mm; }
.rh-d-lines span { display: block; border-top: .25mm solid #1c1f24; }
.rh-d-lines small { display: block; margin-top: 1mm; font-size: 7.5pt; color: #5d6570; }

/* Quittung slip (upper half of A4) */
.rh-slip { padding: 12mm 20mm 0 25mm; }
.rh-q-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; padding-bottom: 2.5mm; border-bottom: .5mm solid var(--brand, #1e5b47); }
.rh-q-from { font-size: 9pt; color: #5d6570; }
.rh-q-title { font-size: 22pt; font-weight: 700; line-height: 1.1; margin-top: 3mm !important; }
.rh-q-no { display: flex; flex-direction: column; align-items: flex-end; gap: 2mm; font-size: 9pt; color: #5d6570; }
.rh-q-no .rh-s-logo { max-height: 16mm; max-width: 45mm; margin: 0; }
.rh-q-rows { width: 100%; border-collapse: collapse; margin-top: 5mm; }
.rh-q-rows th { width: 38mm; text-align: left; vertical-align: top; font-weight: 400; font-size: 9pt; color: #5d6570; padding: 1.4mm 3mm; }
.rh-q-rows td { font-size: 10pt; padding: 1.4mm 0; }
.rh-q-rows tr.big th, .rh-q-rows tr.big td { background: #f3f2ed; padding-top: 3mm; padding-bottom: 3mm; vertical-align: middle; }
.rh-q-rows tr.big td { font-size: 16pt; font-weight: 700; }
.rh-q-sign { display: flex; justify-content: space-between; gap: 10mm; margin-top: 6mm; padding-left: 3mm; font-size: 10pt; }
.rh-q-sign > div:first-child { width: 80mm; }
.rh-q-line { border-top: .25mm solid #1c1f24; margin-top: 14mm; }
.rh-q-sign small { font-size: 7.5pt; color: #5d6570; }
.rh-q-recv { width: 65mm; font-size: 8.5pt; line-height: 1.4; }
.rh-q-cut { position: absolute; left: 8mm; right: 8mm; top: 148.5mm; border-top: .2mm dashed #aaa; }

/* print: only the document */
#rh-print { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html.rh-printing, html.rh-printing body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html.rh-printing body > *:not(#rh-print) { display: none !important; }
  html.rh-printing #rh-print { display: block !important; }
  #rh-print .rh-sheet { box-shadow: none; min-height: 296mm; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #rh-print .rh-ph { display: none; }
}