/* State: Fußzeile + Alt-Chips (nur Farbe, gleiche Maße wie .chip) */

:root {
  --foot-h: 28px;
  --journey-accent: #4a6fa5;
  --state-alt-bg: #f0f3f6;
  --state-alt-fg: #5a6570;
  --state-alt-border: #b8c4ce;
}

footer {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--foot-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: #f5f5f5;
  border-top: 1px solid var(--c-border, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--c-muted, #666);
  box-sizing: border-box;
}

.state-gate {
  padding: 1.25rem 1rem 0.5rem;
  text-align: center;
}
.state-gate p {
  margin: 0.5rem 0 1rem;
  color: var(--c-muted, #666);
  font-size: 0.95rem;
}
.state-gate .choices {
  justify-content: center;
}

/* Alt-Chips: exakt wie .chip, nur andere Farben (kein padding/font override) */
.journey .choices .chip.chip--alt {
  background: var(--state-alt-bg);
  color: var(--state-alt-fg);
  border-color: var(--state-alt-border);
}
.journey .choices .chip.chip--alt:hover {
  background: #e3e8ed;
  color: #4a5560;
  border-color: #a8b4be;
}