/* Nutzungsrechte-Rechner in the look of the website (public/css/site.css tokens: Diatype Semi Mono for text, Diatype Bold for numbers and headings, one grey ground,
   Electric for the result, round pills and boxes, no separator lines). Everything is scoped to .rechner. Markup: src/views/site/tools/nutzungsrechte.ejs. */
.rechner {
  container-type: inline-size;
  --r-mid: color-mix(in srgb, var(--void) 58%, var(--grey));
  --r-faint: color-mix(in srgb, var(--void) 38%, var(--grey));
  --r-surface: color-mix(in srgb, var(--grey), var(--void) 6%);
  --r-big: clamp(1.5rem, calc(var(--d) * 0.5), 2rem);
  font: 500 var(--body)/1.25 var(--mono); letter-spacing: 0; color: var(--void);
  padding-bottom: 6rem;
}
.rechner *, .rechner *::before, .rechner *::after { box-sizing: border-box; }
.rechner [hidden] { display: none !important; }
.rechner :focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
.site .rechner a { color: var(--void); text-underline-offset: 0.18em; }
.site .rechner a:hover { color: var(--electric); }
.rechner button { font: inherit; letter-spacing: inherit; color: inherit; }
.rechner input[type=number]::-webkit-outer-spin-button, .rechner input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.rechner input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.rc-intro { margin: 0 0 3rem; max-width: 34rem; color: var(--r-mid); }
.rc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 3rem; align-items: start; }
.rc-side { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow: auto; }

/* sections: set apart by space, not by lines */
.rechner section { padding: 0 0 3.5rem; }
.sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.75rem; }
.sec-head .spacer { flex: 1; }
.sec-num { font-size: var(--mark); line-height: 1.2; color: var(--r-faint); }
.sec-title { font: 700 var(--r-big)/1.03 var(--head); letter-spacing: -0.05em; }

/* inputs: flat rounded fields */
.field-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
.field label, .text-field label { display: block; margin-bottom: 0.5rem; font-size: var(--mark); line-height: 1.2; color: var(--r-mid); }
.field input, .text-field input { display: block; width: 100%; border: 0; border-radius: var(--r-box); background: var(--r-surface); color: var(--void); outline: none; }
.field input { width: 9.5rem; padding: 0.45rem 0.9rem; font: 700 var(--r-big)/1.2 var(--head); letter-spacing: -0.03em; }
.text-field { margin-top: 2rem; max-width: 34rem; }
.text-field input { padding: 0.75rem 1rem; font: inherit; }
.text-field input::placeholder { color: var(--r-faint); }
.field input:focus-visible, .text-field input:focus-visible { outline: 2px solid var(--electric); }
.field .unit, .text-field .unit { margin-top: 0.4rem; font-size: var(--mark); line-height: 1.2; color: var(--r-mid); }

/* scheme switch and other small pills */
.scheme-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scheme-switch button { min-height: 2rem; padding: 0.25rem 0.9rem; border: 1px solid var(--void); border-radius: var(--r-pill); background: transparent; font-size: var(--mark); line-height: 1.2; cursor: pointer; }
.scheme-switch button:hover { background: var(--r-surface); }
.scheme-switch button[aria-pressed="true"] { background: var(--void); color: var(--grey); }
.scheme-note { max-width: 34rem; margin: 0 0 2rem; font-size: var(--mark); line-height: 1.3; color: var(--r-mid); }

