/* Rechner teaser home/vorratsrechner (template-parts/home/vorratsrechner.php). Source: docs/design/referenz/01-homepage.html.
   Mobile first, desktop from 900px. The Hamish note comes from hamstern_hinweis_box.css. */

.calc { background: var(--brand); padding-block: 40px; }
.calc-grid { display: flex; flex-direction: column; gap: 16px; }
.calc .eyebrow { color: var(--brand-ink); }
.calc h2 { font-size: 26px; font-weight: 800; margin-top: 4px; }
.calc .long, .calc .calc-hint { display: none; }
.calc-box { background: var(--surface); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.calc-box .fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calc-box .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calc-box .field label { font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.calc-box .field input, .calc-box .field select { font: 600 16px var(--f-body); padding: 10px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
.calc-box .result { background: var(--brand-soft); border-radius: var(--r); padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-box .result .num { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-box .result .unit { font-size: 12px; color: var(--ink-2); }
.calc-box .result small { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
.calc-box .btn { width: 100%; }

/* ---------- Desktop ---------- */
@container page (min-width: 900px) {
  .calc { padding-block: 64px; }
  .calc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .calc h2 { font-size: 38px; }
  .calc .long { display: block; margin-top: 16px; max-width: 30em; }
  .calc .calc-hint { display: grid; margin-top: 28px; max-width: 420px; }
  .calc-box { padding: 28px; gap: 20px; }
  .calc-box .field label { font-size: 13px; }
  .calc-box .result { padding: 20px; }
  .calc-box .result .num { font-size: 40px; }
}