@charset "utf-8";
/*
 * zeitregler.css - the time slider with arrow buttons on merkliste.html and event-melden.html (js/zeitregler.js).
 * [V2] Added 2026-10-13.
 *
 * How it fits in: slider, hour labels, readout and label row come from css/style.css (.range,
 * .range-scale, .time-readout, .filter-group__head). The arrow buttons and their row are copied from
 * css/index.css (the map page), which these pages do not load. Keep both in step if the look changes.
 */

/* Label on the left, readout "19:30 Uhr" on the right, the slider row below. */
.time-field .filter-group__head {
  margin-bottom: var(--space-2);
}

/* Arrow buttons left and right of the slider; slider and hour labels share the middle column. */
.time-stepper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.time-stepper__track {
  flex: 1 1 auto;
  min-width: 0;                     /* lets the slider get narrower than its default width */
}

/* round, as big as the touch target (44 px), only the arrow inside */
.time-step {
  flex: 0 0 auto;
  width: var(--target);
  padding: 0;
  margin-bottom: 0;
}