@media (max-width: 767px) {
  /* =========================================================
     QP KALENDER MOBILE FIX 1.0.3
     Kein URL-/Body-Klassen-Abhängigkeit.
     ========================================================= */

  /* ---------- ANSICHTSMENÜ ---------- */
  html body .tribe-events .tribe-events-c-view-selector {
    position: relative !important;
    overflow: visible !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__content {
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    transform: none !important;
    width: min(280px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(48,46,114,.16) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
    box-sizing: border-box !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__list,
  html body .tribe-events .tribe-events-c-view-selector__list-item {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__list-item + .tribe-events-c-view-selector__list-item {
    margin-top: 4px !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__list-item-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    box-shadow: none !important;
    font-family: "Safiro", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__list-item-icon,
  html body .tribe-events .tribe-events-c-view-selector__list-item-icon *,
  html body .tribe-events .tribe-events-c-view-selector__list-item-link > svg,
  html body .tribe-events .tribe-events-c-view-selector__list-item-link::before,
  html body .tribe-events .tribe-events-c-view-selector__list-item-link::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__list-item-text,
  html body .tribe-events .tribe-events-c-view-selector__list-item-link > span:not(.tribe-events-c-view-selector__list-item-icon) {
    position: static !important;
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    text-align: center !important;
    text-indent: 0 !important;
  }

  html body .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
  html body .tribe-events .tribe-events-c-view-selector__list-item-link:hover,
  html body .tribe-events .tribe-events-c-view-selector__list-item-link:focus-visible {
    background: #fe9fc6 !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
  }

  /* ---------- DATEPICKER-AUSSENCONTAINER ---------- */
  html body .tribe-events .tribe-events-c-top-bar__datepicker-container {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Datepicker kann vom Plugin auch außerhalb von .tribe-events ausgegeben werden. */
  html body .datepicker,
  html body .datepicker.datepicker-dropdown,
  html body .tribe-events .datepicker {
    position: static !important;
    inset: auto !important;
    display: block !important;
    float: none !important;
    width: min(100%, 320px) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(48,46,114,.16) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
    transform: none !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    box-sizing: border-box !important;
  }

  html body .datepicker::before,
  html body .datepicker::after {
    display: none !important;
    content: none !important;
  }

  html body .datepicker > div,
  html body .datepicker .datepicker-days,
  html body .datepicker .datepicker-months,
  html body .datepicker .datepicker-years,
  html body .datepicker .datepicker-decades,
  html body .datepicker .datepicker-centuries {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html body .datepicker table {
    display: table !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    table-layout: fixed !important;
    background: transparent !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
  }

  html body .datepicker thead { display: table-header-group !important; }
  html body .datepicker tbody { display: table-row-group !important; }
  html body .datepicker tr { display: table-row !important; }

  html body .datepicker th,
  html body .datepicker td,
  html body .datepicker table tr td,
  html body .datepicker table tr th {
    position: static !important;
    display: table-cell !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    box-shadow: none !important;
    font-family: "Safiro", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 38px !important;
    text-align: center !important;
    vertical-align: middle !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body .datepicker th.datepicker-switch {
    width: auto !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    font-weight: 700 !important;
  }

  html body .datepicker th.prev,
  html body .datepicker th.next {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    cursor: pointer !important;
  }

  html body .datepicker th.prev::before,
  html body .datepicker th.next::before {
    display: inline-block !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
  }
  html body .datepicker th.prev::before { content: "‹" !important; }
  html body .datepicker th.next::before { content: "›" !important; }

  html body .datepicker .dow,
  html body .datepicker .day,
  html body .datepicker .month,
  html body .datepicker .year,
  html body .datepicker .decade,
  html body .datepicker .century {
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    opacity: 1 !important;
  }

  html body .datepicker .old,
  html body .datepicker .new,
  html body .datepicker .disabled {
    color: rgba(48,46,114,.42) !important;
    -webkit-text-fill-color: rgba(48,46,114,.42) !important;
  }

  html body .datepicker td.day:hover,
  html body .datepicker th.prev:hover,
  html body .datepicker th.next:hover,
  html body .datepicker th.datepicker-switch:hover,
  html body .datepicker span.month:hover,
  html body .datepicker span.year:hover {
    background: rgba(255,180,211,.45) !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
  }

  html body .datepicker td.active,
  html body .datepicker td.active:hover,
  html body .datepicker .active,
  html body .datepicker .active:hover,
  html body .datepicker .today,
  html body .datepicker .today:hover {
    border: 2px solid #302e72 !important;
    background: #fe9fc6 !important;
    color: #302e72 !important;
    -webkit-text-fill-color: #302e72 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }
}