/* Rechnungsheft – Rechner (mwst, skonto, verzugszinsen, girocode, kleinunternehmer). Nur Design-Tokens aus site.css. */
.calc {
  --calc-field: color-mix(in srgb, var(--muted) 45%, var(--line));
  --calc-tint: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.calc *, .calc *::before, .calc *::after { box-sizing: border-box; }
.calc [hidden] { display: none !important; }

/* ---------- Formular ---------- */
.calc-form { padding: 20px 16px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.calc-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.calc-fs { border: 0; padding: 0; }
.calc-label { font-weight: 600; font-size: .95rem; padding: 0; }
.calc-hint { margin: 0; color: var(--muted); font-size: .85rem; }
.calc-hint--tip { padding-left: 10px; border-left: 3px solid var(--brand-soft); }
.calc-error { margin: -6px 0 0; color: var(--danger); font-size: .88rem; font-weight: 500; }
.calc-status { margin: -8px 0 0; font-size: .88rem; color: var(--muted); min-height: 1.3em; overflow-wrap: anywhere; }
.calc-status.is-ok { color: var(--ok); font-weight: 600; }
.calc-status.is-err { color: var(--danger); }

.calc-input {
  width: 100%; min-width: 0; height: 48px; padding: 0 12px;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--calc-field); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
select.calc-input {
  padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
input[type="date"].calc-input { min-height: 48px; }
.calc-input:hover { border-color: var(--muted); }
.calc-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.calc-input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.calc-input[aria-invalid="true"] { border-color: var(--danger); }

.calc-affix { position: relative; display: block; }
.calc-affix .calc-input { padding-right: 52px; text-align: right; }
.calc-unit {
  position: absolute; right: 1px; top: 1px; bottom: 1px; min-width: 44px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .9rem; background: var(--bg);
  border-left: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; pointer-events: none;
}
.calc-grid2, .calc-grid3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.calc-grid3 { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.calc-grid3 .calc-affix .calc-input { padding-right: 56px; }

/* Segmentierte Auswahl */
.calc-seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--calc-field); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; max-width: 100%; }
.calc-seg--wide { width: 100%; }
.calc-seg-opt { position: relative; flex: 1 1 auto; display: flex; }
.calc-seg-opt + .calc-seg-opt { border-left: 1px solid var(--calc-field); }
.calc-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-seg-opt span {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 6px 16px; font-weight: 600; font-size: .95rem; color: var(--ink);
  cursor: pointer; user-select: none; transition: background .15s, color .15s;
}
.calc-seg-opt span:hover { background: var(--brand-soft); }
.calc-seg-opt input:checked + span { background: var(--brand); color: var(--on-brand); }
.calc-seg-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -4px; box-shadow: inset 0 0 0 3px var(--on-brand); }
.calc-custom { max-width: 160px; margin-top: 4px; }

.calc-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.calc-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }

/* ---------- Ergebnis ---------- */
.calc-result { padding: 20px 16px; background: var(--calc-tint); border-top: 1px solid var(--line); display: grid; gap: 16px; align-content: start; min-width: 0; }
.calc-big { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.calc-big-text { display: grid; gap: 2px; min-width: 0; }
.calc-big-label { color: var(--muted); font-size: .9rem; font-weight: 600; }
.calc-big-value { font-size: clamp(1.7rem, 7vw, 2.25rem); font-weight: 700; line-height: 1.15; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }

.calc-rows { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px; }
.calc-row { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) 36px; gap: 8px; align-items: center; padding: 8px 0; min-height: 48px; }
.calc-row + .calc-row { border-top: 1px solid var(--line); }
.calc-row-label { color: var(--muted); font-size: .92rem; }
.calc-row-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-row--sub .calc-row-label { padding-left: 14px; font-size: .86rem; }
.calc-row--sub .calc-row-value { font-weight: 500; color: var(--muted); }
.calc-row--sum .calc-row-label { color: var(--ink); font-weight: 600; }
.calc-row--sum .calc-row-value { font-size: 1.08rem; }
.calc-row--note { grid-template-columns: minmax(0, 1fr) 36px; }
.calc-row-label { overflow-wrap: normal; }
.calc-row--note .calc-row-label { color: var(--ink); }
.calc-copy-spacer { width: 36px; }

