/* The toolbar remains independent from either expanded panel. */
body.karta-events-page .events-toolbar .events-filters__summary { margin-left: 136px; max-width: calc(100% - 330px); }
body.karta-events-page .events-toolbar .events-map__toggle { position: absolute; top: 0; left: 0; margin: 0; max-width: none; }
body.karta-events-page .events-map__toggle[aria-expanded="true"] { color: #fff; background: #5a628a; border-color: #5a628a; }
.events-map { position: relative; z-index: 10; overflow: visible; margin: 0 0 24px; }
.events-map[hidden], .events-map [hidden] { display: none !important; }
.events-map__timeline { margin: 0 0 18px; padding: 14px 16px 10px; border: 1px solid #d7d8de; border-radius: 8px; background: #fff; }
.events-map__timeline-values { display: flex; align-items: center; gap: 24px; font: 16px/22px "BerlinType", sans-serif; color: #252735; }
.events-map__timeline-values span { white-space: nowrap; }
.events-map__timeline-values output { font-weight: 700; }
body.karta-events-page .events-map .events-map__timeline-reset { margin-left: auto; color: #50556f; background: transparent; }
.events-map__timeline-track { --range-start: 0%; --range-end: 100%; --now-position: 16.66%; position: relative; height: 58px; margin: 6px 8px 0; }
.events-map__timeline-rail { position: absolute; top: 17px; left: 0; right: 0; height: 6px; border-radius: 3px; background: #e1e2e7; }
.events-map__timeline-selection { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--range-start); width: calc(var(--range-end) - var(--range-start)); border-radius: inherit; background: #5a628a; }
.events-map__timeline-past { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; background: transparent; pointer-events: none; }
.events-map__timeline-past.is-disabled { opacity: .55; background: #d7d8de; }
.events-map__timeline-now { position: absolute; z-index: 4; top: -8px; bottom: -8px; left: var(--now-position); width: 1px; background: #252735; }
.events-map__timeline-now span { position: absolute; left: 50%; bottom: calc(100% + 3px); padding: 0 3px; font: 12px/16px "BerlinType", sans-serif; color: #252735; background: #fff; transform: translateX(-50%); white-space: nowrap; }
.events-map__timeline-days { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.events-map__timeline-days span { position: absolute; top: 18px; width: 1px; height: 6px; background: #b8bac4; transform: translateX(-.5px); }
.events-map__timeline-days .is-weekend { background: #c94545; }
.events-map__timeline-days i { position: absolute; top: 8px; left: 50%; width: 0; font: normal 10px/14px "BerlinType", sans-serif; color: #6d6f7b; white-space: nowrap; }
.events-map__timeline-days b { position: absolute; right: .12em; font: inherit; font-weight: 400; }
.events-map__timeline-days small { position: absolute; left: -.12em; font: inherit; color: rgba(109, 111, 123, .34); }
.events-map__timeline-days .is-weekend i { color: #c94545; }
.events-map__timeline-track input[type="range"] { position: absolute; z-index: 5; top: 4px; left: 0; width: 100%; height: 32px; margin: 0; padding: 0; pointer-events: none; appearance: none; -webkit-appearance: none; background: transparent; }
.events-map__timeline-track input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.events-map__timeline-track input[type="range"]::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -7px; border: 3px solid #fff; border-radius: 50%; background: #5a628a; box-shadow: 0 0 0 1px #5a628a; pointer-events: auto; appearance: none; -webkit-appearance: none; cursor: grab; }
.events-map__timeline-track input[type="range"]::-moz-range-track { height: 6px; background: transparent; }
.events-map__timeline-track input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: #5a628a; box-shadow: 0 0 0 1px #5a628a; pointer-events: auto; cursor: grab; }
.events-map__timeline-track input[type="range"]:focus-visible { outline: none; }
.events-map__timeline-track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5a628a; }
.events-map__timeline-track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5a628a; }
.events-map__canvas { width: 100%; height: 480px; border-radius: 8px; overflow: hidden; background: #edeef1; }
.events-map__status { font: 14px/20px "BerlinType", sans-serif; margin: 0 0 12px; }
.events-map__status:empty { display: none; }
.events-map__popup { position: absolute; z-index: 20; width: 290px; max-width: calc(100vw - 72px); max-height: 440px; overflow: auto; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px #282f5726; }
body.karta-events-page .events-map .events-map__popup .post.post--loop.post--event { width: 100%; margin: 0; padding: 0; float: none; }
body.karta-events-page .events-map .events-map__popup .post__inner { height: 330px; margin: 0; border-radius: 0; }
body.karta-events-page .events-map .events-map__popup .post__image { height: 140px; }
body.karta-events-page .events-map .events-map__popup .post__info { padding: 16px; }
body.karta-events-page .events-map .events-map__popup .post__title { font-size: 18px; line-height: 23px; }
body.karta-events-page .events-map .events-map__popup .post__date { font-size: 13px; line-height: 18px; }
body.karta-events-page .events-map button { font: 700 14px/20px "BerlinType", sans-serif; color: #5a628a; border: 1px solid #d7d8de; border-radius: 6px; padding: 6px 10px; background: #fff; cursor: pointer; }
body.karta-events-page .events-map .events-map__close { position: absolute; z-index: 5; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; font-size: 24px; }
.events-map__navigation { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; }
.events-map__navigation button:disabled { opacity: .4; cursor: default; }
.events-map__counter { font: 14px/20px "BerlinType", sans-serif; }
.events-map button:focus-visible, .events-map__canvas:focus-visible { outline: 2px solid #5a628a; outline-offset: 2px; }
.events-map .ol-attribution ul { padding: 0 8px !important; }
.events-map .ol-attribution li { font-size: 12px !important; line-height: 18px !important; }
@media (max-width: 760px) {
  body.karta-events-page .events-toolbar { padding-bottom: 56px; }
  body.karta-events-page .events-toolbar .events-filters__summary { margin-left: 120px; margin-bottom: 0; max-width: calc(100% - 120px); padding: 10px; gap: 6px; font-size: 14px; }
  body.karta-events-page .events-toolbar .events-map__toggle { margin: 0; max-width: none; }
  body.karta-events-page .events-toolbar__add { top: auto; bottom: 0; left: auto; right: 0; }
  .events-map__canvas { height: 360px; }
  .events-map__popup { max-height: 310px; }
  .events-map__timeline { padding: 12px 10px 6px; }
  .events-map__timeline-values { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; line-height: 20px; }
  .events-map__timeline-values span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .events-map__timeline-values span:nth-child(2) { grid-column: 1; }
  body.karta-events-page .events-map .events-map__timeline-reset { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .events-map__timeline-track { height: 54px; margin-inline: 10px; }
  .events-map__timeline-now span { font-size: 11px; }
  .events-map__timeline-days i { font-size: 8px; line-height: 11px; }
  .events-map__timeline-days span:nth-child(even) i { top: 19px; }
  .events-map__timeline-track input[type="range"] { height: 38px; }
  .events-map__timeline-track input[type="range"]::-webkit-slider-thumb { width: 23px; height: 23px; margin-top: -9px; }
  .events-map__timeline-track input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; }
}

body.karta-events-page .events-map .ol-control button { padding: 0; width: 28px; height: 28px; font-size: 20px; line-height: 26px; color: #5a628a; }
body.karta-events-page .events-map .ol-control button span { color: inherit; }