/* ═══════════════════════════════════════════════════════════════════
   rechner.css — /rechner only ("Wo verlieren Sie gerade Geld?")

   Loaded AFTER css/werk.css, which already carries the whole calculator
   skin (.bleed, .bleed-tabs, .bleed-tab, .bleed-panel, .bleed-grid,
   .bleed-slider, .bleed-val, .bleed-result, .bleed-num, .bleed-cta,
   .bleed-note) from the days when this thing lived on the homepage.
   Nothing in here repeats any of that. What is here is only what the
   page grew when it moved out on its own: a page hero, the "Beispielwerte"
   chip, the second output line in HOURS, the formula receipt and the
   two closing blocks.

   Colours are tokens ONLY — no literal hex anywhere below. "Ihre Farben"
   repaints the whole studio site by swapping the token values on
   :root[data-farbe], and a hard-coded colour here would survive the swap
   and break the palette on this page alone.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ PAGE HERO ══
   Same construction as services.html/about.html: a short block above the
   first real section, with the top padding clearing the fixed nav. Those
   pages each keep their own copy in a <style> block; this page has a
   stylesheet already, so it lives here instead. */
.page-hero {
  padding-top: clamp(6.5rem, 13vh, 8.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page-hero h1 { max-width: 17ch; margin-bottom: 1rem; }

/* ══ HERO: RESERVE THE GERMAN HEIGHT ══
   The markup is authored in German and js/components.v2.js swaps the English in
   AFTER the page has painted. German runs longer, so on a narrow screen the
   headline or the lead loses a line the moment an English visitor's browser
   switches — and the calculator below jumps up. Measured on mobile Lighthouse
   at 412px: CLS 0.164 on one run of two, 0.000 on the other, purely on that
   timing. So reserve the taller (German) height and the swap becomes a no-op.

   Every number below is the GERMAN line count in that band, measured at
   320/360/375/390/412/440/480/520/600/768/1024/1350/1440 px — never a guess,
   and never more than German already occupies, so a German reader sees no
   added space at any width. Above 560px both languages take the same lines and
   no rule is needed. `lh` is one line box; the em value repeats it for browsers
   without `lh` (Safari < 16.4) — headline line-height .96, lead 1.55.
   Re-measure these bands if the hero copy is ever rewritten. */
@media (max-width: 560px) {                                  /* lead: 4 lines */
  .page-hero .lead { min-height: 6.2em; min-height: 4lh; }
}
@media (max-width: 500px) {                                  /* h1:   3 lines */
  .page-hero h1 { min-height: 2.88em; min-height: 3lh; }
}
@media (max-width: 430px) {                                  /* lead: 5 lines */
  .page-hero .lead { min-height: 7.75em; min-height: 5lh; }
}
@media (max-width: 385px) {                                  /* h1:   4 lines */
  .page-hero h1 { min-height: 3.84em; min-height: 4lh; }
}
@media (max-width: 340px) {                        /* h1: 5, lead: 6 — 320px */
  .page-hero h1    { min-height: 4.8em; min-height: 5lh; }
  .page-hero .lead { min-height: 9.3em; min-height: 6lh; }
}

/* ══ "BEISPIELWERTE" CHIP ══
   Sits directly above the sliders rather than in the page footnote,
   because that is where the defaults are and where the reader forms the
   impression that the numbers mean something about their own business.
   Dim, small, but never hidden: it is the honesty label, not decoration. */
.rch-badge {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .3rem .85rem;
  margin-bottom: 1.4rem;
  color: var(--bone-dim);
  letter-spacing: .02em;
}

/* ══ RESULT CARD ══
   werk.css gives .bleed-result a 1px box on all four sides. Here the left
   edge becomes a 3px brass rule instead — the page has exactly one number
   that matters and this is the seam that points at it. Deliberate
   asymmetry, not a uniform card. */
.rch-out {
  border-left: 3px solid var(--brass);
  position: sticky;
  top: clamp(5.5rem, 11vh, 7rem);
}
/* Sticky is a desktop affordance: the result stays beside the sliders while
   a long panel is scrolled. On a phone the two stack, so sticking the
   result would park it over the inputs the visitor is dragging. */
@media (max-width: 820px) {
  .rch-out { position: static; }
}

/* ══ THE HOURS LINE ══
   The second output Beri asked for. It is not a smaller copy of the euro
   figure — for a salon or an engineering desk the hours ARE the argument,
   so it gets the condensed display cut and the accent colour, one step
   quieter than the euro number above it. Separated by a hairline so the
   two never read as one long sentence of digits. */
.rch-hours {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.rch-hours > .r-h {
  font-variation-settings: var(--cond);
  font-weight: 260;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1;
  color: var(--brass);
  white-space: nowrap;
}
.rch-hours-lbl { color: var(--bone-dim); max-width: 30ch; }

/* ══ THE FORMULA RECEIPT ══
   Every panel prints its own arithmetic under the result. A calculator that
   shows a five-figure number and hides how it got there reads as a sales
   trick; this line is what makes the page checkable. It wraps rather than
   scrolls — the Maschinenbau formula is the long one and must stay readable
   at 390px. */
.rch-formula {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  line-height: 1.85;
  overflow-wrap: break-word;
}

/* ══ SLIDER COLUMN ══
   werk.css sizes the label text for the old homepage panel, where every
   label was three or four words. Two of the new ones are a full question
   ("Anfragen pro Monat, die bei über zwei Tagen Antwortzeit verloren
   gehen"), so the label needs room to wrap while the value stays pinned
   right and unwrapped. */
.bleed-sliders label > span:first-child { max-width: 34ch; }
.bleed-sliders .bleed-val { flex-shrink: 0; }

/* ══ "SO RECHNE ICH" ══
   On the paper ground, so the honest-maths block reads as a different kind
   of page furniture from the calculator itself. Two columns on desktop:
   four short paragraphs in one column would be a grey wall. */
.rch-how {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
  max-width: 92ch;
}
.rch-how p {
  break-inside: avoid;
  margin-bottom: 1.3rem;
  color: var(--paper-dim);
  max-width: 46ch;
  line-height: 1.75;
}
.rch-how p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .rch-how { columns: 1; }
}