Kadence Toggle Button

HTML
<div class="booking-switch" id="bookingSwitch">
  <button id="toggleBooking" class="danz-btn" aria-expanded="false" aria-controls="bookingOptions">
    Direkt Buchen
  </button>
  <div id="bookingOptions" class="btn-switch-wrap" hidden>
    <a href="https://github.com" class="danz-btn">Kombi / Limousine</a>
    <a href="https://gitlab.com" class="danz-btn">SUV / Minivan</a>
  </div>
</div>

<script>
  const container   = document.getElementById('bookingSwitch');
  const toggleBtn   = document.getElementById('toggleBooking');
  const optionsWrap = document.getElementById('bookingOptions');
  const optionLinks = optionsWrap.querySelectorAll('a');

  toggleBtn.addEventListener('click', () => {
    toggleBtn.style.display = 'none';
    toggleBtn.setAttribute('aria-expanded', 'true');
    optionsWrap.hidden = false;
    optionLinks[0].focus();
  });

  optionsWrap.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      optionsWrap.hidden = true;
      toggleBtn.style.display = '';
      toggleBtn.setAttribute('aria-expanded', 'false');
      toggleBtn.focus();
    }
  });
</script>
CSS
.danz-btn {
   font-size: 1.25rem;
    line-height: 1;
    font-family: mr-eaves-modern;
    font-weight: 800;
    padding-top: 10px;
    padding-right: 24px;
    padding-bottom: 10px;
    padding-left: 24px;
    border-radius: 15px;
    border: 1px solid var(--global-palette1);
    background: var(--global-palette1);
    color: var(--global-palette3); 
}

.btn-switch-wrap .danz-btn {
   font-size: 1.125rem;
    line-height: 1;
    font-family: mr-eaves-modern;
    font-weight: 800;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
    border-radius: 15px;
    text-decoration: none !important;
    border: 1px solid var(--global-palette1);
    background: var(--global-palette1);
    color: var(--global-palette3); 
}

.danz-btn:hover,
.danz-btn:focus-visible {
    background: var(--global-palette3);
    color: var(--global-palette1); 
}

.btn-switch-wrap .danz-btn:first-of-type {
    margin-right: 6px;
}

.booking-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

@media (max-width: 420px) {
  .booking-switch { min-height: unset; } /* oder kleinerer Wert */
}