.calc-copy {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.calc-copy:hover { background: var(--brand-soft); color: var(--brand); }
.calc-copy:focus-visible, .calc-btn:focus-visible, .calc-details summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.calc-big .calc-copy { border-color: var(--line); flex: none; }
.calc-copy.is-done, .calc-btn.is-done { color: var(--ok); border-color: var(--ok); }

.calc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; text-align: center; text-decoration: none;
  color: var(--brand); background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.calc-btn:hover { background: var(--brand-soft); }
.calc-btn--primary { background: var(--brand); color: var(--on-brand); }
.calc-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.calc-btn:disabled { opacity: .45; cursor: not-allowed; }
.calc-btn--small { min-height: 36px; padding: 0 12px; font-size: .88rem; }
.calc-btn.is-done { background: var(--surface); }
.calc-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.calc-actions .calc-btn--primary { flex: 1 1 auto; }
.calc-actions--center { justify-content: center; }
.calc-actions--center .calc-btn { flex: 1 1 auto; }

.calc-textcopy { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; background: var(--surface); border: 1px dashed var(--calc-field); border-radius: var(--radius); }
.calc-textcopy:has(.calc-textcopy-text:empty) { display: none; }
.calc-textcopy-label { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.calc-textcopy-text { margin: 0; font-size: .95rem; }

.calc-note { margin: 0; font-size: .88rem; color: var(--muted); }

/* Bewertung */
.calc-verdict { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); }
.calc-verdict.is-ok { border-left-color: var(--ok); }
.calc-verdict.is-warn { border-left-color: var(--accent); }
.calc-verdict.is-bad { border-left-color: var(--danger); }
.calc-verdict-title { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.calc-verdict.is-ok .calc-verdict-title { color: var(--ok); }
.calc-verdict.is-bad .calc-verdict-title { color: var(--danger); }
.calc-verdict-text { margin: 0; font-size: .95rem; }

/* Tabelle */
.calc-tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.calc-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.calc-table caption { caption-side: top; text-align: left; padding: 10px 12px 4px; font-weight: 600; font-size: .85rem; color: var(--muted); }
.calc-table th, .calc-table td { padding: 8px 12px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); }
.calc-table thead th { color: var(--muted); font-weight: 600; border-top: 0; }
.calc-table th:first-child { text-align: left; }
.calc-table tbody th:first-child { white-space: normal; min-width: 7.5em; }
@media (max-width: 420px) { .calc-table th, .calc-table td { padding: 8px 8px; } }
.calc-table tbody th { font-weight: 600; }
.calc-table tr.is-current { background: var(--brand-soft); }
.calc-table tr.is-current th { color: var(--brand); }
.calc-table-sum th, .calc-table-sum td { font-weight: 700; border-top: 2px solid var(--line); }

/* Fortschrittsbalken (Kleinunternehmer) */
.calc-meter { display: grid; gap: 6px; }
.calc-meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .88rem; }
.calc-meter-head span:first-child { color: var(--muted); }
.calc-meter-head span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-meter-track { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.calc-meter-fill { height: 100%; width: calc(var(--v, 0) * 1%); background: var(--brand); border-radius: 99px; transition: width .25s ease; }
.calc-meter.is-over .calc-meter-fill { background: var(--danger); }
.calc-meter.is-over .calc-meter-head span:last-child { color: var(--danger); }
.calc-notes19 { display: grid; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px dashed var(--calc-field); border-radius: var(--radius); }

/* GiroCode */
.calc-result--qr { justify-items: center; }
.calc-result--qr > * { width: 100%; }
.calc-qr { margin: 0; display: grid; justify-items: center; gap: 10px; }
.calc-qr-box {
  width: min(100%, 264px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.calc-qr-box canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.calc-qr-empty { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }
.calc-qr figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; font-size: .9rem; }
.calc-qr figcaption span { color: var(--muted); overflow-wrap: anywhere; }
.calc-details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.calc-details summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: .92rem; color: var(--brand); }
.calc-details[open] { padding-bottom: 14px; }
.calc-pre {
  margin: 0 0 10px; padding: 10px 12px; font-family: var(--mono); font-size: .8rem; line-height: 1.45;
  white-space: pre-wrap; word-break: break-all; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}

.calc-sr { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ---------- Breiter: Formular links, Ergebnis rechts ---------- */
@media (min-width: 760px) {
  .calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .calc-form, .calc-result { padding: 24px; }
  .calc-result { border-top: 0; border-left: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .calc *, .calc *::before, .calc *::after { transition: none !important; }
}
@media print {
  .calc { box-shadow: none; }
  .calc-copy, .calc-btn, .calc-actions, .calc-details summary { display: none !important; }
}