/* option groups */
.group { margin-bottom: 2.25rem; }
.group:last-child { margin-bottom: 0; }
.group-label { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; font-size: var(--mark); line-height: 1.2; color: var(--r-mid); }
.info-btn, .link-btn, .formula-toggle, .sub .dismiss { padding: 0; border: 0; background: none; color: var(--r-mid); font-size: var(--mark); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.info-btn:hover, .link-btn:hover, .formula-toggle:hover, .sub .dismiss:hover { color: var(--electric); }
.note-toggle { display: inline-block; margin-bottom: 1.5rem; }
.info-text { display: none; max-width: 34rem; margin: 0 0 1rem; color: var(--r-mid); font-size: var(--mark); line-height: 1.3; }
.info-text.open { display: block; }
.info-text b { color: var(--void); font-weight: 500; }
.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt { padding: 0.45em 1em; border: 1px solid var(--void); border-radius: var(--r-pill); background: transparent; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.opt .f { margin-left: 0.45em; color: var(--r-mid); }
.opt:hover { background: var(--r-surface); }
.opt[aria-pressed="true"] { background: var(--void); color: var(--grey); }
.opt[aria-pressed="true"] .f { color: var(--r-faint); }
.preset { max-width: 34rem; margin-top: 2.25rem; font-size: var(--mark); line-height: 1.3; color: var(--r-mid); }
.preset button { padding: 0; border: 0; background: none; color: var(--void); font-size: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.preset button:hover { color: var(--electric); }
#adjust-groups { margin-bottom: 2.25rem; }
#stagger-mount { margin-top: 2.5rem; }

/* result panel: one slightly darker surface, no outline */
.panel { padding: 1.5rem; border-radius: var(--r-box); background: var(--r-surface); }
.panel-label { margin: 0 0 0.75rem; font-size: var(--mark); line-height: 1.2; color: var(--r-mid); }
.formula { margin: 0; font: 700 clamp(2rem, calc(var(--d) * 0.8), 3rem)/1.03 var(--head); letter-spacing: -0.05em; }
.formula .nf { color: var(--electric); }
.formula-toggle { margin-top: 0.75rem; }
.formula-detail { margin-top: 1rem; }
.formula-sum { margin: 0; color: var(--r-mid); }
.formula-sum .op, .formula-legend .op { color: var(--r-faint); }
.formula-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin: 0.6rem 0 0; font-size: var(--mark); line-height: 1.2; color: var(--r-mid); }
.formula-legend span { white-space: nowrap; }
.formula-legend .op { padding: 0 0.4em; }
.result { margin-top: 2.25rem; }
.result table, .sub table { width: 100%; border-collapse: collapse; }
.result td { padding: 0.55rem 0; vertical-align: baseline; }
.result .desc { padding-right: 1rem; color: var(--r-mid); }
.result .desc small, .sub .meta { display: block; font-size: var(--mark); line-height: 1.2; color: var(--r-faint); }
.result .val { text-align: right; white-space: nowrap; }
.result tr.total td { padding-top: 1.25rem; }
.result tr.total .desc { color: var(--void); }
.result tr.total .val { font: 700 var(--r-big)/1.03 var(--head); letter-spacing: -0.04em; color: var(--electric); }
.vat-toggle { display: inline-flex; gap: 0.4rem; margin-left: 0.5rem; }
.vat-toggle button { padding: 0; border: 0; background: none; color: var(--r-faint); font-size: var(--mark); cursor: pointer; }
.vat-toggle button[aria-pressed="true"] { color: var(--void); text-decoration: underline; text-underline-offset: 0.18em; }
.sub { margin-top: 2rem; }
.sub-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.sub-title { font-size: var(--mark); line-height: 1.2; color: var(--r-mid); }
.sub td { padding: 0.25rem 0; vertical-align: baseline; }
.sub .lbl { font-size: var(--mark); color: var(--r-mid); }
.sub .a, .sub .b { text-align: right; white-space: nowrap; }
.sub .a { color: var(--r-mid); }
.sub .delta { color: var(--electric); }
.sub .meta { padding-top: 0.5rem; }

/* actions: pills like every button of the site */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.actions button { min-height: 2.5rem; padding: 0.4rem 1.1rem; border: 1px solid var(--void); border-radius: var(--r-pill); background: transparent; line-height: 1.2; cursor: pointer; }
.actions button:hover { background: var(--void); color: var(--grey); }
.actions button.quiet { border-color: var(--r-faint); color: var(--r-mid); }
.actions button.quiet:hover { border-color: var(--void); color: var(--grey); }
.confirm { align-self: center; font-size: var(--mark); color: var(--r-mid); opacity: 0; transition: opacity 0.25s; }

/* text at the end */
.rc-foot { max-width: 44rem; margin-top: 1rem; font-size: var(--mark); line-height: 1.4; color: var(--r-mid); }

/* the two overlays (offer text, sources) */
.overlay { position: fixed; inset: 0; z-index: 70; display: none; overflow: auto; background: color-mix(in srgb, var(--grey) 97%, transparent); }
.overlay.open { display: block; }
.overlay-inner { max-width: 44rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.overlay-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; }
.overlay-title { font: 700 var(--r-big)/1.03 var(--head); letter-spacing: -0.05em; }
.overlay pre { margin: 0; padding: 1.5rem; border-radius: var(--r-box); background: var(--r-surface); font: inherit; white-space: pre-wrap; }
.overlay .actions { margin-top: 1.5rem; }
.sources .src-group { margin: 2rem 0 0.4rem; font: 700 1.25rem/1.03 var(--head); letter-spacing: -0.05em; }
.sources .src-group:first-child { margin-top: 0; }
.sources .src-note { max-width: 34rem; margin: 0 0 0.6rem; color: var(--r-mid); }
.sources ul { margin: 0; padding: 0; list-style: none; }
.sources li { padding: 0.25rem 0; }

/* narrow place (a phone, or the content column of a small window): the result panel moves below the inputs and its total stays in view in a bar */
.bar { display: none; }
@container (max-width: 54rem) {
  .rc-layout { display: block; }
  .rc-side { position: static; max-height: none; overflow: visible; margin-top: 1rem; }
}
@media (max-width: 63.99rem) {
  .bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; border-radius: var(--r-box) var(--r-box) 0 0; background: var(--r-surface); }
  .bar-inner { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--pad-x); }
  .bar .lbl { font-size: var(--mark); color: var(--r-mid); }
  .bar .sum { font: 700 1.25rem/1.03 var(--head); letter-spacing: -0.04em; color: var(--electric); }
}
@media (prefers-reduced-motion: reduce) { .rechner * { transition: none !important; } }