/* ══ Termine im Umkreis (Feedback #77) ══════════════════════════════════
   Feld "Umkreis" im Filterformular von /termine (Ort/PLZ + Radius), Knopf
   "Um meine Stadt", Statuszeile unter dem Formular und Entfernungsmarke
   "≈ 12 km" auf der Terminkarte. Farben nur ueber die Palette (hell/dunkel). */

body.pn-ui .uk-feld { flex: 1 1 16rem; }
body.pn-ui .uk-eingabe {
  display: flex; gap: 0.5rem; align-items: stretch; min-width: 0;
}
body.pn-ui .uk-eingabe .pn-input { flex: 1 1 auto; min-width: 0; }
body.pn-ui .pn-events__field .uk-radius {
  flex: 0 0 6.25rem; width: 6.25rem;
}
body.pn-ui .uk-meine {
  align-self: flex-start;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  color: var(--pn-tx-indigo);
  text-decoration: none;
}
body.pn-ui .uk-meine:hover,
body.pn-ui .uk-meine:focus-visible { text-decoration: underline; }
body.pn-ui .uk-meine--hinweis { font-weight: 500; color: var(--muted); }

body.pn-ui .uk-status {
  margin: -0.25rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pn-ln-blau);
  border-radius: 0.5rem;
  background: var(--pn-sf-blau);
  color: var(--pn-tx-blau);
  font-size: 0.875rem; line-height: 1.4;
}
body.pn-ui .uk-status__ohne { color: var(--muted); }
body.pn-ui .uk-status--fehler {
  border-color: var(--pn-ln-orange);
  background: var(--pn-sf-orange);
  color: var(--pn-tx-orange);
}

body.pn-ui .pn-card.event-card .event-card__distance {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--pn-sf-orange);
  color: var(--pn-tx-orange);
  font-size: 0.75rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 560px) {
  body.pn-ui .uk-feld { flex-basis: 100%; }
}