/* XRechnung-Viewer: Zusatzstile für /xrechnung-viewer/
   Baut auf css/style.css auf (Variablen, Buttons, Seitenkopf). Alle Klassen tragen das Präfix xr-,
   damit nichts von style.css überschrieben wird oder umgekehrt. */

.xr {
  --xr-good: #1b6e3c;
  --xr-good-soft: #e6f4ec;
  --xr-warn: #8a5a00;
  --xr-warn-soft: #fdf3dc;
  --xr-crit: #b3261e;
  --xr-crit-soft: #fbeae9;
  --xr-crit-text: #8e1c15;
  --xr-good-text: #145a31;
  --xr-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
.xr-wrap { max-width: 980px; margin: 0 auto; display: grid; gap: 1rem; }
.xr-wrap > * { min-width: 0; }
.xr-muted { color: var(--muted); }
.xr-mono { font-family: var(--xr-mono); font-size: .93em; }
.xr-sr { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.xr-sr:focus-visible + .btn { outline: 3px solid var(--primary-dark); outline-offset: 2px; }
.xr-loader { position: relative; margin-top: 1.25rem; }
.xr-hint { margin: 1rem 0 0; font-size: .9rem; color: var(--muted); max-width: 52rem; }

/* XML einfügen */
.xr-paste { display: grid; gap: .5rem; }
.xr-paste[hidden] { display: none; }
.xr-paste label { font-size: .88rem; color: var(--muted); }
.xr-paste textarea {
  width: 100%; min-height: 150px; resize: vertical;
  font: .78rem/1.45 var(--xr-mono);
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .8rem;
}
.xr-paste textarea:focus-visible { border-color: var(--primary); }
.xr-row { display: flex; gap: .5rem; }

.xr-error { border: 1px solid var(--xr-crit); background: var(--xr-crit-soft); color: var(--xr-crit-text); padding: .65rem .9rem; border-radius: var(--radius); }
.xr-error[hidden] { display: none; }
.xr-status { display: flex; flex-wrap: wrap; gap: .4rem; }
.xr-chip { font: 500 .75rem/1 var(--font); padding: .4rem .6rem; border-radius: .25rem; background: var(--accent-soft); color: var(--text); overflow-wrap: anywhere; }
.xr-chip.is-warn { background: var(--xr-warn-soft); color: #4a3500; }

/* Rechenprobe */
.xr-check { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .9rem; border-radius: var(--radius); border: 1px solid transparent; font-size: .92rem; }
.xr-check.is-ok { background: var(--xr-good-soft); border-color: var(--xr-good); }
.xr-check.is-bad { background: var(--xr-warn-soft); border-color: var(--xr-warn); }
.xr-dot { flex: none; width: .65rem; height: .65rem; border-radius: 50%; margin-top: .45rem; }
.xr-check.is-ok .xr-dot { background: var(--xr-good); }
.xr-check.is-bad .xr-dot { background: var(--xr-warn); }
.xr-cbody { min-width: 0; }
.xr-check p { margin: 0; }
.xr-check details { margin-top: .4rem; }
.xr-check summary { cursor: pointer; font-weight: 600; }
.xr-check .xr-tablewrap { margin-top: .5rem; }
.xr-check table { border-collapse: collapse; width: 100%; min-width: 460px; font-variant-numeric: tabular-nums; font-size: .82rem; }
.xr-check th, .xr-check td { text-align: left; padding: .25rem .65rem .25rem 0; border-bottom: 1px solid var(--border); }
.xr-check td.xr-r, .xr-check th.xr-r { text-align: right; }
.xr-state-ok { color: var(--xr-good-text); font-weight: 600; }
.xr-state-bad { color: var(--xr-crit-text); font-weight: 600; }

/* Tabs */
.xr-tabs { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; border-bottom: 1px solid var(--border); }
.xr-tab {
  font: 500 .92rem/1 var(--font); background: none; color: var(--muted);
  border: 0; border-bottom: 2px solid transparent; padding: .65rem .75rem; cursor: pointer; margin-bottom: -1px;
}
.xr-tab:hover { color: var(--text); }
.xr-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.xr-bt-toggle { margin-left: auto; font-size: .85rem; color: var(--muted); display: inline-flex; gap: .4rem; align-items: center; padding: .4rem 0; cursor: pointer; }
.xr-bt-toggle input { accent-color: var(--primary); }

/* Rechnungsblatt */
.xr-sheet { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1rem, 4vw, 2.25rem); display: grid; gap: 1.75rem; }
.xr-sheet > * { min-width: 0; }
.xr-blk { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.xr-sheet h3 { font: 500 .75rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .65rem; }
.xr-bt { font: 400 .66rem/1 var(--xr-mono); color: var(--muted); margin-left: .4rem; letter-spacing: 0; text-transform: none; }
#panel-invoice:not(.show-bt) .xr-bt { display: none; }

.xr-doc-head { display: flex; flex-wrap: wrap; gap: .9rem 2rem; justify-content: space-between; align-items: flex-end; }
.xr-eyebrow { font: 500 .75rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem; }
.xr-doc-head h2 { font: 600 clamp(1.75rem, 6vw, 2.5rem)/1.05 var(--font-head); letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.xr-doc-head h2 .xr-mono { font-weight: 500; font-size: .5em; color: var(--muted); letter-spacing: 0; margin-left: .4rem; }
.xr-glance { text-align: right; }
.xr-glance span, .xr-glance small { display: block; font-size: .85rem; color: var(--muted); }
.xr-glance strong { display: block; font: 600 clamp(1.6rem, 5vw, 2.1rem)/1.1 var(--font-head); color: var(--link); font-variant-numeric: tabular-nums; }

.xr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.xr-facts > div { min-width: 0; }
.xr-facts dt, .xr-mini dt { font-size: .78rem; color: var(--muted); letter-spacing: .03em; }
.xr-facts dd, .xr-mini dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.xr-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 2.25rem; }
.xr-party { min-width: 0; }
.xr-pname { font-weight: 600; font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.xr-party address { margin: .25rem 0 .75rem; overflow-wrap: anywhere; }
.xr-mini { display: grid; gap: .5rem; margin: 0; }
.xr-mini > div { min-width: 0; }
.xr-sub { font-size: .85rem; color: var(--muted); font-weight: 400; margin: 0; }

.xr-tablewrap { overflow-x: auto; }
table.xr-lines { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: tabular-nums; }
.xr-lines th { font: 500 .75rem/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.xr-lines th.xr-num { text-align: right; }
.xr-lines td { padding: .75rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.xr-lines .xr-num { text-align: right; white-space: nowrap; }
.xr-lines .xr-pos { width: 3em; color: var(--muted); }
.xr-lines .xr-iname { font-weight: 500; }
.xr-lines .xr-strong { font-weight: 600; }
.xr-cat { font: 500 .68rem/1.4 var(--xr-mono); border: 1px solid var(--border); padding: 0 .25rem; border-radius: 3px; color: var(--muted); margin-left: .4rem; }

.xr-lower { display: grid; gap: 1.75rem; }
.xr-lower > * { min-width: 0; }
@media (min-width: 760px) {
  .xr-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .xr-lower .xr-info { grid-column: 1; grid-row: 1; }
  .xr-lower .xr-totals { grid-column: 2; grid-row: 1; }
}
.xr-info { display: grid; gap: 1.4rem; align-content: start; }
.xr-info p { margin: 0; }
.xr-pre { white-space: pre-line; overflow-wrap: anywhere; }
.xr-info ul { margin: 0; padding-left: 1.1rem; }
.xr-paytype { font-weight: 600; margin: 0 0 .5rem; }
.xr-paybox + .xr-paybox { margin-top: 1rem; }
.xr-copy { font: 500 .75rem/1 var(--font); margin-left: .5rem; padding: .3rem .55rem; border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: var(--radius); cursor: pointer; }
.xr-copy:hover { border-color: var(--primary); color: var(--text); }

table.xr-sum { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xr-sum td { padding: .4rem 0; vertical-align: top; }
.xr-sum td:last-child { text-align: right; white-space: nowrap; padding-left: .75rem; }
.xr-sum tr.xr-rule td { border-top: 1px solid var(--border); padding-top: .65rem; }
.xr-sum tr.xr-total td { border-top: 2px solid var(--text); padding-top: .65rem; font: 600 1.4rem/1.2 var(--font-head); }

.xr-tech .xr-facts dd { font-weight: 400; }
.xr-srcwrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
#src { margin: 0; padding: .9rem 1rem; font: .78rem/1.5 var(--xr-mono); color: var(--text); white-space: pre; }

.xr-dropveil {
  position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  background: rgba(246, 245, 244, .92);
  font: 600 1.5rem/1.2 var(--font-head); color: var(--link); pointer-events: none;
}
.xr-dropveil span { border: 3px dashed var(--primary); border-radius: var(--radius-lg); padding: 2.25rem 3rem; background: #fff; }
body.xr-dragging .xr-dropveil { display: flex; }

/* Hinweis nach Erreichen der Nutzungsgrenze */
.xr-limit { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 4vw, 2rem); }
.xr-limit h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 .6rem; }
.xr-limit p { margin: 0 0 1.25rem; color: var(--muted); max-width: 44rem; }

.xr-powered { margin: .75rem 0 0; text-align: center; font-size: .85rem; color: var(--link); }
.xr-powered a { color: var(--link); font-weight: 600; text-decoration: none; }
.xr-powered a:hover { color: var(--primary-dark); text-decoration: underline; }
.xr-notice { margin: 0; padding: .65rem .85rem; border: 1px solid #d9a441; background: #fff6e0; color: #4a3500; border-radius: var(--radius); font-size: .85rem; line-height: 1.45; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

@media (max-width: 520px) {
  .xr-row .btn { flex: 1; }
}

/* Druck: nur das Rechnungsblatt */
/* Fußzeile auf jeder gedruckten Seite (Seitenrand-Box, Chrome/Edge ab Version 131) */
@page {
  margin: 14mm 14mm 20mm;
  @bottom-center { content: "Powered by Reichel.systems GmbH"; font: 600 8pt Inter, "Segoe UI", Arial, sans-serif; color: #166785; vertical-align: middle; }
}
@media print {
  .site-header, .site-footer, .page-head, .consent, .skip, .xr-paste, .xr-error, .xr-status,
  #checks, .xr-tabs, #panel-source, .xr-dropveil, .xr-copy { display: none !important; }
  #panel-invoice[hidden] { display: block !important; }
  body { font-size: 11pt; }
  .section, .section.alt { padding: 0; background: none; }
  .container { width: 100%; }
  .xr-wrap { max-width: none; gap: 0; }
  .xr-sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: 1.25rem; }
  .xr-tablewrap { overflow: visible; }
  table.xr-lines { min-width: 0; }
  .xr-lines tr, .xr-party, .xr-sum tr, .xr-paybox { break-inside: avoid; }
  .xr-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .xr-lower .xr-info { grid-column: 1; grid-row: 1; }
  .xr-lower .xr-totals { grid-column: 2; grid-row: 1; }
}