/* Seite /e-rechnung. Ergänzt tools.css, ersetzt es nicht.
   Es werden ausschließlich Farbnamen benutzt, die in tools.css für hell und
   dunkel gesetzt sind. Erfundene Namen fallen auf ihren hellen Rückfallwert
   zurück, und dann steht in der dunklen Fassung heller Text auf hellem Grund. */

.beispiele{margin:12px 0 0;color:var(--ink-3);font-size:.92rem;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.big.gruen{color:var(--clean)}
.big.gelb{color:var(--caution)}
.big.rot{color:var(--hit)}

.rechnung{border:1px solid var(--line);border-radius:var(--radius,12px);
  background:var(--surface);color:var(--ink);padding:20px 22px;margin:14px 0 0}
.rkopf{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:18px}
.rkopf h3{margin:0 0 6px;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.rkopf div{line-height:1.55}

.rtab{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:.94rem}
.rtab caption{text-align:left;font-weight:700;padding:0 0 6px;color:var(--ink)}
.rtab th{text-align:left;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3);border-bottom:1px solid var(--line);
  padding:6px 8px 6px 0;font-weight:600}
.rtab td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line-soft);
  vertical-align:top;color:var(--ink-2)}
.rtab th:last-child,.rtab td:last-child{text-align:right;padding-right:0}
.rtab .klein{font-size:.85rem;color:var(--ink-3)}
.kopfdaten td:first-child{color:var(--ink-3);width:42%}
.kopfdaten td:last-child{color:var(--ink);font-weight:600}
.summen{max-width:420px;margin-left:auto}
.summen td{color:var(--ink-2)}
.summen tr.dick td{font-weight:700;color:var(--ink);font-size:1.05rem;
  border-bottom:2px solid var(--line)}
.zahlung{margin:18px 0 0;color:var(--ink-2);line-height:1.6}

.befund{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.befund:last-child{border-bottom:0}
.befund .marke{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:.8rem;font-weight:700;
  margin-top:2px}
.befund.ok .marke{background:var(--clean-soft);color:var(--clean)}
.befund.hinweis .marke{background:var(--caution-soft);color:var(--caution)}
.befund.fehler .marke{background:var(--hit-soft);color:var(--hit)}
.befund p{margin:0;line-height:1.55;color:var(--ink)}
.befund .quelle{margin-top:4px;font-size:.85rem;color:var(--ink-3)}

.rohdaten{margin:14px 0 0}
.rohdaten summary{cursor:pointer;color:var(--ink-2);font-size:.94rem}
.rohdaten pre{margin:10px 0 0;padding:14px;overflow:auto;max-height:420px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm,6px);font-size:.82rem;line-height:1.5;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-word}

@media (max-width:640px){
  .rkopf{grid-template-columns:1fr;gap:16px}
  .rtab{font-size:.88rem}
  .summen{max-width:none}
}

@media print{
  .tnav,.krume,.drop,#befundeSec,#rohSec,footer,.hinweis,.faq,.weitergeben,
  .werkzeugkopf,#drucken{display:none !important}
  .rechnung{border:0;padding:0}
}