/* Rate Card unter der Live Calculation (_rate_card.html.erb). Standardmäßig
   zugeklappt; der Kopf ist der Call to Action. Farben aus den App-Tokens,
   damit Hell/Dunkel mitläuft. */
.rate-card {
  margin-top: var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--fs-14);
}
.rate-card > summary { list-style: none; cursor: pointer; }
.rate-card > summary::-webkit-details-marker { display: none; }
.rate-card__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
}
.rate-card[open] .rate-card__summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rate-card__summary::after {
  content: "▸"; grid-row: 1 / span 2; grid-column: 2; align-self: center;
  color: var(--color-warning-text); transition: transform .15s ease;
}
.rate-card[open] .rate-card__summary::after { transform: rotate(90deg); }
.rate-card__title { font-weight: var(--fw-semibold); color: var(--color-text); }
.rate-card__cta { grid-column: 1; color: var(--color-warning-text); font-weight: var(--fw-semibold); }
.rate-card__summary:hover .rate-card__cta { text-decoration: underline; }

.rate-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.rate-card__target { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-semibold); }
.rate-card__target-input input {
  width: 4.5rem; padding: var(--space-1) var(--space-2); text-align: right;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}
.rate-card__hint { margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-12); color: var(--color-text-subtle); }
.rate-card__status { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.rate-card__status--miss { background: var(--color-danger-bg); color: var(--color-danger); }
.rate-card__status--ok { background: var(--color-success-bg); color: var(--color-success-text); }

.rate-card__values { margin: 0; }
.rate-card__values > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--color-border);
}
.rate-card__values dt { color: var(--color-text-muted); }
.rate-card__values dd { margin: 0; text-align: right; font-weight: var(--fw-semibold); white-space: nowrap; }
.rate-card__values small {
  display: block; font-size: var(--fs-12); font-weight: 400; color: var(--color-text-subtle); white-space: normal;
}
.rate-card__messages p {
  margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--color-bg-subtle); font-size: var(--fs-12);
}
/* „Selbst mit 0 € … fehlen noch …“ statt „nicht erreichbar“ (12.10.2026). */
.rate-card__miss {
  display: block; max-width: 13rem; margin-left: auto;
  font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--color-danger);
  white-space: normal;
}