/* ─────────────────────────────────────────────
   wertstrom.css — Wertstrom-Analyse-Seite
   Setzt main.css (Tokens, Fonts, Header, Footer) voraus.
───────────────────────────────────────────── */

/* ── Seite: durchgehend dunkel ── */
body.ws-page {
  background: var(--dark);
}

/* ── Haupt-Layout: vertikal zentriert ── */
.ws-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 50px);
  padding: 32px 20px;
}

.ws-card {
  width: 100%;
  max-width: 520px;
}

/* ── Ein Satz pro Zustand ── */
.ws-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 4.2vw, 18px);
  color: rgba(247, 245, 240, 0.55);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 28px;
}

/* ── Toggle-Zeile (zentriert) ── */
.ws-toggle-row {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

/* ── Pill-Toggle ── */
.ws-pill {
  display: inline-flex;
  background: var(--green);
  border-radius: 999px;
  padding: 4px;
}

.ws-pill-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(247, 245, 240, 0.75);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.ws-pill-btn.active {
  background: var(--green-br);
  color: #fff;
}

/* ── SVG-Illustrationen ── */
.ws-svg {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.ws-svg.hidden {
  display: none;
}

/* ── Vorher-Kennzahl (separat, zurückhaltend) ── */
.ws-vorher-metric {
  text-align: center;
  margin-bottom: 24px;
}

.ws-vorher-metric.hidden {
  display: none;
}

.ws-big-num {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(38px, 11vw, 52px);
  color: rgba(247, 245, 240, 0.85);
  letter-spacing: -0.03em;
  line-height: 1;
}

.ws-unit {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(247, 245, 240, 0.4);
  margin-left: 8px;
}

/* ── Werker-Toggle (nur Nachher) ── */
#ws-worker-row.hidden {
  display: none;
}